はじめに

ここではVuetifyが既に組み込まれたVue 3.jsプロジェクトの新規作成方法と、Vuetifyのバージョンアップデート方法についてをまとめます。なおVue 3.jsとVuetifyの説明は割愛します。

自分の作業環境

まずはVSCodeを起動し、ターミナルでプロジェクトを作成するディレクトリに移動します（cd コマンドを使用）。

cd ここにファイルパス

次にnpm create コマンドを使ってVuetifyのプリセットを利用して新規プロジェクトを作成します。

npm create vuetify@latest

表示されるプロンプトに従い、プロジェクト名とインストールするプリセットを選択します。

自分はプリセットを「Recommended」、TypeScriptを使用を「Yes」、依存関係のインストール方法を選択を「npm」としました。

依存関係のインストールが完了すると、Vuetifyが組み込まれたVue 3プロジェクトが作成されます。

VSCodeでプロジェクトフォルダを開き、以下のコマンドで開発サーバーを起動します。

npm run dev

ブラウザでターミナルに表示されたURL（http:／／localhost:3000）にアクセスすると、Vuetifyのウェルカムページが表示されます。

「package.json」ファイルを見てみたところVuetifyのバージョンが「3.6.11」となっていました。作業時点での最新バージョンは「3.6.14」ですので少々古いようです。

以下のコマンドでVuetifyに最新バージョンにアップデートします。

npm install vuetify@latest

package.json ファイルを確認し、Vuetifyのバージョンが更新されたらアップデート作業は完了です。

以上で、Vuetifyが組み込まれたVue 3プロジェクトの新規作成とVuetifyのバージョンアップデートが完了です。