如何在NuxtJS中全局实例化initFlowbite()而非逐页/组件实例化？

方案一：使用Nuxt客户端插件（推荐） #

这是Nuxt3中全局注入客户端逻辑的标准方式，自动在客户端运行，无需在每个页面重复代码：

1. 在项目根目录的plugins文件夹下创建flowbite.client.js文件（.client.js后缀确保仅在客户端执行）：

import { initFlowbite } from 'flowbite';
import { defineNuxtPlugin } from '#app';
import { watch, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default defineNuxtPlugin(() => {
  const route = useRoute();

  // 封装初始化函数
  const initFlowbiteComponents = () => {
    initFlowbite();
  };

  // 应用首次挂载时初始化
  onMounted(() => {
    initFlowbiteComponents();
  });

  // 监听路由变化，每次页面切换后重新初始化
  watch(
    () => route.fullPath,
    () => {
      // 延迟100ms确保新页面DOM已渲染完成
      setTimeout(() => {
        initFlowbiteComponents();
      }, 100);
    }
  );
});

Nuxt会自动加载该插件，无需额外配置，所有页面的Flowbite JS组件都会在挂载后自动初始化。

方案二：在App.vue中全局监听路由 #

如果不想创建插件，也可以直接在App.vue中添加全局监听逻辑：

<template>
  <NuxtPage />
</template>

<script setup>
import { initFlowbite } from 'flowbite';
import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const initFlowbiteComponents = () => {
  initFlowbite();
};

// 首次挂载初始化
onMounted(() => {
  initFlowbiteComponents();
});

// 路由切换时重新初始化
watch(
  () => route.fullPath,
  () => {
    setTimeout(() => {
      initFlowbiteComponents();
    }, 100);
  }
);
</script>

为什么App.vue直接写onMounted无效？ #

因为Nuxt3是单页应用，首次加载App.vue时，后续页面的DOM元素还未渲染，initFlowbite()只能初始化当时存在的元素。路由切换后新页面的元素需要重新执行初始化逻辑，所以必须监听路由变化，在每次页面切换后重新调用initFlowbite()。

内容的提问来源于stack exchange，提问作者J. Jackson