ページディレクトリ

pages ディレクトリには、アプリケーションのビューとルートが格納されています。Nuxt はこのディレクトリ内のすべての .vue ファイルを読み込んで、ルーターの設定を自動的に作成します。

すべてのページコンポーネントは Vue コンポーネントですが、Nuxt は特殊な属性や機能を追加し、ユニバーサルアプリケーションの開発をできるだけ簡単にします。

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
  export default {
    // ページプロパティはここに
  }
</script>

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

動的なページ

動的なページは、API からの出力でページ名がわからない場合や、同じページを何度も作成したくないときに作成できます。動的なページを作成するには、.vue ファイル名の前にアンダースコアを追加します。ディレクトリを動的にしたい場合はディレクトリ名の前にアンダースコアを追加します。ファイル名やディレクトリ名は自由に指定できますが、名前の前にアンダースコアを付ける必要があります。

例えば、ページフォルダ内に _slug.vue というファイルがある場合、context の params.slug で値にアクセスできます。

<template>
  <h1>{{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // "/abc" パスにアクセスすると、slug は "abc" になります。
      return { slug }
    }
  }
</script>

/_book フォルダ内に /_slug.vue ファイルを作成した場合は、context の params.slug および params.book で値にアクセスできます。

<template>
  <h1>{{ this.book }} / {{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const book = params.book
      const slug = params.slug
      return { book, slug }
    }
  }
</script>

プロパティ

asyncData

asyncData はコンポーネントをロードする前に毎回呼び出されます。これは非同期にすることができ、引数として context を受け取ります。asyncData の結果は data とマージされます。

export default {
  asyncData(context) {
    return { name: 'World' }
  }
}

fetch

非同期データの取得には fetch が使えます。fetch はサーバーサイドではルートをレンダリングするときに呼び出され、クライアントサイドでは遷移するときに呼び出されます。

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    async fetch() {
      this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res =>
        res.json()
      )
    }
  }
</script>

head

現在のページに特定の

export default {
  head() {
    // このページの meta タグを設定する
  }
}

layout

layouts ディレクトリで定義されているレイアウトを指定します。

export default {
  layout: 'blog'
}

loading

loading を false に設定すると、ページに入るときに this.$nuxt.$loading.finish() が自動的に呼び出されるのを防ぎ、ページを離れるときに this.$nuxt.$loading.start() が自動的に呼び出されるのを防ぎます。

export default {
  loading: false
}

transition

このページにカスタムトランジションを設定します。

export default {
  transition: 'fade'
}

scrollToTop

scrollToTop は、ページをレンダリングする前に Nuxt に一番上にスクロールするように指示できます。 デフォルトでは別ページに移動すると一番上にスクロールしますが、子ルートの場合はスクロール位置を維持します。 子ルートをレンダリングする際に Nuxt に一番上までスクロールするように指示したい場合は、scrollToTop を true に設定します。

export default {
  scrollToTop: true
}

逆に、親ルートでも scrollToTop を手動で false に設定することができます。

スクロールについて Nuxt のデフォルトの挙動を上書きしたいときは、scrollBehavior オプション を参照してください。

middleware

このページのためのミドルウェアを定義します。このミドルウェアは、ページをレンダリングする前に呼び出されます。

export default {
  middleware: 'auth'
}

watchQuery

watchQuery キーを設定し、監視するクエリ文字列を設定します。定義した文字列が変更されると、すべてのコンポーネントメソッド（asyncData、fetch、validate、layout、...）が呼ばれます。パフォーマンス向上のため、監視はデフォルトで無効になっています。

export default {
  watchQuery: ['page']
}

export default {
  watchQuery: true
}

より洗練された監視のために、watchQuery(newQuery, oldQuery) 関数を使用することもできます。

export default {
  watchQuery(newQuery, oldQuery) {
    // 古いクエリ文字列に `bar` が含まれ、新しいクエリ文字列に `foo` が含まれている場合のみ、
    // コンポーネントメソッドを実行します
    return newQuery.foo && oldQuery.bar
  }
}

key

テンプレート内の Vue コンポーネントで仮想 DOM のヒントとして使用できる key プロパティと同様に、このプロパティでは、（親コンポーネントではなく）ページ自体からキー値を定義することができます。

Nuxt のデフォルトでは、この値は $route.path になります。つまり、別のルートに移動すると、クリーンなページコンポーネントが作成されることになります。論理的には以下と同等です：

<router-view :key="$route.path" />

このプロパティは、String または Function で、ルートを第一引数として受け取ります。

ページを無視する

ページを無視したい場合は、ファイルの先頭に - を付けると router.js ファイルに含まれなくなります。

例えば、pages/-about.vue は無視されます。

設定

dir.pages オプションを設定すると、pages/ ディレクトリの名前を別の名前に変更できます：

export default {
  dir: {
    // `pages` ディレクトリの名前を `routes` に変更します。
    pages: 'routes'
  }
}