Nuxt Components

Nuxt.js にはアプリケーションの構築に役立つ、いくつかの重要なコンポーネントが付属しています。それらのコンポーネントはグローバルに利用可能です。つまりそれらを使うために都度インポートする必要がないということです。

この章では、それぞれの付属コンポーネントについて説明します。

Nuxt コンポーネント

<Nuxt> コンポーネントはページコンポーネントを表示するために使います。基本的にこのコンポーネントは、表示されているページに応じてページコンポーネントの中にあるものに置き換えられます。したがってレイアウトに <Nuxt> コンポーネントを追加することが重要です。

layouts/default.vue
<template>
  <div>
    <div>ナビゲーションバー</div>
    <Nuxt />
    <div>フッター</div>
  </div>
</template>

<Nuxt> コンポーネントは レイアウト 内でのみ使うことができます。

<Nuxt> コンポーネントは nuxt-child-key prop を受け取ることができます。この prop は <RouterView> に渡され、動的なページ内でトランジションが正しく動作するようになります。

<RouterView>key prop を操作する方法は 2 つあります。

  1. <Nuxt> コンポーネントの nuxtChildKey prop を使用する
layouts/default.vue
<template>
  <div>
    <Nuxt :nuxt-child-key="someKey" />
  </div>
</template>
  1. ページコンポーネントの key オプションに stringfunction を追加する
export default {
  key(route) {
    return route.fullPath
  }
}

NuxtChild コンポーネント

このコンポーネントはネストされたルート内で子コンポーネントを表示するために使われます。

例:

-| pages/
---| parent/
------| child.vue
---| parent.vue

このファイルの木構造から次のルーティングが生成されます:

;[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

child.vue コンポーネントを表示するためには、pages/parent.vue 内に <NuxtChild> コンポーネントを挿入する必要があります:

pages/parent.vue
<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtChild :foobar="123" />
  </div>
</template>

keep-alive

<Nuxt> コンポーネントと <NuxtChild/> コンポーネントは、keep-alivekeep-alive-props を受け入れます。

keep-alive と keep-alive-props についてより詳しく知るためには vue のドキュメント を参照してください

layouts/default.vue
<template>
  <div>
    <Nuxt keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- このように変換されます -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>
pages/parent.vue
<template>
  <div>
    <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- このように変換されます -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>

<NuxtChild> コンポーネントは通常の Vue コンポーネントのようなプロパティを受け取ることもできます。

<template>
  <div>
    <NuxtChild :key="$route.params.id" />
  </div>
</template>

実際の例を見たいときは、ネストされたルートの例 を参照してください。

アプリケーションでページ間を遷移するためには、<NuxtLink> コンポーネントを使うべきです。このコンポーネントは Nuxt.js に含まれているので、他のコンポーネントのようにインポートする必要はありません。これは HTML の <a> タグと似ていますが、href="/about" の代わりに to="/about" を使います。もし以前 vue-router を使ったことがあるなら、<RouterLink> の代わりが <NuxtLink> だと考えることができます。

pages フォルダの index.vue へのシンプルなリンク:

<template>
  <NuxtLink to="/">ホームページ</NuxtLink>
</template>

<NuxtLink> コンポーネントはすべての内部リンクで使用されるべきです。つまり、サイト内のページへのすべてのリンクは <NuxtLink> を使ってください。<a> タグはすべての外部リンクで使用されるべきです。つまり、他のウェブサイトへのリンクがある場合、それらには <a> タグを使ってください。

<template>
  <div>
    <h1>ホームページ</h1>
    <NuxtLink to="/about"
      >このサイトについて (Nuxt アプリケーションの内部リンク)</NuxtLink
    >
    <a href="https://nuxtjs.org">別のページへの外部リンク</a>
  </div>
</template>

<RouterLink> についてより詳しく知りたい場合は、Vue Router のドキュメントを参照してください。

<NuxtLink>スマートプリフェッチの機能も持ちます。

Nuxt.js はスマートプリフェッチの機能を持ちます。viewport 内やスクロール時にリンクが表示されたことを検知し、それらのページの JavaScript をプリフェッチしてユーザーがリンクをクリックするのを待ちます。Nuxt.js はブラウザがビジーではないときにのみリソースを読み込み、接続がオフラインのときや 2g の接続しかない場合はプリフェッチをスキップします。

特定のリンクでプリフェッチを無効にする

多くの JavaScript がある場合や、プリフェッチされる異なるページが多くある場合、サードパーティ製のスクリプトをたくさん読み込む場合には、いくつかのリンクのプリフェッチを無効にしたいでしょう。特定のリンクでプリフェッチを無効にするには、no-prefetch prop を使ってください。Nuxt.js v2.10.0 からは prefetch prop を false に設定することもできます。

<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>

グローバルでプリフェッチを無効にする

すべてのリンクでプリフェッチを無効にするには、prefetchLinksfalse に設定します:

nuxt.config.js
export default {
  router: {
    prefetchLinks: false
  }
}

Nuxt.js v2.10.0 からは、prefetchLinksfalse に設定した上で特定のリンクでプリフェッチを行いたい場合、prefetch prop を使うことができます:

<NuxtLink to="/about" prefetch>About page pre-fetched</NuxtLink>

linkActiveClass

linkActiveClass は、アクティブなリンクのための vue-router の CSS クラスと同じように機能します。どのリンクがアクティブかを表示したい場合は、nuxt-link-active クラスを持つ css を作成することで実現できます。

.nuxt-link-active {
  color: red;
}

この css は、ナビゲーションコンポーネント、適用したい特定のページ、レイアウトコンポーネント、main.css ファイルのいずれかに追加できます。

クラス名を別のものに変更したい場合は、nuxt.config.js ファイルで router プロパティの linkActiveClass を修正してください。

export default {
  router: {
    linkActiveClass: 'my-custom-active-link'
  }
}

このオプションは vue-router の linkActiveClass に直接付与されます。より詳しい情報は vue-router のドキュメントを参照してください。

linkExactActiveClass

linkExactActiveClass は、正確なアクティブなリンクのための vue-router の CSS クラスと同じように機能します。どのリンクがアクティブか完全に一致させて表示したい場合は、nuxt-link-exact-active クラスを css に追加することで実現できます。

.nuxt-link-exact-active {
  color: green;
}

この css は、ナビゲーションコンポーネント、適用したい特定のページ、レイアウトコンポーネント、main.css ファイルのいずれかに追加できます。

クラス名を別のものに変更したい場合は、nuxt.config.js ファイルで router プロパティの linkExactActiveClass を修正してください。

nuxt.config.js
export default {
  router: {
    linkExactActiveClass: 'my-custom-exact-active-link'
  }
}

このオプションは vue-router の linkExactActiveClass に直接付与されます。より詳しい情報は vue-router のドキュメントを参照してください。

linkPrefetchedClass

プリフェッチしたリンクすべてにスタイルを追加することができます。これはデフォルトの挙動を変更した後に、どのリンクでプリフェッチが行われているかをテストする際に役立ちます。linkPrefetchedClass はデフォルトでは無効になっています。有効にしたい場合、 nuxt.config.js ファイルの router プロパティに linkPrefetchedClass を追加する必要があります。

nuxt.config.js
export default {
  router: {
    linkPrefetchedClass: 'nuxt-link-prefetched'
  }
}

指定したクラスにスタイルを追加することができます。

.nuxt-link-prefetched {
  color: orangeRed;
}

この例では nuxt-link-prefetched というクラス名を使用しましたが、好きな名前を使用することができます。

client-only コンポーネント

このコンポーネントは、意図的にクライアントサイドでのみコンポーネントをレンダリングするために使用されます。クライアントサイドでのみコンポーネントをインポートするには、client-side only プラグインに登録します。

pages/example.vue
<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- このコンポーネントは、クライアントサイドでのみレンダリングされます -->
      <comments />
    </client-only>
  </div>
</template>

<client-only /> がクライアントサイドにマウントされるまで、プレースホルダーとしてスロットを使用します。

pages/example.vue
<template>
  <div>
    <sidebar />
    <client-only>
      <!-- このコンポーネントは、クライアントサイドでのみレンダリングされます -->
      <comments />

      <!-- サーバーサイドでレンダリングされた ローディングインジケーター -->
      <comments-placeholder slot="placeholder" />
    </client-only>
  </div>
</template>

Nuxt のバージョンが v2.9.0 未満の場合、<client-only> のかわりに <no-ssr> を使用してください。

Contributors

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