nuxt.md

<script setup> import { FwbAlert } from '../../src/index' </script>

Flowbite Vue - Nuxt

Flowbite Vue ships a first-party Nuxt module that auto-imports every component and the useToast composable, and auto-injects the library's stylesheet — no manual import statements needed.

Install

npm i flowbite-vue

Register the module

Add flowbite-vue/nuxt to your modules array in nuxt.config.ts:

::: code-group

export default defineNuxtConfig({
  modules: ['flowbite-vue/nuxt'],
})

:::

That's it — components are ready to use anywhere in your app with no import statement:

Success! You can now use Flowbite Vue in your Nuxt application 🎉

<template>
  <fwb-alert type="success">
    Success! You can now use Flowbite Vue in your Nuxt application 🎉
  </fwb-alert>
</template>

Styles

The module auto-injects Flowbite Vue's prebuilt stylesheet into your Nuxt app, so no @import "flowbite-vue/index.css" is needed either.

If you need control over stylesheet load order (for example to resolve a Tailwind CSS cascade-layer conflict with your own app's styles), opt out via the flowbiteVue config key and import the stylesheet yourself through Nuxt's own css array — order it relative to your own styles as needed:

::: code-group

export default defineNuxtConfig({
  modules: ['flowbite-vue/nuxt'],
  flowbiteVue: {
    css: false,
  },
  css: [
    'flowbite-vue/index.css',
    '~/assets/css/main.css',
  ],
})

:::

Toasts: useFwbToast

Flowbite Vue's useToast composable is auto-imported under the name useFwbToast, not useToast — this avoids clashing with other ecosystem composables named useToast (for example Nuxt UI's). The underlying export from flowbite-vue itself is still called useToast, so this renaming only applies to the Nuxt auto-import.

<template>
  <fwb-toast-provider>
    <fwb-button @click="toast.add({ type: 'success', text: 'Hello from Nuxt!', time: 3000 })">
      Show toast
    </fwb-button>
  </fwb-toast-provider>
</template>

<script setup>
const toast = useFwbToast()
</script>