Meta 標籤

瞭解如何將 Nuxt 2 遷移到 Nuxt Bridge 新的 meta 標籤。

如果需要使用 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 提供了新的 Nuxt 3 meta API，可以透過新的 useHead 可組合函式訪問。

<script setup lang="ts">
useHead({
  title: 'My Nuxt App',
})
</script>
此 useHead 可組合函式底層使用 @unhead/vue （而不是 vue-meta）來操作您的 <head>。
我們建議除了 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 目錄中設定。

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