Nuxt (8) 網頁表頭設定

發表於 分類於
介紹如何設定表頭資料

全域設定

要全域設定網頁表頭資料，可以在 nuxt.config.ts 內設定。新增 app 屬性，並在 head 屬性內設定，設定會套用到每一頁上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
  app: {
    head: {
      title: "Nuxt Dojo", // 網頁標題
      meta: [{ name: "description", content: "Everything about Nuxt 3" }], // meta 標籤設定
      link: [
        {
          rel: "stylesheet",
          href: "https://fonts.googleapis.com/icon?family=Material+Icons", // 連接 google icon
        },
      ],
    },
  },
});

個別設定

若要個別頁面要設定不同 head 資料，可以這樣做:

  1. useHead: 設定內容會覆蓋全域設定。
1
2
3
4
5
6
7
8
9
useHead({
  title: "Nuxt Dojo Product",
  meta: [
    {
      name: "decription",
      content: "Nunt 3 Product",
    },
  ],
});
  1. 使用 Nuxt 內見表頭元件
1
2
3
4
5
6
7
8
9
<template>
  <div>
    <head>
      <title>{{ product.title }}</title>
      <meta name="description" :content="product.description" />
    </head>
    <ProductDetails :product="product" />
  </div>
</template>