🌊
令和最新版 firebase + nuxt3のwebアプリ開発手順②
全体像
- Nuxt3アプリ作成〜firebaseデプロイ
- スタイル・アイコンフレームワークの導入
- firestoreを使ったデータの読み取り、書き込み、更新
- ログイン機能の実装
改訂履歴
2023/3/10 flowbite、heroiconsを導入しました
2022/11/25 nuxt3の正式版リリースに伴い、nuxt.config.tsの書き方が少し変わっています
Tailwindとflowbiteについて
- Tailwind単独でも開発はできますが、いい感じのデザインを素早く作るにはflowbiteは強力な助けとなります。
- flowbiteには独自のプログラムやcssが組み込まれており、スタイルをよりシンプルに書くことができます。
例えばモーダル作成はTailwind単独で作ろうとするとかなり大変ですが、flowbiteを使うと特殊な属性を設定するだけで済みます。 - Heroiconsはライブラリをインストールせずともsvgをコピペするだけでも使えますが、結構記述量が多くなります。
tailwindcssのインストール
- 以前（nuxt3の正式版リリース前?）はTailwindの公式のインストール手順通りにしてもエラーが出ていたのですが、現在は公式通りの手順で導入できます。
Tailwindが正しく導入できたか、app.vueで確認しましょう
app.vue
クリックで表示
<template>
<!-- <NuxtWelcome /> -->
<div class="w-screen h-screen flex flex-col">
<nav class=" bg-cyan-200 w-full flex justify-between h-12 px-4 py-2" >
<div class="text-xl font-bold"> ナビゲーション</div>
<ul class="flex self-end">
<li v-for="menu of ['Home','About','Services','Pricing','Contact']">
<div class="mx-4">{{menu}}</div>
</li>
</ul>
</nav>
<div class="flex h-full">
<aside class=" w-48 bg-gray-200">
<ul>
サイドメニュー
<li v-for="i in 5">
<div class="my-3 text-center">メニュー{{i}}</div>
</li>
</ul>
</aside>
<main class="w-full">
<div class="bg-lime-100 h-full">
コンテンツ
</div>
</main>
</div>
</div>
</template>
flowbiteのインストール
一方で、flowbiteの導入は公式通りにやってもうまくできません
上記の方法で導入しようとしても、こちら（https://flowbite.com/docs/getting-started/nuxt-js/#flowbite-components ）のモーダル確認のステップでボタンを押しても反応しないことがわかります。
一部の書き方を変えることで、動作することを確認しました。
tailwind.config.js
module.exports = {
content: [
'./app.vue',
'./components**/*.vue',
'./pages/**/*.vue',
"./node_modules/flowbite/**/*.{js,ts}"],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')], // ここを書き換え
};
pluginsに以下ファイルを追加します
plugins/flowbite.client.ts
import * as flowbite from 'flowbite';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(flowbite)
});
Heroiconsのインストールと使用方法
インストール
$ yarn add @heroicons/vue
使い方
vueコンポーネントにおいて、<component :is="~~~">の形で指定して用います。
pages/sample.vue
<script setup lang="ts">
import { CheckCircleIcon } from "@heroicons/vue/24/outline";
</script>
<template>
<div v-if="res" class="grid place-items-center">
<component :is="CheckCircleIcon" :class="`h-14 w-14 text-blue-500 inline-block`" />
<div>Thank you!</div>
<p>提出が完了しました</p>
</div>
</template>
tailwindの便利な設定
theme設定
themeについて以下のように設定すると、'primary'という名前で色指定ができるようになります
tailwind.config.js
module.exports = {
content: [
・・・
],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
colors:{
primary: '#0284c7' // extend下にcolorsを置くことで、追加ができる。（theme直下だと上書きしてしまう）
}
},
},
variants: {
extend: {},
},
plugins: [
require('flowbite/plugin')
],
};
全コンポーネントで共通して使うスタイルの設定
@layerを使うと、スタイル設定ができる。
@applyを使うと、tailwindの書き方でスタイルを設定できる。
（もはや普通のcssの書き方を忘れてしまう）
assets/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
h1 {
@apply font-extrabold text-2xl
}
}
参考
Discussion