Nuxt.js入門 [$route.params][layouts]

Vue.jsの基本を知っている方向けに、Nuxt.jsフレームワークの概要を説明してみます。

本記事では、「ページの作成」および「パラメーター機能」、そして「コンポーネント」「layoutsによるカスタムレイアウト」について説明していきます。

Nuxt.js のバージョン

v2.8.1

Nuxt.jsを利用しない場合はこちら

インストール

公式ページに基づいてnpxでインストールします。「create-nuxt-app」という公式が用意しているテンプレートプロジェクトを利用し、今回は「nuxt-project」というプロジェクト（ディレクトリ名）を作成します。

$ npx create-nuxt-app nuxt-project

1	$ npx create-nuxt-app nuxt-project

プロジェクト生成の内容について本記事では下記のように選択しました。

project
? Project name nuxt-project
? Project description My impeccable Nuxt.js project
? Author name sample
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)

project

? Project name nuxt-project

? Project description My impeccable Nuxt.js project

? Author name sample

? Choose the package manager Npm

? Choose UI framework None

? Choose custom server framework None (Recommended)

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

? Choose test framework None

? Choose rendering mode Universal (SSR)

「Choose Nuxt.js modules」及び「Choose linting tools」は、何も選択していない状態です。

完了すると下記のように表示されます。

🎉  Successfully created project nuxt-project

  To get started:

	cd nuxt-project
	npm run dev

  To build & start for production:

	cd nuxt-project
	npm run build
	npm run start

🎉 Successfully created project nuxt-project

To get started:

cd nuxt-project

npm run dev

To build & start for production:

cd nuxt-project

npm run build

npm run start

生成されたディレクトリに入り、起動させます。

$ cd nuxt-project/
$ npm run dev

1 2	$ cd nuxt-project/ $ npm run dev

http://localhost:3000/

プロジェクト概要

生成された内容を確認してみます。

$ tree -L 1

.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── static
└── store

$ tree -L 1

├── README.md

├── assets

├── components

├── layouts

├── middleware

├── node_modules

├── nuxt.config.js

├── package-lock.json

├── package.json

├── pages

├── plugins

├── static

└── store

このディレクトリ構造については公式サイトがどこよりも詳しいですが、実際に実装して感触を得たら再度確認してみると良いでしょう。なお上記でマーカーが付いている部分は、本記事で説明する部分です。

store（16行目）については下記ページをご覧下さい。

Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]

ページの作成

ページの作成は、「pages」ディレクトリ内にファイルを追加するだけで可能です。つまり自動でルーティングされる仕組みとなっています。

pages内には既にindex.vueファイルが存在していますが、ここにabout.vueファイルと、更に「books」ディレクトリを作成してその中にindex.vueファイルを作成してみて下さい。

下記構成であることを確認。

$ tree

.
├── README.md
├── about.vue
├── books
│   └── index.vue
└── index.vue

$ tree

├── README.md

├── about.vue

├── books

│ └── index.vue

└── index.vue

それぞれのファイルには下記のように記述しました。

pages/about.vue

<template>
  <div>
    <h1>aboutページ</h1>
  </div>
</template>

<div>

<h1>aboutページ</h1>

</div>

</template>

pages/books/index.vue

<template>
  <div>
    <h1>booksページ</h1>
  </div>
</template>

<div>

<h1>booksページ</h1>

</div>

</template>

以上で下記URLにおいて、各ページが確認できます。

http://localhost:3000/about

http://localhost:3000/books

パラメーターについて

URLのパラメーター情報を取得することができます。

上述ではページの作成としてbooks/index.vueファイルを追加し、URLである books/で画面を確認しました。今度は、同じくbooksディレクトリ内に「_id.vue」という名前のファイルを追加し、下記のように記述して下さい。

pages/books/_id.vue

<template>
  <div>
    <h1>idパラメータ取得</h1>
    <p>{{ id }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id
    }
  }
}
</script>

<div>

<h1>idパラメータ取得</h1>

</div>

</template>

export default {

data() {

return {

id: this.$route.params.id

}

</script>

12 行目

例えば http://localhost:3000/books/123 にアクセスすると、「123」の文字列をパラメーターとして

this.$route.params で取得することができます。

このようにアンダースコアのプレフィックス（接頭辞）を付与することによって、そのパラメーターを取得できるようになります。ファイルだけではなくディレクトリ名にもプレフィックスを付与しパラメーターを取得することができます。

booksディレクトリ内に更に「_pass」ディレクトリを作成し、次のような構造にして下さい。

├── books
│   ├── _pass
│   │   └── _id.vue
│   └── index.vue

├── books

│ ├── _pass

│ │ └── _id.vue

│ └── index.vue

_id.vue ファイルを下記のように編集すれば、http://localhost:3000/books/aiueo/123 でpassおよびidのパラメーターを取得することができます。

pages/books/_pass/_id.vue

<template>
  <div>
    <h1>idとpassパラメータ取得</h1>
    <p>{{ id }}</p>
    <p>{{ pass }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      pass: this.$route.params.pass
    }
  }
}
</script>

<div>

<h1>idとpassパラメータ取得</h1>

</div>

</template>

export default {

data() {

return {

id: this.$route.params.id,

pass: this.$route.params.pass

}

</script>

実際には受け取るパラメーターデータに対してバリデーションする必要がありますが、本記事では説明しません。

公式の参照ページ

ルーティングのパラメータのバリデーション

コンポーネントについて

ページ自体の作成は「pages」ディレクトリにファイルを追加していきましたが、部品としてのコンポーネントを作成していくには、「components」ディレクトリにファイルを追加していきます。

すでにLogo.vueファイルが存在していますが、実際にこのコンポーネントは「pages/index.vue」のテンプレート内にて<logo />と記述することによって表示されているのが確認できます。

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        nuxt-project
      </h1>

〜省略

<div>

nuxt-project

</h1>

〜省略

このようにして、部品としてのコンポーネントを使いまわしていくことが可能となります。ページ単位、部品単位においてもそれぞれ<template>・<script>・<style>というように構成されていることからも分かるように、Vue.jsのコンポーネントによる構築ということがより深く認識できるでしょう。

後はこれらコンポーネント間において、「store」ディレクトリにおけるVuex機能を利用し、Nuxt.jsではどのようにデータをやり取りするのかを学ぶ必要がありますが、本記事では説明しません。

関連ページ

Vue.jsのコンポーネント入門[props][$emit]

layoutsによるカスタムレイアウト機能

「layouts」ディレクトリには、ページのレイアウト構成としての「雛形」を決めるファイルを保存していきます。

プロジェクト作成時には既に「default.vue」ファイルが存在し、下記のように記述されています。

<template>
  <div>
    <nuxt />
  </div>
</template>

〜省略

<div>

</div>

</template>

〜省略

ページ単位としてのindex.vueや、追加したabout.vueなどのコンポーネントはすべて <nuxt /> 部分に組み込まれています。仮に下記のように <p>追加</p> を記述してみると、全画面に「追加」の文字が表示されるのが確認できます。

<template>
  <div>
    <p>追加</p>
    <nuxt />
  </div>
</template>

<div>

</div>

</template>

具体的にカスタムレイアウトとしてのsample.vueファイルを追加し、作成したabout.vue画面に適用してみます。

layouts/sample.vue

<template>
  <div>
    <p>サンプルレイアウト</p>
    <nuxt />
  </div>
</template>

<div>

<p>サンプルレイアウト</p>

</div>

</template>

次に「ページの作成」において追加したabout.vueファイル（about画面）に、このsample.vueとしてのカスタムレイアウトを適用させてみます。12行目のみ追記しています。

pages/about.vue

<template>
  <div>
    <logo/>
    <h1>aboutページ</h1>
  </div>
</template>

<script>
import Logo from "~/components/Logo.vue";

export default {
  layout: 'sample',
  components: {
    Logo
  }
};
</script>