🌊

令和最新版 firebase + nuxt3のwebアプリ開発手順②

2022/04/07に公開約3,500字

全体像

  1. Nuxt3アプリ作成〜firebaseデプロイ
  2. TailwindCSSの導入
  3. ログイン機能の実装
  4. firestoreを使ったデータの読み取り、書き込み、更新

TailwindのバージョンとNuxt3との相性

Tailwindcssは、2022年4月時点ではv3が最新です。
ただし、公式ドキュメントのinstallation通りにやるとpostcss8が使えませんとエラーが出ます。

https://tailwindcss.com/docs/guides/nuxtjs

なので、以下stackoverflowの解決策を参考に方法を立てました。

https://stackoverflow.com/questions/70302520/nuxtjs-v3-and-tailwindcss-v3-postcss8-not-compatible

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')
  ],
};

参考

https://www.netlify.com/blog/2021/10/29/pairing-nuxt-3-with-tailwindcss-and-supabase/

Discussion

ログインするとコメントできます