はじめに
Nuxt 3 をさわる機会がありましたので簡単なプログラムを動かしてみました。
事前準備
事前の準備としては以下をインストールするだけ開始できます。Node.jsはv18以降をインストールしてください。
- Node.jsインストール
- VSCodeインストール
- VSCodeの拡張機能 Vue – Official のインストール
プロジェクト作成
参考:Nuxt公式
公式の通りにnpx nuxi init <project-name>のコマンドでプロジェクト作成しようとすると以下のエラーが発生しました。どうもNode.jsをインストールしたあとすぐだと発生するようです。以下の場合であればエクスプローラーでC:\Users\107idealive\AppData\Roamingを開いてnpmフォルダを作成すると解決します。
![](http://idealive.jp/blog/wp-content/uploads/2024/08/スクリーンショット-2024-07-03-180118-1024x280.png)
再度実行するとプロジェクト作成が完了します。
![](http://idealive.jp/blog/wp-content/uploads/2024/08/スクリーンショット-2024-07-03-180251-1024x617.png)
![](http://idealive.jp/blog/wp-content/uploads/2024/08/スクリーンショット-2024-07-03-180334-1024x290.png)
あとはブラウザでlocalhost:3000を開けばWelcomeページが開きます。
![](http://idealive.jp/blog/wp-content/uploads/2024/08/localhost-1024x746.png)
おわりに
今回はNuxt 3のはじめ方を紹介しました。
Nuxt 2で開発したプロジェクトがありNuxt 3に移行しなければならないのですが、WEBで調べたところ大変だという記事ばかり出てきたのでどうしようかと思っていました。一度Nuxt 3の雰囲気を掴むために簡単なプログラムを作成してみました。
“Nuxt 3のはじめ方” への 0 件のフィードバック