前提条件

• node - v10.13 以上 最新の LTS バージョンのインストールをおすすめします。
• テキストエディタは Vetur 拡張機能をインストールした VS Code か WebStorm をおすすめします。
• ターミナルは VS Code の統合ターミナルまたは WebStorm ターミナルを使うことをおすすめします。

create-nuxt-app を使う

すぐ始めるには、create-nuxt-app を使うことができます。

npx（npx は npm 5.2.0 以降だとデフォルトで同梱されています）か、v6.1 の npm か yarn がインストールされていることを確認してください。

yarn create nuxt-app <project-name>

npx create-nuxt-app <project-name>

npm init nuxt-app <project-name>

いくつかの質問（名前、Nuxt オプション、UI フレームワーク、TypeScript、linter、テストフレームワークなど）されます。すべてのオプションをみるには Create Nuxt app を参照してください。

一度すべての質問に答えると、すべての依存関係をインストールします。次のステップは、プロジェクトフォルダに移動して起動します:

cd <project-name>
yarn dev

cd <project-name>
npm run dev

アプリケーションは http://localhost:3000 で実行されています。おつかれさまでした！

スクラッチで始める

1 つのファイルと 1 つのディレクトリを用意するだけで Nuxt.js プロジェクトをスクラッチで作れます。

今回の例では、ターミナルを使ってディレクトリとファイルを作成しますが、お好みのエディタで作成して構いません。

プロジェクトのセットアップ

始めるにはプロジェクトの名前をつけた空のディレクトリを作成し、作成したディレクトリに移動します:

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

<project-name> はご自身のプロジェクト名に置き換えてください。

そして、package.json という名前のファイルを作成します:

touch package.json

package.json ファイルをお好みのエディタで開き、以下の JSON の内容を入力します:

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

scripts に npm run <command> コマンドで起動される Nuxt.js コマンドを定義します。

package.json ファイルとは？

package.json はプロジェクトにおける ID カードのようなものです。もし package.json ファイルがどんなものかご存知ない場合は npm のドキュメントを一読することをおすすめします。

nuxt のインストール

package.json を作成後、以下のように npm または yarn 経由で nuxt を追加します:

yarn add nuxt

npm install nuxt

このコマンドは nuxt を依存関係としてプロジェクトに追加します。package.json にも自動的に追加します。また、node_modules ディレクトリが作成され、インストールしたパッケージと依存関係が保存されます。

最初のページを作成

Nuxt.js は pages ディレクトリ内にある全ての *.vue ファイルをアプリケーションのルートとして変換します。

プロジェクトに pages ディレクトリを作成します:

mkdir pages

そして、pages ディレクトリ内に index.vue ファイルを作成します:

touch pages/index.vue

このページを index.vue と名づけることが重要です。これはアプリケーションが開いた際に Nuxt がデフォルトで表示するページになります。これがホームページであり、index と名づけなればなりません。

index.vue ファイルをエディタで開き、次の内容を追加します:

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

プロジェクトの開始

ターミナルで以下のコマンドのどちらかを入力してプロジェクトを実行します:

yarn dev

npm run dev

今、アプリケーションは http://localhost:3000 で実行されています。

ターミナルのリンクをクリックしてブラウザを開くと、前のステップでコピーした「Hello World」のテキストが表示されます。

ボーナスステップ

pages ディレクトリに fun.vue という名前のページを作成しましょう。

<template></template> を追加し、タグ内におもしろい文章を入れた見出しを入れます。

そして、ブラウザで新しいページ http://localhost:3000/fun にアクセスします。