【Nuxt3】MacでNuxtアプリケーションの環境構築をする

2023年6月29日2023年7月1日

Node.jsをインストールする

まず初めにNode.jsをインストールします。そのためにHomebrewとnodebrewもインストールします。

Homebrewをインストール

Homebrewの公式に載っているスクリプトを実行します。

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

インストールできていれば以下コマンドでHomebrewのバージョンが確認できます。

brew -v

Homebrew 4.0.26
Homebrew/homebrew-core (git revision caea5aa1341; last commit 2022-01-27)

nodebrewをインストール

以下コマンドでnodebrewをインストールします。

brew install nodebrew

インストールできていれば以下のコマンドでnodebrewのバージョンを確認できます。

nodebrew -v

nodebrew 1.2.0

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>
    nodebrew prune [--dry-run]            Uninstall old versions, keeping the latest version for each major version

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

Node.jsをインストール

以下のコマンドでNode.jsをインストールします。{version}のところにインストールしたいバージョンを入れて実行してください。

nodebrew install-binary {version}

今回は安定版（stable）をインストールしました。

nodebrew install-binary stable

うまくいかない場合はsetupをしてからインストールしてみてください。

nodebrew setup

インストールしたバージョンを有効化します。

nodebrew use {インストールしたバージョン}

次にnodeの環境パスを通します。使っているシェルがbashなら

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

zshなら

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

使っているシェルがわからない場合、echo $SHELL で確認できます。

ターミナルを再起動してから以下のコマンドを実行し、nodeのバージョンを確認できればNode.jsのインストールは完了です！

node -v

v20.3.1

アプリケーションを作成する

ターミナルでアプリケーションを作成したい場所に移動し、以下のコマンドを実行します。

npx nuxi init {アプリ名}

「Ok to proceed? (y)」と聞かれたら「y」と打ってエンターをクリックします。

作成されたアプリに移動し、以下のコマンドを実行するとパッケージ（ライブラリ）がインストールされます。

npm install

続いて以下のコマンドを実行します。

npm run dev

するとターミナルが以下のようになります。

Nuxi 3.6.1                                                            15:14:35
Nuxt 3.6.1 with Nitro 2.5.2                                           15:14:35
                                                                      15:14:38
  > Local:    http://localhost:3000/ 
  > Network:  http://~:3000/
  > Network:  http://~:3000/
  > Network:  http://~:3000/

✔ Nuxt Devtools is enabled v0.6.4 (experimental)                     15:14:39
ℹ Vite client warmed up in 2669ms                                    15:14:45
✔ Nitro built in 2127 ms

そしてブラウザで「http://localhost:3000/」にアクセスすると、、