ビュー

Views セクションでは、Nuxt.js アプリケーション（アプリテンプレート、レイアウト、ページ、およびHTMLヘッド）内の特定のルートのデータとビューを設定するために必要なことを全て説明しています。

nuxt-views-schema

アプリテンプレート

スクリプトまたは条件付きの CSS クラスを含めるために Nuxt.js で使われる HTML アプリテンプレートをカスタマイズできます。

テンプレートを変更するために、プロジェクトのルートフォルダに app.html ファイルを作成します。

Nuxt.js 使われるデフォルトのテンプレート:

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

カスタムアプリテンプレートを使用して、IE 用に条件付きの CSS クラスを追加するユースケースのひとつ:

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

レイアウト

Nuxt.js アプリの外観を変更したい場合、レイアウトは非常に役立ちます。サイドバーを含めるか、モバイルとデスクトップ用に異なるレイアウトを使用するかです。

デフォルトレイアウト

layouts/default.vue ファイルを追加することでメインレイアウトを拡張できます。メインレイアウトは、レイアウト指定がされていないすべてのページに使用されます。

情報: 実際にページコンポーネントが含まれるようにレイアウトを作成するときは、必ず <nuxt/> コンポーネントを入れておくことを覚えておいてください。

次にあるデフォルトのレイアウトはたった3行で、単純にページコンポーネントをレンダリングします:

<template>
  <nuxt/>
</template>

カスタムレイアウト

layouts ディレクトリのすべてのファイル（第一階層）は、ページコンポーネントの layout プロパティでアクセス可能なカスタムレイアウトを作成します。

ブログのレイアウトを作成して、それを layouts/blog.vue に書くとき例：

<template>
  <div>
    <div>ブログのナビゲーションバーをここに設置します</div>
    <nuxt/>
  </div>
</template>

それからページ (例えば pages/posts.vue ) で、カスタムレイアウトを使うことを伝えます:

<template>
<!-- テンプレート -->
</template>
<script>
export default {
  layout: 'blog'
  // ページコンポーネントの定義
}
</script>

layout プロパティについての詳細： layout プロパティ

デモ動画で、カスタムレイアウトの動作する様子を確認して見てください。

エラーページ

エラーページは ページコンポーネント で、エラーが発生したときに常に表示されます（サーバーサイドレンダリング中には発生しません）。

警告: このファイルは layouts フォルダに配置されていますが、ページとして扱う必要があります。

上記のように、このレイアウトは特別です。テンプレートの中に <nuxt/> を含めるべきではないからです。このレイアウトは、404 や 500 などのエラーが発生した際に表示されるコンポーネントとしてみる必要があります。他のページコンポーネントと同様に、エラーページのカスタムレイアウトも通常の方法で設定できます。

デフォルトのエラーページのソースコードは、GitHubから入手できます。

layouts/error.vue ファイルを追加することでエラーページをカスタマイズすることができます。:

<template>
 <div class="container">
    <h1 v-if="error.statusCode === 404">ページが見つかりません</h1>
    <h1 v-else>エラーが発生しました</h1>
    <nuxt-link to="/">ホーム</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // エラーページ用のカスタムレイアウトを指定できます
}
</script>

ページ

すべてのページコンポーネントは Vue コンポーネントですが、Nuxt.js にユニバーサルアプリケーション開発を可能な限り容易にするための特別な属性と機能が追加されています。

Vue School で Nuxt.js ページコンポーネントについての無料レッスンをみる

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
  asyncData (context) {
    // コンポーネントをロードする前に毎回呼び出されます
    // 名前の通り非同期にすることができます
    // また、返されたオブジェクトはデータオブジェクトとマージされます
    return { name: 'World' }
  },
  fetch () {
    // `fetch` メソッドはページの描画前にストアを満たすために使用されます
  },
  head () {
    // このページ向けにメタタグを設定します
  },
  // そしてもっと多くの機能を見つける
  ...
}
</script>

<style>
.red {
  color: red;
}
</style>

属性	説明	ドキュメント
`asyncData`	最も重要なキーです。非同期であり、コンテキストを引数として受け取ります。	非同期なデータ
`fetch`	ページをレンダリングする前にストアを満たすために使用されます。`data` メソッドに似ていますが、コンポーネントデータは設定しません。	`fetch` メソッド
`head`	現在のページに対して特定の `<meta>` タグを設定します。	`head` メソッド
`layout`	`layouts` ディレクトリに定義されているレイアウトを指定します。	`layout` プロパティ
`loading`	`false` に設定すると、ページへ遷移してきた際に `this.$nuxt.$loading.finish()` が呼び出されなくなり、ページから離れる際に `this.$nuxt.$loading.start()` が呼び出されなくなります。これによりローディングの振る舞いを手動で制御ができるようになります。この動作は、exampleから確認できます。`loading` は `nuxt.config.js` で設定されている場合のみ適用されます。	`loading` プロパティ
`transition`	ページの特定のトランジションを設定します。	`transition` プロパティ
`scrollToTop`	Boolean 型（デフォルト値：`false`）で、ページをレンダリングする前にページを一番上にスクロールするかどうかを指定します。これはネストされたルートに使用されます。	`scrollToTop` プロパティ
`validate`	動的なルーティングに対する検証関数です。	`validate` メソッド
`middleware`	このページのミドルウェアを設定します。ミドルウェアは、ページをレンダリングする前に呼び出されます。	ミドルウェア

ページプロパティの使用についてより多くの情報: ページに関するドキュメントをご覧ください。

HTML ヘッド

Nuxt.js は、document head とアプリケーションの meta attributes を更新するために vue-meta を使用しています。

Nuxt.js が使っている vue-meta は、GitHub で参照できます。

情報: Nuxt.js は、デフォルトの vmid キーの代わりに hid を使ってメタ要素を識別します。

デフォルトメタタグ

Nuxt.js では、nuxt.config.js 内にデフォルトの <meta> タグを全て定義することができます。head プロパティを使用し、デフォルトのメタタグを定義します:

カスタム Google フォントによるカスタム viewport の例:

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  ]
}

head で利用できるオプションの詳細については、メタ情報プロパティの認識を参照してください。

head メソッドに関するより多くの情報は、head プロパティを参照してください。

ページに対するカスタムメタタグ

head メソッドに関するより多くの情報: head メソッドを参照してください。

間違いを見つけた、またはドキュメントに貢献したいですか？ GitHub でこのページを編集する