Vue.jsの基本を知っている方向けに、Nuxt.jsフレームワークの概要を説明してみます。
本記事では、「ページの作成」および「パラメーター機能」、そして「コンポーネント」「layoutsによるカスタムレイアウト」について説明していきます。
Nuxt.js のバージョン
v2.8.1
Nuxt.jsを利用しない場合はこちら
Vue CLI 3 ではじめるVue RouterとVuex入門
インストール
公式ページに基づいてnpxでインストールします。「create-nuxt-app」という公式が用意しているテンプレートプロジェクトを利用し、今回は「nuxt-project」というプロジェクト(ディレクトリ名)を作成します。
1 |
$ npx create-nuxt-app nuxt-project |
プロジェクト生成の内容について本記事では下記のように選択しました。
1 2 3 4 5 6 7 8 9 10 11 |
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」は、何も選択していない状態です。
完了すると下記のように表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 |
🎉 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 |
生成されたディレクトリに入り、起動させます。
1 2 |
$ cd nuxt-project/ $ npm run dev |
プロジェクト概要
生成された内容を確認してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$ 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ファイルを作成してみて下さい。
下記構成であることを確認。
1 2 3 4 5 6 7 8 |
$ tree . ├── README.md ├── about.vue ├── books │ └── index.vue └── index.vue |
それぞれのファイルには下記のように記述しました。
pages/about.vue
1 2 3 4 5 |
<template> <div> <h1>aboutページ</h1> </div> </template> |
pages/books/index.vue
1 2 3 4 5 |
<template> <div> <h1>booksページ</h1> </div> </template> |
以上で下記URLにおいて、各ページが確認できます。
パラメーターについて
URLのパラメーター情報を取得することができます。
上述ではページの作成としてbooks/index.vueファイルを追加し、URLである books/で画面を確認しました。今度は、同じくbooksディレクトリ内に「_id.vue」という名前のファイルを追加し、下記のように記述して下さい。
pages/books/_id.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <div> <h1>idパラメータ取得</h1> <p>{{ id }}</p> </div> </template> <script> export default { data() { return { id: this.$route.params.id } } } </script> |
12 行目
例えば http://localhost:3000/books/123 にアクセスすると、「123」の文字列をパラメーターとして
1 2 3 4 |
├── books │ ├── _pass │ │ └── _id.vue │ └── index.vue |
_id.vue ファイルを下記のように編集すれば、http://localhost:3000/books/aiueo/123 でpassおよびidのパラメーターを取得することができます。
pages/books/_pass/_id.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
実際には受け取るパラメーターデータに対してバリデーションする必要がありますが、本記事では説明しません。
公式の参照ページ
コンポーネントについて
ページ自体の作成は「pages」ディレクトリにファイルを追加していきましたが、部品としてのコンポーネントを作成していくには、「components」ディレクトリにファイルを追加していきます。
すでにLogo.vueファイルが存在していますが、実際にこのコンポーネントは「pages/index.vue」のテンプレート内にて<logo />と記述することによって表示されているのが確認できます。
1 2 3 4 5 6 7 8 9 |
<template> <div class="container"> <div> <logo /> <h1 class="title"> nuxt-project </h1> 〜省略 |
このようにして、部品としてのコンポーネントを使いまわしていくことが可能となります。ページ単位、部品単位においてもそれぞれ<template>・<script>・<style>というように構成されていることからも分かるように、Vue.jsのコンポーネントによる構築ということがより深く認識できるでしょう。
後はこれらコンポーネント間において、「store」ディレクトリにおけるVuex機能を利用し、Nuxt.jsではどのようにデータをやり取りするのかを学ぶ必要がありますが、本記事では説明しません。
関連ページ
Vue.jsのコンポーネント入門[props][$emit]
layoutsによるカスタムレイアウト機能
「layouts」ディレクトリには、ページのレイアウト構成としての「雛形」を決めるファイルを保存していきます。
プロジェクト作成時には既に「default.vue」ファイルが存在し、下記のように記述されています。
1 2 3 4 5 6 7 |
<template> <div> <nuxt /> </div> </template> 〜省略 |
ページ単位としてのindex.vueや、追加したabout.vueなどのコンポーネントはすべて <nuxt /> 部分に組み込まれています。仮に下記のように <p>追加</p> を記述してみると、全画面に「追加」の文字が表示されるのが確認できます。
1 2 3 4 5 6 |
<template> <div> <p>追加</p> <nuxt /> </div> </template> |
具体的にカスタムレイアウトとしてのsample.vueファイルを追加し、作成したabout.vue画面に適用してみます。
layouts/sample.vue
1 2 3 4 5 6 |
<template> <div> <p>サンプルレイアウト</p> <nuxt /> </div> </template> |
次に「ページの作成」において追加したabout.vueファイル(about画面)に、このsample.vueとしてのカスタムレイアウトを適用させてみます。12行目のみ追記しています。
pages/about.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div> <logo/> <h1>aboutページ</h1> </div> </template> <script> import Logo from "~/components/Logo.vue"; export default { layout: 'sample', components: { Logo } }; </script> |
12行目
layoutオプションに sample という名前を指定することにより、カスタムレイアウトであるsample.vueが適用されます。about画面に「サンプルレイアウト」と表示されるのが確認できるはずです。
つまりlayoutオプションに何も指定しない場合は、デフォルトで「default.vue」が適用されているということになります。
公式の参照ページ
参照ページ