📘

Nuxt 3を始める方法

2023/07/31に公開

はじめに

このページではNuxt 3を始める方法を紹介します。

Visual Studio Codeを起動して左側のメニューから拡張機能をクリックします。

検索欄にvolarと入力して以下の拡張機能をインストールします。

以下のように表示されれば無事インストールは完了しています。

続いて以下の拡張機能をインストールします。

以下のように表示されれば無事インストールは完了しています。

検索欄に@builtinと入力して以下の拡張機能を無効化します。

以下のように表示されれば無事無効化されています。

以下のコマンドを実行してNuxt 3プロジェクトを作成します。

npx nuxi init sample

Visual Studio Codeで作成されたフォルダを開きます。

パッケージマネージャーにはnpmではなくyarnを追加痛いので、以下のコマンドを実行してYarnをインストールします。

npm install -g yarn

以下のコマンドを実行してパッケージをインストールします。

yarn install

ネットワーク回線が悪いとエラー(ERR_SOCKET_TIMEOUT)になる場合があります。
プロジェクトのルートに以下のファイル(.yarnrc)を作成して再インストールします。

network-timeout 36000000

以下のコマンドを実行してアプリを起動します。

yarn dev

ブラウザでhttps://localhost:3000にアクセスして以下のように表示されれば無事起動しています。

Nuxt 3を始める方法を紹介しました。