Nuxt3 如何引入 flowbite

前言

Nuxt3相關套件的教學資源真的很少，Nuxt3一直有在更新上導致flowbite套件的使用方法跟網路上文章似乎都有些不一樣了，剛好踩了這個坑就隨手紀錄一下或許有些人會有一樣的問題。

引入TailwindCss

1.在nuxt3專案下安裝Tailwindcss

1	npm install --save-dev @nuxtjs/tailwindcss

2.Nuxt設定檔加入 Tailwind 模組：

// nuxt.config.{js,ts}
export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss'
    ]
})

3.tailwind.config.js透過以下建立檔案

1	npx tailwindcss init

4.建立一個新的 CSS 檔案./assets/css/tailwind.css並匯入主要的 Tailwind CSS 指令：

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;

5.在 Tailwind CSS 設定檔中設定 Nuxt 專案的範本路徑：

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

引入Flowbite

1.透過 NPM 安裝 Flowbite 並將它保存在package.json檔案中：

1	npm install flowbite

2.需要 Flowbite 做為tailwind.config.js設定中的插件：

module.exports = {
  // other options ...
  plugins: [
    require('flowbite/plugin')
  ],
}

3.將Flowbite的來源JavaScript檔案加入到tailwind.config.js範本路徑中：

module.exports = {
  content: [
    // other files...
    "./node_modules/flowbite/**/*.{js,ts}"
  ],
}

4.在專案底下新增plugins資料夾提供client做使用,新增flowbite.client.ts到資料夾底下

import { initFlowbite } from 'flowbite';

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