ビュー

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/> を含めるべきではないからです。 このレイアウトは、404500 などのエラーが発生した際に表示されるコンポーネントとしてみる必要があります。 他のページコンポーネントと同様に、エラーページのカスタムレイアウトも通常の方法で設定できます。

デフォルトのエラーページのソースコードは、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 にユニバーサルアプリケーション開発を可能な限り容易にするための特別な属性と機能が追加されています。

<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から確認できます。loadingnuxt.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 メソッドを参照してください。

Platinum Sponsors

Storyblok Support Us