API: head メソッド

Nuxt.js はアプリケーションの headers 及び html attributes を更新するために vue-meta を使います。

  • 型: Object または Function

現在のページの HTML の head タグを設定するために head メソッドを使います。

コンポーネントのデータは head メソッド内で this を使って利用できます。ページのデータを使って独自のメタタグを設定することもできます。Nuxt FAQ も必ずご覧ください。

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello World!'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        // `hid` は一意の識別子として使用されます。 `vmid` は動作しないので使わないでください。
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
}
</script>

情報: 子コンポーネント利用されたときにメタ情報が重複してしまうことを避けるために hid キーを使ってユニーク識別子を meta 要素に設定してください。 詳しくは こちら を参照してください。

fetch key

Contributors

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

Platinum Sponsors

Storyblok
Support Us