Nuxt3+Vuetifyアプリ新規作成チート手順

検索HELL

フロントエンドのツールはどうしてこうメジャーバージョンアップで破壊的変更をするんでしょうか？

エラーが出て詰まる -> ググるかChatGPTに聞く -> 古いバージョンについてのもので役に立たない -> もう一度ググるかChatGPTに聞く

のループを多くの人がやっているのではないかと思います。

動機

自分で作って運営しているWebサービスがあるんですが、これはVue2+BootstrapVueのSPAでした。
これをVue3に移行しつつ、ついでにSSRも対応してOGPも万全にしよう、というものです。

目標と結果

• Nuxt3(必然的にVue3)で、
• Vuetifyを使い、
• SSRで動かす

以下の手順で、2023年7月時点での話ですが、しっかり成功しました。ご参考にどうぞ。
Vuetifyにしたのは、BootstrapVueはVue3には対応していない（少なくとも簡単にはいかない）からです。（この部分は若干ガセネタの可能性がある）

Appの作成

Node.jsやnpmは充分新しいバージョンを入れている前提です。
まず公式サイトの手順に従い, npm create vuetify を試みました。が、これはプレーンなVueを使う構成であってnuxtを使うようになってない。なのでこの路線はダメです。

なのでNuxtの記載に従い, npx nuxi@latest init <project-name> からいきます。

検索すると, npx create-nuxt-app もNuxtアプリ作成コマンドとして見つかりますが、これはNuxt2用、かつ対話型のコマンドでアプリの構成を細かく聞いてきます。nuxiコマンドだと対話要素はなく、最小構成のアプリがポンとできます。

インストール

npm install vuetify 

vuetifyを入れます。検索すると、vuetify@nextにしろ、みたいな話もありますがそれは古い情報です。普通のvuetifyでよろしい。

設定ファイルの構成

フロントエンドではいつもここが泣き所ですが、試行錯誤の末の結果のみ書きます。

plugins/vuetify.ts

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    ssr: true,
    theme: {
        defaultTheme: 'dark'
    }
  });
  nuxtApp.vueApp.use(vuetify);
});

まあthemeのあたりはお好みで。nuxiコマンドだとpluginディレクトリを作ってもくれないので注意。自分で作ります。

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  build: {    
    transpile: [/vuetify/]
  }
})

transpile: のところが一番時間を食った。これがないと、SSRで実行した時点でvuetifyのCSSファイルが処理できず、
Unknown file extension ".css" のエラーが出る。

まとめ

npx nuxi@latest init <project-name>
cd <project-name>
npm install vuetify
<plugins/vuetify.ts, nuxt.config.tsを上記のとおり構成>
<app.vueをvuetifyコンポーネントを使うようちょろっと修正>
npm run dev

<手元のブラウザで動作確認>

これで問題なければアプリ開発本体に入れます！