Vue

This guide explains how to set up Hummingbird with Vue 3 using Tailwind CSS. It covers project setup, configuration, and usage for quickly building and styling components in a Vue app.

Installation

1. Install Tailwind CSS

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

2. Install Hummingbird

Install Hummingbird via preferred package manager:

npm install @hummingbirdui/hummingbird

3. Import CSS

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

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

4. Initialize JS plugins

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>

Optimization

To reduce the final bundle size, import only the specific JavaScript plugins required. The example below demonstrates importing only the modal script.

<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, a modal can be toggled 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>Open</button>
  <div class="modal"> ... </div>
</template>