インストール

Nuxt.js はとても簡単に始められます。シンプルなプロジェクトでは必要な依存パッケージは nuxt だけです。

create-nuxt-app を使用する

素早くスタートできるようにするため、Nuxt.js チームは足場ツール create-nuxt-app を作成しました。

npx がインストールされていることを確認してください。(npx は NPM 5.2.0 からデフォルトでバンドルされています)

$ npx create-nuxt-app <project-name>

もしくは yarn を使ってください:

yarn create nuxt-app <my-project>

いくつか質問されます:

  1. サーバーサイドのフレームワークを選択します:
  2. 好きな UI フレームワークを選択します:
  3. Nuxt のモードを選択します。(Universal または SPA
  4. HTTP リクエストを簡単に行うために axios module を追加します。
  5. EsLint to Lint your code on save.
  6. 保存時にコードをチェックするために Prettier を追加します。

回答が終わり次第、全ての依存関係がインストールされ、プロジェクトを開始する次のステップへ進めます:

$ npm run dev

するとアプリケーションは http://localhost:3000 で動いています。

Nuxt.js は pages ディレクトリ内のファイルの更新を監視します。そのため、新しいページを追加したときにアプリケーションを再起動する必要はありません。

プロジェクトのディレクトリ構造についてより深く理解するには ディレクトリ構造のドキュメント を参照してください。

スクラッチから始める

Nuxt.js アプリケーションをスクラッチから作ることもとても簡単で、必要なものは 1つのファイルと 1つのディレクトリ だけです。まずはアプリケーションで動かす空のディレクトリを作りましょう:

$ mkdir <project-name>
$ cd <project-name>

情報: <project-name> の箇所はプロジェクト名に置き換えてください。

package.json

nuxt の起動方法を指定する package.json ファイルが必要です:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

上のように書いておけば npm run dev で Nuxt.js を起動できます。

nuxt のインストール

package.json を作成したら nuxt を npm でプロジェクトに追加しましょう:

npm install --save nuxt

pages ディレクトリ

Nuxt.js は pages ディレクトリ内の *.vue ファイルについて、各ファイルがアプリケーションのひとつのルートに対応するものとして変換します。

pages ディレクトリを作ります:

$ mkdir pages

それから最初のページを pages/index.vue に作ります:

<template>
  <h1>Hello world!</h1>
</template>

そして、プロジェクトを起動します:

$ npm run dev

すると、アプリケーションは http://localhost:3000 で動いています。

Nuxt.js は pages ディレクトリ内のファイルの更新を監視します。そのため新しいページを追加した場合にアプリケーションを再起動する必要はありません。

プロジェクトのディレクトリ構造についてより深く理解するには ディレクトリ構造のドキュメント を参照してください。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する