Want to take a look at our new docs? Our new docs are now in beta. Have fun!

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 要素に設定してください。 詳しくは こちら を参照してください。

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us