Meta 標籤
管理您的 meta 標籤，從 Nuxt 2 到 Nuxt 3。
Nuxt 3 提供了幾種不同的方式來管理您的 meta 標籤
- 透過您的
nuxt.config。 - 透過
useHeadcomposable - 透過全域 meta 元件
您可以自訂 title、titleTemplate、base、script、noscript、style、meta、link、htmlAttrs 和 bodyAttrs。
Nuxt 目前使用
vueuse/head 來管理您的 meta 標籤，但實作細節可能會變更。遷移
- 在您的
nuxt.config中，將head重新命名為meta。 考慮將此共用的 meta 設定移動到您的app.vue中。（請注意，物件不再具有用於重複資料刪除的hid鍵。） - 如果您需要使用
head存取元件狀態，您應該遷移至使用useHead。 您也可以考慮使用內建的 meta 元件。 - 如果您需要使用 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>
Meta 元件
Nuxt 3 也提供 meta 元件，您可以使用這些元件來完成相同的任務。 雖然這些元件看起來很像 HTML 標籤，但它們是由 Nuxt 提供，並且具有類似的功能。
<script>
export default {
head () {
return {
title: 'My App',
meta: [{
hid: 'description',
name: 'description',
content: 'My App Description'
}]
}
}
}
</script>
- 請確保這些元件名稱使用大寫字母，以區分它們與原生 HTML 元素（
<Title>而不是<title>）。 - 您可以將這些元件放置在您頁面的範本中的任何位置。
選項 API
Nuxt 3 (選項 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>