MacOS環境にNuxt3をインストールする方法まとめ

はじめに

今回は、2022年11月16日に正式リリースされたNuxt3の環境をMacOSに用意し、実際にTypeScriptを実装してみたいと思います。

Nuxt3 とは

Nuxt3 はReactでいうところのVue.js版やNext.jsでイメージするとわかりやすいかもしれません。

NuxtではVie.jsの標準的な機能に加えて、クライアント再度とサーバーサイドの両方で実行できるコードを書くことができます。基本的に「必要なツールが全部入っている」フレームワークと思うのが良いかと思います。

Nuxt3 正式リリースで変わったこと4点

自動インポートとTypeScript完全対応

Vue3のReactivity APIだけでなく、useStateなどの組み込み関数などがすべて「自動でインポート」され自由に呼び出すことができるようになりました。さらにNuxt3の魅力の一つであるTypeScriptが最初からフルサポートされるようになったことが、今回の大きい目玉の一つでしょう、

Nuxt3は最初からTypeScriptを前提に作られているので、何も考えずに導入ができます。

レンダリングモードが充実

ブラウザ上での処理用CSRやサーバサイド用のSSRなど、簡単に切り替えることができるのがNuxtの特徴ですが、加えて下記が利用できるようになりました。

• AWS lambda や Firebase Functionsといったサーバレス環境
• CDN上での分散処理を行うEdge Workers
• Incremental Static Regeneration
• DemoやPWAのサポート

Vue3をベースとした開発環境

Nuxt.jsではVue.jsベースですが、今回のリリースでは進化してきたVue 3.x系の機能をすべて取り込んでいます。

• script setupを含むComposition APIは自動インポートで利用可能
• ビルドツールではViteが採用され高速化

多数のライブラリやモジュール

Tailwind CSS や Apollo Clientなどの人気ライブラリの統合やTyped Routerなどのアドヲンを簡単に追加することができるようになりました。

また、Vie3やViteのプラグインにも対応しており、さらにSentryやGoogle Analyticsなども追加可能とかなり汎用性が増しました。

開発環境

早速、Nuxt3の環境については以下の通りとしています。

Node.jsをインストールしていない場合（Homebrewを使ってインストール）

brewの公式サイトのように、下記コマンドを使用しHomebrewをインストールしてください（詳細のインストール方法は省きます）

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Node.jsをインストールする前にNode.jsを管理するnodebrewをインストールしておきます

$ brew install nodebrew

インストール後にnodebrewのセットアップを行います
（必要に応じてパスなどを通しておいてください）

$ nodebrew setup

Node.jsの安定板を指定してインストール

$ nodebrew install-binary stable

Yarnをインストールしていない場合（Hoomebrewを使ってインストール）

YarnをHomebrewを使ってインストールします。

$ brew install yarn --ignore-dependencies

Nuxt3 をインストールする

プロジェクトを作成したいフォルダに移動し、以下のコマンドを実行します。

$ cd nuxt3
$ npx nuxi init nuxt-app
Need to install the following packages:
  nuxi
Ok to proceed? (y) y
Nuxi 3.0.0 

 ERROR  (node:17865) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

✨ Nuxt project is created with v3 template. Next steps: 
 › cd nuxt-app
 › Install dependencies with npm install or yarn install or pnpm install
 › Start development server with npm run dev or yarn dev or pnpm run dev 
npm notice 
npm notice New major version of npm available! 8.5.5 -> 9.2.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.2.0
npm notice Run npm install -g npm@9.2.0 to update!
npm notice

ERROR (node:17865) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time (Use `node –trace-warnings …` to show where the warning was created)

上記のようなエラーが出ても、インストール自体は成功しています。
これは、「仕様が突然変わることがあるよ」という注意事項なので、現時点では気にしなくてOKです

次に、Next steps: の内容をコマンドで入力していきます。

$ cd nuxt-app
$ yarn install
$ yarn dev

インストール完了後に「yarn dev」を起動することでローカルサーバを起動します。

起動後に下記の画面がブラウザ上で表示できれば成功です。

さいごに

今回はNuxt3の正式リリースに則り、環境作成方法をまとめました。

次回は、Nuxt3を実際に動かしてみ用かと思います。