You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

翻訳されたページ このページのコンテンツは古い可能性があります。
原文を読む このページの翻訳を改善する

Head メソッド

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

  • 型: Object または Function

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

<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 キーを使って一意の識別子を設定します（詳細はこちら ）。