How to instantiate initFlowbite() globally instead of per page/component in NuxtJS?

[jimmiejackson414]

I have a fairly new Nuxt3 application that I am attempting to switch over to Flowbite. One thing I ran in to was getting javascript-dependent components working properly (#753), and since discovered that it was because I needed to import and instantiate initFlowbite(). This appears to only work on the direct page or component that contains those elements though.

Is there a way to globally instantiate this, as opposed to importing and instantiating inside of an onMounted() function possibly hundreds of times as the size of this application grows?

[jimmiejackson414]

A very helpful person from StackOverflow helped solve this. Essentially creating a client side plugin solves this:

// plugins/flowbite.client.ts
import { initFlowbite } from 'flowbite';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.mixin({
        mounted () {
            initFlowbite();
        }
    });
});