😽

Laravel Inertia.js と Flowbit を使うときに気を付けること

2023/11/17に公開

以下の公式サイトにVueにFlowbitをインストール方法が書いてあります。
しかし、これだけでは、Laravel上では上手く動いてくれませんでした。

今回は上手く動かせた時の、備忘録です。

動作環境

Laravel 10
Inertia.js 1.0
Flowbit 2.1
Tailwind 3.2

基本的なインストール方法は以下になります。
ターミナルで次のコマンドを実行して、Flowbite をインストールします。

npm install flowbite

tailwind.config.jsにFlowbite をプラグインとして読み込みます。

tailwind.config.js

import flowbitePlugin from "flowbite/plugin";

export default {
    plugins: [flowbitePlugin],
};

さらにtailwind.config.jsのcontentにflowbiteを読み込みます。

tailwind.config.js

export default {
    content: [
        "./node_modules/flowbite/**/*.js",
    ],
};

ここでひと工夫、必要があります。
Inertia.jsのフックからFlowbitを初期化します。
こうすることによって、Vueのコンポーネントを表示する時に、Flowbitがちゃんと動いてくれます。

app.js

import { router } from "@inertiajs/vue3";

router.on("navigate", (event) => {
    // UI framework Flowbit を使用する。
    initFlowbite();
});

次のコマンドを実行し、ローカルサーバーを起動します。
localhost:3000/にアクセスし、Flowbitが動いているか確認します。

npm run dev

Inertia.jsでFlowbitが動いてくれず、手こずりました。
この時間かかった分、Flowbitの活躍に期待しています。