Logo
hummingbird

Nuxt

Initialization
Composable

Use this utility to ensure that Hummingbird scripts run only when the Nuxt app is fully mounted and no longer hydrating.

import { onMounted } from "vue";

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

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

You can import and call useHummingbird inside Nuxt page to load and initialize the full Hummingbird JavaScript bundle

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

useHummingbird(() => {
  import('@hummingbirdui/hummingbird');
});
</script>

<template>
...
</template>
Optimized Imports

To reduce JavaScript bundle size, you can selectively import only the scripts you need from the library.

<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

If you’re using component classes directly (like Modal, Dropdown, etc.), you can dynamically import and interact with them using the same hook.

<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>Toggle Modal</button>
  <div class="modal">...</div>
</template>