Zenn
🏀

SveltekitでFlowbiteを使えるようにする

2022/09/13に公開
Tailwind CSS
Svelte
Flowbite
sveletekit
tech

はじめに

FlowbiteというUIライブラリを知り、良さそうだったので試しに使ってみようと思いました。久しぶりにSveleteを触ってみようと思いドキュメントを見ながらやったのですがいくつか書き換える必要があるので備忘を兼ねて記事にします。

ドキュメント
基本的にはこの手順で問題ないのですが、最終的にsrc/app.htmlの中身を修正する必要がありました。詳しくは後述します。
https://flowbite.com/docs/getting-started/svelte/

Sveltekitとは
SveletekitはSvelteのためのフレームワークになります。ReactだとNext.js、VueだとNuxt.jsに該当するものだと思います。
https://kit.svelte.jp/

Flowbiteとは
Tailwind CSSで実装されたUIライブラリです。
https://flowbite.com/

環境構築

基本的に上述したドキュメントの手順通りです。

SveltekitとTailwind CSSのインストール

npm init svelte@next sveltekit-demo
cd sveltekit-demo

npm install
npx svelte-add@latest tailwindcss

Svelete用のFlowbiteコンポーネントのインストール

npm i -D flowbite-svelte

続いて、ディレクトリ直下にtailwind.config.cjsというファイルがあるのでそれを以下のように書き換えます。

const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
  ],

  theme: {
    extend: {},
  },

  plugins: [
    require('flowbite/plugin')
  ],
  darkMode: 'class',
};

module.exports = config;

Flowbiteのインストール

npm i -D flowbite

続いて、tailwind.config.cjsのpluginsに以下を足します。

plugins: [
  require('flowbite/plugin')
],

以上で環境構築は完了です。

動かしてみる

ターミナルで以下のコマンドで起動します

npm run dev or yarn dev

ターミナルにURLが出力されるのでアクセスします。
そうすると以下のようなエラーは出力されると思います。

Error: %svelte.body% in src/app.html should be replaced with %sveltekit.body%
    at load_template (file:///{YOUR_DIR}/sveltekit-demo/node_modules/@sveltejs/kit/src/core/config/index.js:22:10)
    at file:///{YOUR_DIR}/sveltekit-demo/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:403:22
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

このエラーはapp.html内の記述がsvelteのままになっているためのものであり、エラーメッセージの通り書き換えます。

%svelte.assets%
↓
%sveltekit.assets%

%svelte.head%
↓
%sveltekit.head%

%svelte.body%
↓
%sveltekit.body%

つまり、%svelte.~%となっているところをすべて%sveltekit.~%に書き換えればよいだけです。

もう一度URLにアクセスするとキャプチャのカウンターアプリが表示されると思います。
これで完了です。あとはFlowbiteのドキュメントを見ながらhtmlを書き換えたりして各コンポーネントを表示させてみてください。

Discussion