Nuxt 3のはじめ方

はじめに

Nuxt 3 をさわる機会がありましたので簡単なプログラムを動かしてみました。

事前準備

事前の準備としては以下をインストールするだけ開始できます。Node.jsはv18以降をインストールしてください。

• Node.jsインストール
• VSCodeインストール
• VSCodeの拡張機能 Vue – Official のインストール

プロジェクト作成

公式の通りにnpx nuxi init <project-name>のコマンドでプロジェクト作成しようとすると以下のエラーが発生しました。どうもNode.jsをインストールしたあとすぐだと発生するようです。以下の場合であればエクスプローラーでC:\Users\107idealive\AppData\Roamingを開いてnpmフォルダを作成すると解決します。

再度実行するとプロジェクト作成が完了します。

あとはブラウザでlocalhost:3000を開けばWelcomeページが開きます。

おわりに

今回はNuxt 3のはじめ方を紹介しました。

Nuxt 2で開発したプロジェクトがありNuxt 3に移行しなければならないのですが、WEBで調べたところ大変だという記事ばかり出てきたのでどうしようかと思っていました。一度Nuxt 3の雰囲気を掴むために簡単なプログラムを作成してみました。