Nuxt

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

Installation

1. Install Tailwind CSS

Follow the official installation guide to install Tailwind CSS in a Nuxt 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).

@import "tailwindcss";
@import "@hummingbirdui/hummingbird";

4. Initialize JS plugins

Composable

Create a composable useHummingbird.ts in the composables directory, this composable ensures Hummingbird scripts run only after the Nuxt app has mounted and hydration is complete.

import { onMounted } from "vue";

export function useHummingbird(callback: () => void) {
  const nuxtApp = useNuxtApp();

  onMounted(() => {
    if (import.meta.client && !nuxtApp.isHydrating) {
      callback();
    }
  });
}

Import and call useHummingbird inside a Nuxt page (e.g., app.vue file) to load and initialize the Hummingbird JavaScript bundle.

<script setup>
import { useHummingbird } from './composable/useHummingbird';

useHummingbird(() => {
  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 { useHummingbird } from './composable/useHummingbird';

useHummingbird(() => {
  // 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 setup>
import { useHummingbird } from './composable/useHummingbird';

useHummingbird(async () => {
  const { Modal } = await import('@hummingbirdui/hummingbird');

  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>