Vue3+Vuetify3+TypeScript+Viteの開発環境を構築する

Windows 10 / 11 に Vue 3 + Vuetify 3 + TypeScript + Vite の開発環境を構築する手順をわかりやすく説明します。

前提条件
1. Node.js の確認・インストール
プロジェクトの作成
1. Vite で Vue 3 + TypeScript プロジェクトを作成
依存パッケージのインストール
1. Vuetify 3 のインストール
Vuetify のセットアップ
1. ディレクトリ作成
2. src/plugins/vuetify.ts を作成
main.ts に Vuetify を組み込む
Vite の設定（vite.config.ts）
実行して確認
動作確認用のサンプルコンポーネント
まとめ

前提条件

Node.js がインストールされていること（推奨: Node.js 18以上）
npm（Node.js インストール時に自動で入る）

Node.js の確認・インストール

node -v
npm -v

インストールされていなければ、公式サイトからインストールしてください。
https://nodejs.org/

プロジェクトの作成

Vite で Vue 3 + TypeScript プロジェクトを作成

npm create vite@latest my-vue-vuetify-app -- --template vue-ts
cd my-vue-vuetify-app

my-vue-vuetify-app は任意のプロジェクト名に変更可

依存パッケージのインストール

npm install

Vuetify 3 のインストール

Vuetify 3 は Vue 3 に対応しています。
Vuetify 3 とアイコンフォントなど必要なパッケージを入れます。

npm install vuetify@latest
npm install @mdi/font
npm install sass

@mdi/font は Material Design Icons のフォントを使用するため
sass は Vuetifyのスタイルで使われるため必要

Vuetify のセットアップ

src/plugins フォルダを作成し、vuetify.ts ファイルを作るのが一般的です。

ディレクトリ作成

src/plugins/vuetify.ts を作成

// @ts-ignore  ※@ts-ignore を使って型チェックだけ無視して問題ありません
import 'vuetify/styles' // Vuetify のスタイルを読み込む
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

export const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    }
  },
})

main.ts に Vuetify を組み込む

src/main.ts を以下のように編集します。

import { createApp } from 'vue'
import App from './App.vue'

import { vuetify } from './plugins/vuetify'

import '@mdi/font/css/materialdesignicons.css' // アイコン用CSS

const app = createApp(App)

app.use(vuetify)

app.mount('#app')

Vite の設定（vite.config.ts）

Vuetifyのコンポーネントやスタイルを正しくビルドするために、vite.config.tsにVuetify用プラグイン設定を入れます。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }), // Vuetifyの自動インポート
　],
})

実行して確認

npm run dev

ブラウザで http://localhost:5173 にアクセスし、Vue + Vuetify アプリが起動すれば成功です。

動作確認用のサンプルコンポーネント

src/App.vue の内容を簡単にVuetifyのボタンを置いて確認してみましょう。

<template>
<v-app>
<v-main>
<v-container class="pa-4">
<v-btn color="primary">Vuetify Button</v-btn>
</v-container>
</v-main>
</v-app>
</template>

<script lang="ts" setup>
// 特に記述なし
</script>

<style>
/* 必要ならスタイルを追記 */
</style>

まとめ

Node.js インストール済み
npm create vite@latest プロジェクト名 — –template vue-ts
Vuetify, sass, @mdi/font インストールVuetify プラグイン作成
main.tsでVuetifyを登録
vite.config.tsにvuetifyプラグイン追加
npm run dev で起動