メタタグ

Nuxt 2 から Nuxt Bridge の新しいメタタグへの移行方法を学びましょう。

head でコンポーネントの状態にアクセスする必要がある場合は、useHead の使用に移行する必要があります。

Options API を使用する必要がある場合、defineNuxtComponent を使用する際に利用できる head() メソッドがあります。

移行

bridge.meta を設定する

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    meta: true,
    nitro: false, // If migration to Nitro is complete, set to true
  },
})

head プロパティを更新する

nuxt.config で、head を app.head に名前変更します。(オブジェクトは重複排除のための hid キーを持たなくなりました。)

export default {
  head: {
    titleTemplate: '%s - Nuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' },
    ],
  },
}

useHead コンポーザブル

Nuxt Bridge は、新しい useHead コンポーザブルでアクセスできる新しい Nuxt 3 メタ API を提供します。

<script setup lang="ts">
useHead({
  title: 'My Nuxt App',
})
</script>
この useHead コンポーザブルは、<head> を操作するために ( vue-meta ではなく) 内部で @unhead/vue を使用しています。
ネイティブな Nuxt 2 の head() プロパティは、useHead と競合する可能性があるため、併用しないことをお勧めします。

このコンポーザブルの使用方法の詳細については、ドキュメントを参照してください。

Options API

<script>
// if using options API `head` method you must use `defineNuxtComponent`
export default defineNuxtComponent({
  head (nuxtApp) {
    // `head` receives the nuxt app but cannot access the component instance
    return {
      meta: [{
        name: 'description',
        content: 'This is my page description.',
      }],
    }
  },
})
</script>
互換性のない変更の可能性: head は Nuxt アプリを受け取りますが、コンポーネントインスタンスにはアクセスできません。head 内のコードが this または this.$data を通してデータオブジェクトにアクセスしようとする場合、useHead コンポーザブルに移行する必要があります。

タイトルテンプレート

関数 (完全な制御のため) を使用したい場合は、これは nuxt.config で設定できません。代わりに /layouts ディレクトリ内で設定することをお勧めします。

app/layouts/default.vue
<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'
  },
})
</script>