⚙️

Nuxt3 + Vuetify3 + Volarの開発環境を構築する

2022/02/03に公開

Nuxt3もVuetify3もGAではないため不安定ですが環境構築の手順を追従していこうと思います。
※ alpha版だったVuetify3をbeta版にして更新しました。

前提条件

下記環境で構築しています。
なお、私はWSL2 + Docker Desktop + devcontainerで実行しますが、ホスト側で実行される方は適宜読み替えてください。

  • Windows 11 Pro 21H2
  • Visual Studio Code: 1.67.1
  • WSL2
  • Docker 20.10.12
  • コンテナ環境
    • Debian buster (10.10)
    • Node.js: v16.13.2
    • yarn: 1.22.18
  • プロジェクト
    • Nuxt.js: 3.0.0-rc3
    • vuetify: v3.0.0-beta.2
.devcontainerフォルダ
.devcontainer/devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.234.0/containers/javascript-node
{
  "name": "Node.js",
  "build": {
    "dockerfile": "Dockerfile",
    // Update 'VARIANT' to pick a Node version: 18, 16, 14.
    // Append -bullseye or -buster to pin to an OS version.
    // Use -bullseye variants on local arm64/Apple Silicon.
    "args": { "VARIANT": "18-bullseye" }
  },

  // Set *default* container specific settings.json values on container create.
  "settings": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }
  },

  // Add the IDs of extensions you want installed when the container is created.
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "Vue.volar"
  ],

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],

  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "yarn install",

  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
  "remoteUser": "node"
}
.devcontainer/Dockerfile
# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.234.0/containers/javascript-node/.devcontainer/base.Dockerfile

# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
ARG VARIANT="18-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

# [Optional] Uncomment if you want to install an additional version of node using nvm
# ARG EXTRA_NODE_VERSION=10
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"

# [Optional] Uncomment if you want to install more global node modules
# RUN su node -c "npm install -g <your-package-list-here>"

Nuxt3プロジェクト作成

まずはNuxt3プロジェクトを作成します。
公式の手順に沿って下記コマンドを実行します。

npx nuxi init nuxt3-app

nuxiがインストールされていない場合はインストールするか聞かれますのでyで進めます。

node ➜ /workspaces/nuxt3-vuetify-for-zenn (master ✗) $ npx nuxi init nuxt3-app
Need to install the following packages:
  nuxi
Ok to proceed? (y) y

下記ログが流れてすぐに完了します。

Nuxt CLI v3.0.0-rc.3                                                                                        02:29:12
ℹ cloned nuxt/starter#v3 to /workspaces/nuxt3-vuetify-for-zenn/nuxt3-app                                    02:29:14
                                                                                                            02:29:14
 ✨ Your dandy Nuxt project is just created! Next steps:

 📁  cd nuxt3-app                                                                                           02:29:14

 💿  Install dependencies with npm install or yarn install or pnpm install --shamefully-hoist               02:29:14

 🚀  Start development server with npm run dev or yarn dev or pnpm run dev

成功するとこのように最低限のファイルが作成されます。
npx nuxi init nuxt3-app後のファイル

(オプション)
私は.devcontainerのあるフォルダに展開したいためmv -f ./nuxt3-app/* ./mv -f ./nuxt3-app/.* ./でファイルを同階層に移動させますが、気にされない方はcd nuxt3-appでサブフォルダへ移動してください。

依存関係をダウンロードします。

yarn install

依存関係のダウンロードが完了したら試しに起動してみます。

yarn dev

このようなログが表示されたらブラウザでhttp://localhost:3000/にアクセスします。
Fetch APIが実験的機能である旨の警告がエラーとして出ていますが動作は問題なさそうです。

Nuxt CLI v3.0.0-rc.3                                                                                        02:31:07
                                                                                                            02:31:07
  > Local:    http://localhost:3000/ 


 ERROR  (node:1234) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

ℹ Vite server warmed up in 124ms                                                                            02:31:11
ℹ Vite client warmed up in 694ms                                                                            02:31:11
✔ Vite server built in 454ms                                                                                02:31:11
✔ Nitro built in 305 ms                                                                               nitro 02:31:12
(node:1234) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

Nuxt3のインストール及び起動が確認できます。
npx nuxi init nuxt3-app後のNuxt Topページ

Vuetify3のインストール

Vuetifyをインストールしていきます。
下記コマンドでvuetifyをインストールします。

yarn add vuetify@next sass

Nuxt.js用のVuetifyモジュールはまだVuetify3に対応していないためプラグインを作成します。

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,
  })

  nuxtApp.vueApp.use(vuetify)
})

ここでこのコメントを参考にnuxt.config.tsを編集します。

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

Vuetifyの動作を確認する

Vuetifyの動作を確認するためにapp.vueを変更します。

app.vue
<template>
  <v-app>
    <v-app-bar app>
      <v-app-bar-title>Nuxt3 & Vuetify3 & Volar project</v-app-bar-title>
    </v-app-bar>
    <v-main>
      <nuxt-page></nuxt-page>
    </v-main>
  </v-app>
</template>

pages/index.vueにトップページ用ファイルを作成します。

pages/index.vue
<template>
  <v-container>
    <h1>This is Nuxt3 & Vuetify3 & Volar project!</h1>
    <v-btn @click="ready = !ready">ready?</v-btn>
    <div class="py-3">ready: {{ ready }}</div>
  </v-container>
</template>

<script setup lang="ts">
const ready = ref(false);
</script>

http://localhost:3000/にアクセスすると下記結果が得られるはずです。
vuetify導入後のトップページ

Volarのインストール

最後にvolarをインストールします。
Visual Studio Codeの拡張機能: マーケットプレースでvolarと検索してvolarをインストールします。
Visual Studio Codeの拡張機能: マーケットプレースでと検索

volarがインストールされるとホバーした際にnuxt-pageコンポーネントの型が表示されるようにます。
がインストールされるとホバーした際にコンポーネントの型が表示されます

この手順は不要になりました

しかし、v-btn等のVuetifyのコンポーネントはホバーしても表示されません。
等ののコンポーネントはホバーしても表示されません

これに対処するためにはGlobalComponentsを宣言する必要があります。volarマーケットプレース参照

components.d.tsファイルを作成して下記内容を保存します。

components.d.ts
declare module "@vue/runtime-core" {
  type VuetifyComponents = typeof import("vuetify/components");
  export type GlobalComponents = VuetifyComponents;
}
export {};

コンポーネント名のサジェストやpropsの型チェックが効いています。

ありがたいことにslotもサジェストしてくれます。

おわりに

以上でNuxt3 + Vuetify3 + Volarの開発環境は終わりです。
Nuxt2と比べると型が使いやすくなって大満足です。ただ、まだ正式版ではないためHMRが上手く効かない時あったりします。これは今後の正式版リリースで変わると思いますので随時アップデートしていく予定です。

今回と同様のプロジェクトはGitHubのリポジトリに公開してありますので興味のある方はご確認ください。

Discussion