Logo
hummingbird

Vue

This guide explains how to set up Hummingbird with Vue 3 using Tailwind CSS. It covers project setup, configuration, and usage so you can quickly build and style components in your Vue app.

Install Tailwindcss

Follow the official installation guide to install Tailwind CSS in your Vue project.

Install Hummingbird

Install Hummingbird via your preferred package manager:

npm install @hummingbirdui/hummingbird
Include Hummingbird CSS

Import Hummingbird styles in your main CSS file (e.g., main.css).

/* main.css */
@import "tailwindcss";
@import "@hummingbirdui/hummingbird";
Initialization

To use Hummingbird in a Vue 3 project, import the full library inside the onMounted lifecycle hook in App.vue or a layout component to initialize it after the app is mounted.

<script setup>
import { onMounted } from 'vue';

// Initialize Hummingbird
onMounted(() => {
  import('@hummingbirdui/hummingbird')
})
</script>

<template>
  ...
</template>
Optimize

Optional: you can optimize your application by only importing the components you need.

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/alert');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/button');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/carousel');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/collapse');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/dropdown');
  import('@hummingbirdui/hummingbird/lib/esm/scripts/modal');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/offcanvas');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/popover');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/scrollspy');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/tab');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/toast');
  // import('@hummingbirdui/hummingbird/lib/esm/scripts/tooltip');
})
</script>

<template>
  ...
</template>
JavaScript API

Hummingbird also provides a JavaScript API for programmatic control of components. For example, you can toggle an modal manually using the API.

Here’s how to initialize and use the Modal component:

<script>
import { Modal } from '@hummingbirdui/hummingbird';
import { onMounted } from 'vue';

onMounted(() => {
  const myModal = new Modal('.modal');
  const openBtn = document.querySelector('[data-open-demo-modal]');

  openBtn.addEventListener('click', () => {
    myModal.toggle();
  })
})
</script>

<template>
  <button class="btn btn-primary" data-open-demo-modal>Toggle Modal</button>
  <div class="modal"> ... </div>
</template>