メタタグ
Nuxt 2からNuxt 3へのメタタグの管理
Nuxt 3では、メタタグを管理するいくつかの方法があります。
nuxt.configを使用する方法。useHeadコンポーザブルを使用する方法- グローバルメタコンポーネントを使用する方法
title、titleTemplate、base、script、noscript、style、meta、link、htmlAttrs、bodyAttrs をカスタマイズできます。
Nuxtは現在、メタタグの管理に
vueuse/headを使用していますが、実装の詳細は変更される可能性があります。移行
nuxt.configで、headをmetaに変更します。この共有メタ設定をapp.vueに移動することを検討してください。(オブジェクトには重複排除のためのhidキーがなくなりました。)headでコンポーネントの状態にアクセスする必要がある場合は、useHeadを使用するように移行する必要があります。組み込みのメタコンポーネントの使用も検討してください。- Options APIを使用する必要がある場合は、
defineNuxtComponentを使用するときに使用できるhead()メソッドがあります。
useHead
<script>
export default {
data: () => ({
title: 'My App',
description: 'My App Description'
})
head () {
return {
title: this.title,
meta: [{
hid: 'description',
name: 'description',
content: this.description
}]
}
}
}
</script>
メタコンポーネント
Nuxt 3は、同じタスクを実行するために使用できるメタコンポーネントも提供しています。これらのコンポーネントはHTMLタグに似ていますが、Nuxtによって提供され、同様の機能を備えています。
<script>
export default {
head () {
return {
title: 'My App',
meta: [{
hid: 'description',
name: 'description',
content: 'My App Description'
}]
}
}
}
</script>
- ネイティブHTML要素と区別するために、これらのコンポーネント名には大文字を使用してください(
<title>ではなく<Title>)。 - これらのコンポーネントは、ページのテンプレート内のどこにでも配置できます。
Options API
Nuxt 3 (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>