Nuxt3 + Vuetify3 + firebase で割り勘サイト作ってみる(環境構築編）

はじめに

Nuxt2のサポートが終了して、Nuxt3の知識を深めなければと思いつつ、気がつけば１年経ちました、、、。去年の時点では開発中でまだまだ安定してないなっと思いつつ、そろそろ本腰を入れて勉強しようかなと思い、Nuxt3を用いて簡単なアプリを作成してみました。
※アプリ完成までのログを少しずつ上げてきます

どんなの作ったの

とりあえず、最終形はこちらができました。
記事で、Vuetify Nuxt3 Firebase Lottieについて
書いていきたいとおもいます。
wa/ri | みんなの建て替え、簡単に割り勘

※プロジェクトは違いますが、同じ構成なので
全体図はこちらをどうぞ。
Y.netLabo

まずは開発ベースの作成

とりあえず最新版をチョイスしました。

"nuxt": "^2.15.8",
"vuetify": "^2.6.10",

1.Hello Nuxt3!

これは当たり前だけど、問題なく動いた。
やり方は公式通りで、Get Started を参照

npx nuxi@latest init <project-name>
cd <project-name>
npm install
npm run dev

2.Vuetify3入れてみる

前回構築した時はここからつまづいた。。。
こちらも公式参照しながらで、まずは Get Started を参照...Nuxt3の導入方法あるじゃん！！

npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font

nuxt.configを変更して。。。

nuxt.config.ts

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
  //...
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    //...
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
})

pluginsのディレクトリを作って、vuetify.tsを作成

~/plugins/vuetify.ts

// import this after install `@mdi/font` package
import '@mdi/font/css/materialdesignicons.css'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({})
  app.vueApp.use(vuetify)
})

layouts（全部の共通定義）は使いたいので、layouts/default.vue側に
v-appを定義して。。。

layouts/default.vue

<template>
  <v-app>
    <v-main>
        <slot />
    </v-main>
  </v-app>
</template>

app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

pages/index.vue

<template>
  <NuxtWelcome />
</template>

うごいた👏