Nuxt.jsことはじめ〜Hello Worldからルーティングまで〜

# はじめに
この記事では、2020年4月現在の公式ドキュメントにのっとった形で環境構築をし、
ルーティング（画面遷移）まで開発する方法を紹介します。

ある程度Vue.jsを触っている方が対象ですが、コピペで実行できるように書きます。

# 環境

npmバージョン: 6.10.2

# 環境構築

以下のコマンドを使います。

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


`npx`は、npm5.2.0からデフォルトで入っています。

```shell
$ npx create-nuxt-app sample

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in sample
? Project name (sample)
```
ここから質問タイムです。結構長いです。

```shell
? Project name (sample)
# 最初に指定した名前を使うなら何も入力せずエンター

? Project description (My pioneering Nuxt.js project)
# プロジェクトの説明。何も入力せずエンターでおk

? Author name ({user name})
# プロジェクト作者。何も入力せずエンターでおk

? Choose programming language (Use arrow keys)
❯ JavaScript
  TypeScript
# 使い慣れた方を選択

? Choose the package manager
  Yarn
❯ Npm
# 使い慣れた方を選択

? Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js
# 使い慣れたものを選択。Noneにしても後から入れられます

? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro
# Noneが推奨らしい

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv
# 使い慣れたものを選択

? Choose linting tools
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
# 使い慣れたものを選択

? Choose test framework (Use arrow keys)
❯ None
  Jest
  AVA
# 使い慣れたものを選択。Noneにしても後から入れられます

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
  Single Page App
# SSRかSPAか。ニーズに合わせて選択

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests
# 使い慣れたものを選択
```

質問タイムおわり。お疲れ様でした。

```shell
🎉  Successfully created project sample

  To get started:

	cd sample
	npm run dev

  To build & start for production:

	cd sample
	npm run build
	npm run start
```

以下のコマンドを実行し、指定アドレスにアクセス

```
$ cd プロジェクト名
$ npm run dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408585/5ca73d3b-108b-0862-1aac-7a08dedcb06b.png)

# Hello Worldする

プロジェクト直下から、`pages/index.vue`を編集します。
template、scriptタグ内を以下のように変更すると、

```vue
<template>
  <div class="container">
    <h1 class="title">
      Hello World
    </h1>
  </div>
</template>

<script>
export default {
}
</script>
```

シンプルなHello World画面ができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408585/74206ec2-b0ae-f0c9-c48d-2b6967ce0c30.png)

# ルーティングする

次のような画面構成にし、それぞれの画面に遷移できるようにします。

- TOPページ（先ほど作ったHello Worldを使います）
- 犬のページ
- 猫のページ

### 1. pages配下にvueファイルを作成

index.vueからコピーし、`Cat.vue`と`Dog.vue`を作ります。

```
sample/pages
$ ls
Cat.vue   Dog.vue   README.md index.vue
```

### 2. 内容を書き換える

h1タグの中身をこのように書き換えます。

```Dog.vue
<template>
  <div class="container">
    <h1 class="title">
      犬のページです
    </h1>
  </div>
</template>
```
猫も同じように。

### 3. ナビゲーション用のコンポーネントを作成

components配下にNavi.vueという名前のファイルを作成します。

```
sample/components 
$ ls
Logo.vue  Navi.vue  README.md
```

```Navi.vue
<template>
  <nav>
    <nuxt-link to="/">TOP</nuxt-link>
    <nuxt-link to="/dog">Dog</nuxt-link>
    <nuxt-link to="/cat">Cat</nuxt-link>
  </nav>
</template>

<style scoped>
/* ナビゲーション */
nav {
  display: flex;
  align-items: center;
  background: #222;
}
nav a {
  display: block;
  padding: 0.5em;
  color: #eee;
  line-height: 1em;
  text-decoration: none;
}
/* アクティブなリンク */
.nuxt-link-exact-active {
  background: #64c9a2;
}
</style>
```

nuxt-linkはrouter-linkのようなもので、パスを指定するとそのurlにアクセスします。
`/` は `pages/index.vue` を表示します。

### 4. ナビゲーションを表示する

layouts配下にあるdefault.vueを修正し、ナビゲーションを表示するようにします。

```default.vue
<template>
  <div>
    <Navi />
    <nuxt />
  </div>
</template>

<script>
import Navi from '~/components/Navi.vue'

export default {
  components: {
    Navi
  }
}
</script>
・・・
```

### 5. 動きをみる

画面にアクセスしてリンクをクリックしてみると、しっかり画面遷移できています。
![20200506.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408585/e71efd2f-755f-0ae5-6eb8-b542b962a8a9.gif)

# さいごに

Nuxt.jsで、開発環境構築から画面遷移の開発までできるようになりました。
vueで開発する際は、画面遷移の設定を `router.js` に書かなくてはなりませんでしたが、
Nuxt.jsでは「ディレクトリ構成からルーティング処理の設定を自動生成してくれる」という神機能によって、その手間が無くなりました。

長くなりましたが、読んでくださってありがとうございました。
Nuxt.jsのはじめの一歩を踏み出す一助になれば幸いです。

# 参考

[Nuxt.js公式ドキュメント](https://ja.nuxtjs.org/guide/installation)
[Nuxt.jsをインストールしVue.jsアプリケーション開発環境を構築する入門編](https://www.ritolab.com/entry/192)