メタタグ
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 を meta に変更します。（オブジェクトには重複排除のための 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 と同時にネイティブのNuxt 2 head() プロパティを使用することは、競合する可能性があるためお勧めしません。このコンポーザブルの使用方法の詳細については、ドキュメントを参照してください。
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 ディレクトリ内で設定することをお勧めします。
layouts/default.vue
<script setup lang="ts">
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>