Vue3+Vite项目引入Flowbite后modal等组件无法正常显示

不生效核心是两个逻辑问题：

1. 全局import 'flowbite'的自动初始化逻辑仅在脚本首次加载时执行一次，执行时机早于Vue组件挂载，此时页面上还不存在带data-modal-toggle属性的按钮、模态框DOM，事件绑定完全没有执行。
2. Vue的条件渲染（v-if）、路由切换会动态销毁、重建DOM，就算首次加载绑定成功，后续DOM更新后原有绑定的事件也会直接丢失。

第一步：补全Tailwind配置 #

先打开项目根目录的tailwind.config.js，确保content和plugins配置包含flowbite相关路径，否则后续样式也会异常：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

方案1：组件内触发初始化（改动最小） #

不用修改原有模板代码，仅在用到Flowbite组件的文件里，等DOM挂载完成后再调用对应组件的初始化方法即可，修改你的modal.vue：

<template>
  <!-- 原有模板代码全部保留 -->
  <!-- Modal toggle -->
  <button class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button" data-modal-toggle="default-modal">
    Toggle modal
  </button>

  <!-- Main modal -->
  <div id="default-modal" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center h-modal md:h-full md:inset-0">
      <div class="relative px-4 w-full max-w-2xl h-full md:h-auto">
          <!-- Modal content -->
          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
              <!-- Modal header -->
              <div class="flex justify-between items-start p-5 rounded-t border-b dark:border-gray-600">
                  <h3 class="text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
                      Terms of Service
                  </h3>
                  <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="default-modal">
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
                  </button>
              </div>
              <!-- Modal body -->
              test
              <!-- Modal footer -->
              <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
                  <button data-modal-toggle="default-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
                  <button data-modal-toggle="default-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">Decline</button>
              </div>
          </div>
      </div>
  </div>
</template>

<script setup>
import { onMounted, onUpdated } from 'vue'
// 导入对应组件的初始化方法，下拉菜单对应initDropdowns、日期选择器对应initDatepickers
import { initModals } from 'flowbite'

onMounted(() => {
  // 组件DOM挂载完成后初始化模态框
  initModals()
})

// 如果模态框用v-if控制显示隐藏，需要加这段，DOM更新后重新绑定事件
onUpdated(() => {
  initModals()
})
</script>

main.js里的import 'flowbite'可以保留不用删除，只是它的默认初始化逻辑不覆盖SPA动态渲染的DOM。

方案2：手动实例化组件（复杂场景更稳定） #

如果需要自定义组件配置、绑定显隐回调，可以直接拿DOM元素创建实例，不需要依赖data属性自动绑定：

<script setup>
import { onMounted, ref } from 'vue'
import { Modal } from 'flowbite'

const modalRef = ref(null)
let modalInstance = null

onMounted(() => {
  modalInstance = new Modal(modalRef.value, {
    placement: 'center',
    backdrop: 'static',
    backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40'
  })
})

const openModal = () => modalInstance.show()
const closeModal = () => modalInstance.hide()
</script>

<template>
  <button @click="openModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
    Toggle modal
  </button>

  <div ref="modalRef" id="default-modal" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center h-modal md:h-full md:inset-0">
    <!-- 模态框内容和之前一致，关闭按钮直接绑定@click="closeModal"即可 -->
  </div>
</template>

额外注意 #

如果项目存在路由切换场景，可以在路由的afterEach钩子中统一调用一次用到的Flowbite组件初始化方法，避免新页面加载的组件没有绑定事件。

内容的提问来源于stack exchange，提问作者Osama