flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Import Flowbite's Javascript library using a Nuxt plugin in tge Nuxt's Integration Guide.

Open lucasdavidferrero opened this issue 5 months ago • 0 comments

Following nuxt's integration guide (https://flowbite.com/docs/getting-started/nuxt-js/#data-attributes) to include flowbites's javascript file we have this example:

// composables/useFlowbite.js

export function useFlowbite(callback) {
  if (process.client) {
    import('flowbite').then((flowbite) => {
      callback(flowbite);
    });
  }
}

I'll suggest replace that code with this approach:

// plugins/flowbite.client.ts
import { useFlowbite } from '~/composables/useFlowbite';
import { initFlowbite } from "flowbite";

export default defineNuxtPlugin(() => {
    useFlowbite(() => {
        initFlowbite();
    })
})

This will load the javascript library even if the user enters for the first time to a SSR page.

lucasdavidferrero avatar Jul 23 '25 21:07 lucasdavidferrero