pages

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

.js ファイルや .ts ファイルを使ってルートを作成できます。

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

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

<script>
  export default {
    // page properties go here
  }
</script>

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

動的なページ

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

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

pages/_slug.vue
<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 ファイルを作成した場合は、contextparams.slug および params.book で値にアクセスできます。

pages/_book/_slug.vue
<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 とマージされます。

pages/index.vue
export default {
  asyncData(context) {
    return { name: 'World' }
  }
}

asyncData の詳細はデータの取得ページを参照してください。

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>

fetch の詳細はデータの取得ページを参照してください。

head メソッド

現在のページに特定の <meta> タグを設定します。Nuxt.js は vue-meta を使用してアプリケーションのドキュメントヘッドとメタ属性を更新します。

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

詳細はメタタグと SEO ページを参照してください。

layout プロパティ

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

pages/index.vue
export default {
  layout: 'blog'
}

レイアウトの詳細はレイアウトのドキュメントを参照してください。

loading プロパティ

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

pages/index.vue
export default {
  loading: false
}

nuxt.config.js で loading が設定されている場合のみ適用されます。

詳細はローディングページを参照してください。

transition プロパティ

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

pages/index.vue
export default {
  transition: 'fade'
}

詳細はトランジションページを参照してください。

scrollToTop プロパティ

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

pages/index.vue
export default {
  scrollToTop: true
}

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

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

middleware プロパティ

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

pages/index.vue
export default {
  middleware: 'auth'
}

詳細はミドルウェアを参照してください。

watchQuery プロパティ

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

pages/index.vue
export default {
  watchQuery: ['page']
}

すべてのクエリ文字列に対して監視を設定したい場合は、watchQuery: true を設定してください。

pages/index.vue
export default {
  watchQuery: true
}

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

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

詳細はデータの取得ページを参照してください。

ページを無視する

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

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

詳細はignore オプションページを参照してください。

設定

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

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

詳細は dir オプションページを参照してください。

Contributors

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