如何在 NuxtJS 中全局实例化 initFlowbite() 而不是按页面/组件实例化？

Question

我有一个相当新的 Nuxt3 应用程序，我正在尝试切换到 Flowbite。我遇到的一件事是让依赖于 javascript 的组件正常工作，后来发现这是因为我需要导入并实例化 initFlowbite()。但这似乎只适用于包含这些元素的直接页面或组件。

例如，我有一个带有多个工具提示的 Vue 页面。如果我添加以下代码，它就可以工作。

import { initFlowbite } from 'flowbite';

onMounted(() => {
  initFlowbite();
});

如果我将相同的代码添加到 App.vue，它就不再起作用。

有没有一种方法可以全局实例化它，而不是随着应用程序大小的增长而在 onMounted() 函数内部导入和实例化数百次？

Answer 1

您可以通过客户端插件添加全局 mixin

plugins/flowbite.client.ts

文件名中的

.server

或

.client

后缀将允许仅在服务器或客户端加载插件。

import { initFlowbite } from 'flowbite';

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