Nuxt３ + Vuetify3

今回はNuxt3にVuetify3（beta)を導入する手順をまとめました。
Vuetify3の公式リリースには大分時間がかかっていますが、beta版も整ってきているようなので、個人プロジェクトとして使ってみたくなりました！
（Vuetify３の公式リリースはいつになるのでしょうか.. 待ち遠しですね><）

1. Nuxtのひな形を作成

公式サイトの手順通りに進めれば、1分ほどでサクッとインストール完了
https://v3.nuxtjs.org/getting-started/quick-start

上から順番にコマンドを打っていくだけです。
今回はyarnを使います。

npx nuxi init nuxt3-app
cd nuxt3-app
yarn install
yarn dev

npmの場合

npm install 
npm run dev

http://localhost:3000/　で以下のページが表示されればアプリ作成成功です！

2. Vuetify3をインストール

vuetify3の最新 + mdi + sassをインストールします。
vuetify2ではインストール後にmdiアイコンのCDNを読み込むscriptが、index.htmlに自動で追加されていましたが、vuetify3では今のところ自分でインストールする必要があるようです。

yarn add vuetify@next mdi
yarn add -D sass

npmの場合

npm install vuetify@next mdi
npm install -D sass

vuetify@nextを使うことで、vuetify3の最新版がインストールされます。
執筆時点ではbeta.5が最新なので、これがインストールされていることが確認できます。

3. vuetify.tsを作成

ルートにpluginsディレクトリを作成し、その中にvuetify.tsを作ります。

/plugins/vueitfy.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,
  });

  nuxtApp.vueApp.use(vuetify);
});

4. nuxt.config.tsファイルを修正

nuxt設定にvuetifyを追加します。

nuxt.config.ts

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ["vuetify/lib/styles/main.sass", "mdi/css/materialdesignicons.min.css"],
  build: {
    transpile: ["vuetify"],
  },
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
  },
});

5. vuetifyコンポーネントが使えるか確認

NuxtWelcomeをコメントアウトして、
vuetifyの<v-btn>を書いてみましょう。

app.vue

<template>
  <div>
    <!-- <NuxtWelcome /> -->
    <v-btn class="ma-5" color="primary">my-btn</v-btn>
  </div>
</template>

サーバーを立ち上げて、

yarn dev

このように表示されていれば適用されています！

まとめ

今回はNuxt3にベータ版のvuetifyを導入する手順を紹介しました。
Vuetifyを使ってみたい方の参考になれれば嬉しいです！

以下参考にさせて頂きました！

https://qiita.com/mml/items/9936471c551ee3f15218
https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html#integrate-vuetify-s-mdi-icons