Nuxt.js@4 中管理 HTML ＜head＞ 标签

可以在 nuxt.config.ts 中配置全局的 HTML 标签，也可以在指定 index.vue 页面中配置指定的 HTML 标签。

在 nuxt.config.ts 中配置 HTML 标签

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1.0',
      title: 'nuxtjsFrameTest',
      meta: [
        { name: 'description', content: 'nuxtjsFrame' },
      ],
    },
  },
})

在指定 index.vue 中配置 HTML 标签

<script setup>

const route = useRoute();

useHead({
  title: '首页',
  meta: [
    { name: 'description', content: '首页' }
  ]
})

useSeoMeta({
title: () => `User ${route.params.id}`,
description: () => `用户 ${route.params.id} 页面`,
keywords: '首页'
})

</script>

在 Nuxt 3/4 中，要设置页面的标题和 SEO 元信息，需要用 useHead 或 useSeoMeta（推荐）在页面组件里声明；