Nuxt さわってみた

GW 最終日に初めて Nuxt をさわって Hello World の表示までできたのでまとめておきます。

## Nuxt プロジェクトを作る

以下のページを参考に進めていきました。

- [インストール - Nuxt.js](https://ja.nuxtjs.org/guide/installation)

プロジェクト名は **hello-nuxt** とします。

今回は yarn を使っていきます。

```zsh
$ yarn create nuxt-app hello-nuxt
```

質問がいくつかでます。
初めてなのであまり深く考えずに選択していきます。

```text
? Project name (hello-nuxt) 
```

変更しないので、`return`

```text
? Project description (My riveting Nuxt.js project) 
```

このままでいいので、`return`

```text
? Use a custom server framework (Use arrow keys)
❯ none <return>
  express
  koa
  adonis
  hapi
  feathers
  micro
(Move up and down to reveal more choices)
```

server framework?
よくわからないので後で調べよう `return`
(矢印キーで選択できます)

```text
? Choose features to install (Press <space> to select, <a> to toggle all, <i> to
 invert selection)
❯◉ Progressive Web App (PWA) Support
 ◉ Linter / Formatter
 ◉ Prettier
 ◉ Axios
```

とりあえず全選択 A => `return`
(スペースキーで選択、Aキーで全選択)

```text
? Use a custom UI framework
  none
  bootstrap
❯ vuetify
  bulma
  tailwind
  element-ui
  buefy
(Move up and down to reveal more choices)
```

Vuetify 使ってみたかったので選んで `return`

```text
? Use a custom test framework (Use arrow keys)
❯ none
  jest
  ava
```

今回、テストはなしで `return`

```text
? Choose rendering mode
  Universal
❯ Single Page App
```

SPA を試してみたい（気持ちだけはある）ので、選択して `return`

```text
? Author name (Your Name)
```

特に変更なければ `return`

```text
? Choose a package manager
  npm
❯ yarn
```

今回は yarn を選んで `return`

インストールが進んで、プロジェクトの初期設定が完了し、以下のメッセージが表示されます。

```text
  To get started:

	cd hello-nuxt
	yarn run dev

  To build & start for production:

	cd hello-nuxt
	yarn run build
	yarn start
```

プロジェクトディレクトリに移動します。

```zsh
$ cd hello-nuxt
```

この時点で git に初回コミットしておきましょう。

```zsh
$ git add -A
$ git commit -m 'initial commit'
```

## 動かしてみる

試しに動かしてみます。

```zsh
$ yarn run dev
```

なぜかエラーが出ました。

```text
16:44:40  ERROR  (node:10653) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
```

### エラーが発生、調査する

ぐぐってみると issue がありました。

- [Tapable.plugin is deprecated · Issue #185 · nuxt/create-nuxt-app](https://github.com/nuxt/create-nuxt-app/issues/185)

まさしくこれです。

適当に訳してみると↓とのこと。

> ・これは依存関係の警告
> ・依存関係の警告は何か動かなくなるということではない
> ・@nuxtjs/pwa モジュールが原因で、次のメジャーバージョンアップで解決する。マイナーバージョンアップをリリースすることはできない。
> ・beta 版があるから試してみて

@nuxtjs/pwa を beta 版にバージョンアップすればよさそうです。
(注：必要なければ pwa を切ればよいはず)

### エラーを解決する

次のコマンドで情報を見てみると、バージョン 3.0.0-beta.14 に latest タグが付いていました。

```zsh
$ yarn info @nuxtjs/pwa
```

`latest` を指定して @nuxtjs/pwa をインストールします。

```zsh
$ yarn add @nuxtjs/pwa@latest
```

再度、動かしてみると

```zsh
$ yarn run dev
```

エラーはなくなりました。

ブラウザから http://localhost:3000/ へアクセスしてみます。
<img width="320" alt="screenshot 2019-05-07 17.05.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341937/849051f2-657b-2b79-a7f3-8d15db9ad013.png">
Welcome ページが表示されました。

左上のメニューから Inspire ページに移動できます。
<img width="320" alt="screenshot 2019-05-07 17.06.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341937/23c7c021-80bf-6be3-faef-74c3f2992c4f.png">
<img width="320" alt="screenshot 2019-05-07 17.06.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341937/ace5c375-adb5-dc79-24b6-0e3cfbf5a1ab.png">

@nuxtjs/pwa をベータ版に更新したので、package.json, yarn.log が更新されています。
この時点で git にコミットしておくとよいでしょう。

## Hello World!

次のページを参考に進めました。

- http://seiritozakki.hatenablog.com/entry/nuxt-hello

ていうか、ソースは完全にコピーです（；^ω^）

### hello.vue を追加する

pages/hello.vue ファイルを追加し、以下のソースを記述します。

```vue
<template>
  <p>Hello {{ name }}!</p>
</template>

<script>
export default {
  data: () => {
    return { name: 'World' }
  }
}
</script>
```

動かして、http://localhost:3000/hello にアクセスしてみると
<img width="320" alt="screenshot 2019-05-08 12.27.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341937/a9d10702-f1c2-06ce-a53c-9464339d6715.png">
表示されました。

### メニューにリンクを追加する

左上のメニューにリンクを追加してみます。

layouts/default.vue にリンクらしきものが記述されていました。

script に記述さている配列 `items` に以下を追加します。

```vue
        {
          icon: 'thumb_up',
          title: 'Hello',
          to: '/hello'
        }
```

layouts/default.vue の差分

```zsh
$ git diff layouts/default.vue
diff --git a/layouts/default.vue b/layouts/default.vue
index a98563e..4704f5a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -79,6 +79,11 @@ export default {
           icon: 'bubble_chart',
           title: 'Inspire',
           to: '/inspire'
+        },
+        {
+          icon: 'thumb_up',
+          title: 'Hello',
+          to: '/hello'
         }
       ],
       miniVariant: false,
```

icon については以下のページを参照です。

- [Icon Component — Vuetify.js](https://vuetifyjs.com/ja/components/icons)
- [Icons - Material Design](https://material.io/tools/icons/)

リンクがメニューに表示されるようになりました。
<img width="320" alt="screenshot 2019-05-08 12.36.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341937/e0b9adb4-18ec-14c7-e726-279dfcdb8662.png">

## おわり

インストールからここまで、2時間くらい遊んだでしょうか。
結構楽しかったので、つい本をポチってしまいました。

- [Vue.js & Nuxt.js超入門 | 掌田津耶乃 |本 | 通販 | Amazon](https://www.amazon.co.jp/dp/4798056596/)

何か簡単なアプリを Nuxt で作ってみたいですね。
おわり。