🌊
令和最新版 firebase + nuxt3のwebアプリ開発手順②
全体像
- Nuxt3アプリ作成〜firebaseデプロイ
- TailwindCSSの導入
- ログイン機能の実装
- firestoreを使ったデータの読み取り、書き込み、更新
TailwindのバージョンとNuxt3との相性
Tailwindcssは、2022年4月時点ではv3が最新です。
ただし、公式ドキュメントのinstallation通りにやるとpostcss8が使えませんとエラーが出ます。
なので、以下stackoverflowの解決策を参考に方法を立てました。
tailwindcssのインストール
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
added 43 packages, changed 4 packages, and audited 819 packages in 5s
120 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
!!重要!! npmでインストールしてください。
yarnでインストールしたら、インストールができてもその後で立ち上がらなくなります。
※2022年1月時点です。現在はどうなのか未確認です。
$ npx tailwindcss init
Created Tailwind CSS config file: tailwind.config.js
taillwind.config.jsというファイルができているはずなので、以下のように書き換えます
module.exports = {
// mode: "jit",
content: [
"./app.vue",
"./components/**/*.{js,vue,ts}",
"./pages/**/*.vue",
],
darkMode: 'media', // or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
mode:'jit'というのはjust in timeモードという最近Tailwindに追加されたモードで、スペースなどで任意の値を設定できたり、高速だったりと色々メリットがあります。
→ Tailwind3はデフォルトでjitモードなので設定は必要ありません。
contentというのは、ビルドする時にtailwindを適用するファイルを限定することで、ビルドを早く終わらせる目的があります。通常はapp.vue、pages直下のファイル、components下のvueファイルを設定しとけば良いでしょう。（古くはpurgeと呼ばれていました）
その他については後述します。
続いて、assets/css/tailwind.cssを作成し、内容は以下のように記載します。
@tailwind base;
@tailwind components;
@tailwind utilities;
nuxt.config.tsを以下の通り書き直します
import { defineNuxtConfig } from "nuxt3";
export default defineNuxtConfig({
css: ["~/assets/css/tailwind.css"],
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
},
});
これで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>
ビルド、エミュレーター、デプロイ
$ NITRO_PRESET=firebase yarn build
$ firebase emulators:start
$ npx firebase deploy
tailwind.configの便利な設定
themeについて以下のように設定すると、'primary'という名前で色指定ができるようになります
module.exports = {
content: [
・・・
],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
colors:{
primary: '#0284c7' // extend下にcolorsを置くことで、追加ができる。（theme直下だと上書きしてしまう）
}
},
},
variants: {
extend: {},
},
plugins: [
require('flowbite/plugin')
],
};
Discussion