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

1 2	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

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

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

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

npm install

1	npm install

Vuetify 3 のインストール

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

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

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

// @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')

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の自動インポート
　],
})<span style="background-color: #ffffff; color: #333333; font-family: 'Kosugi Maru', sans-serif; font-size: 16px;"></span>

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の自動インポート

})<span style="background-color: #ffffff; color: #333333; font-family: 'Kosugi Maru', sans-serif; font-size: 16px;"></span>

実行して確認

npm run dev

1	npm run dev

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

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

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

&lt;template&gt;
&lt;v-app&gt;
&lt;v-main&gt;
&lt;v-container class="pa-4"&gt;
&lt;v-btn color="primary"&gt;Vuetify Button&lt;/v-btn&gt;
&lt;/v-container&gt;
&lt;/v-main&gt;
&lt;/v-app&gt;
&lt;/template&gt;
&lt;script lang="ts" setup&gt;
// 特に記述なし
&lt;/script&gt;
&lt;style&gt;
/* 必要ならスタイルを追記 */
&lt;/style&gt;

<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>

<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 で起動