デフォルトレイアウトページ（default.vue）
|
1 2 3 4 5 |
<template> <div> <nuxt/> </div> </template> |
<nuxt />
Nuxt.jsで定義されたコンポーネントで、レイアウトファイル内でのみページコンポーネントを表示するために使用します。
エラーページ（error.vue）
エラーページでは、「<nuxt />」を含めてはいけません。
エラーページの実装例としては下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div> <p v-if="error.statusCode === 404">ページが見つかりません</p> <p v-else> エラーです。</p> </div> </template> <script> export default{ props: ['error'] } </script> |
props
error.vueでは、propsとしてerrorを受け取ります。
| プロパティ | 説明 |
|---|---|
| message | エラーメッセージが入ります。 |
| path | エラーが発生したパスが入ります。 |
| statusCode | エラーコードが入ります。 |
ページごとのレイアウト
layoutプロパティにて、「default.vue」とは別に作成したレイアウトファイルを読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <p>テストです。</p> </div> </template> <script> export default{ layout: "レイアウトファイル名"(レイアウトファイル名.vueというレイアウトファイルを作ったのであれば。) } </script> |
例
layouts/titile.vueというファイルを作成します。
|
1 2 3 4 5 6 |
<template> <div> <header>タイトル</header> <Nuxt /> </div> </template> |
以下のように適用できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <p>テストです。</p> </div> </template> <script> export default{ layout: "title" } </script> |
レイアウトページ設計例
基本的に一般的なWebアプリケーションでは、レイアウトファイルは複数用意するのが当たり前です。（画面によってレイアウトが異なるため）
| ファイル名 | 設計 |
| login.vue | ログイン前のレイアウト |
| logout.vue | ログアウト後のレイアウト |
| default.vue | ログイン後のレイアウト |
一例ですがこのように分けてしまうと良いでしょう。ただ、昨今のSPA開発では認証機構だけはAuth0などのSaasを使うことも一般的になってきているのでログイン後のレイアウトだけを考えれば良いということが多いです。
この記事へのコメントはありません。