【vue】nuxt3の新規プロジェクトを構築してvuetifyを使用できるようにする。

概要

いろいろやり方があるので自分のやり方はこれにするという、構築方法

基本nuxt3の公式サイトの手順で行う。

そこに書かれている前提条件は

Node.js -v18.0.0以降
テキストエディタ-　Volarの拡張機能を備えたVSCodeをおすすめ
ターミナル- Nuxt コマンドを実行するため

とあるのでそれに従って行う。

VSCodeでのお話だがNuxtを利用する場合はコミュニティが開発したNuxtrがいいらしい。

Nuxt3のプロジェクト作成

新規プロジェクトはnuxiというNuxt用の新しく作られたCLIを使うみたい。

1.CLIを使用して作成

npx nuxi@latest init <project-name>

今回は

npx nuxi@latest init nuxt3-project

※先にプロジェクトフォルダーを作ってしまった人はそのプロジェクトディレクトリーで

npx nuxi@latest init .

これでそのディレクトリー直下にいろいろ作成される

2.CLIを実行したときの質問に答える

yで続ける

自分はyarnを使用するのでyarnを選択

名でNuxtに一部のデータを収集させるものに参加するかどうか詳細はgithubのページ書いてあるみたいなこと今回はNoを選択

gitリポジトリーの初期化をするか。git管理する人は初期化してもいいですが後で可能なのでNoですすめる。

作成したプロジェクトに移動して実行できるとの説明が出て完了。

3.Nuxt3の確認、実行

cd nuxt3-project
yarn run dev

WSLで環境を構築しているが、実行してして接続「http://localhost:3000/」場合とVSCodeで開くとこんな感じ。

Vuetify3の利用

こちらもVuetify公式を見ながらで追加していく。

1.yarnで追加

Vuetifyの説明でもNuxtのプロジェクト構築しているが今回はNuxt3の公式を見てインストールしているので追加の作業のみ行う。

yarn add -D vuetify vite-plugin-vuetify
yarn add @mdi/font

-Dはdevオプションでvuetifyは最終的に変換(トランスパイル)されるのでdevでインストールしているみたい(typescriptも同じ関係で-Dでインストールすることがある)

この後vuetifyで追加するファイル構成はこんな感じ

2.nuxt.config.tsを編集

Nuxt3で使用するためにnuxt.config.tsを編集おそらくNuxt3がすでに中身があるので

// https://nuxt.com/docs/api/configuration/nuxt-config
import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
export default defineNuxtConfig({
  devtools: { enabled: true }, // Nuxt3にあったもの
  //...
  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,
      },
    },
  },
});

3.pluginsにvuetify.tsを作成

~/plugins/vuetify.tsに作成して。

※Nuxt3はpluginsを作成すると勝手に読み込みをしてくれる。

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

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

4.vuetifyにレイアウトなどを定義

少し公式と違いますがレイアウトの機能を使用すると思うのでその確認のために少し内容を変えています。

~/app.vue

<template>
  <NuxtLayout>
    <v-btn>app.vue</v-btn>
  </NuxtLayout>
</template>

~/layouts/default.vue

<template>
  <v-app>
    <!-- .... -->
    <v-btn>default.vue</v-btn>
    <slot />
  </v-app>
</template>

5.確認

~/app.vue、~/layouts/default.vue両方で定義した要素が表示できました。

おまけソースディレクトリ(srcDirの変更)

nuxt3でもルートにいろいろフォルダーが作られるのが嫌な人がいます。

その場合はnuxt3のsrcDirのようにnuxt.config.ts追記しましょう。

export default defineNuxtConfig({
  // srcにしているが変更可
  srcDir: "src/", 
})

あとは必要なディレクトリーを移動させる。

-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| src/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| static/
------| store/
------| server/
------| app.config.ts
------| app.vue
------| error.vue