nuxt3中head配置全局以及在子页面可加后缀

全局配置

在nuxt.config.ts页面进行配置

export default defineNuxtConfig({
  app:{
    head:{
      title:'head全局配置',
      meta:[
        {name:'keywords',content:'nuxt练习'},
        {name:'description',content:'nuxt3练习'}
      ]
    }
  }
})

head后面加后缀

如果子页面中设置了head则加一个后缀，否则直接为app.vue主页面head设置

app.vue

<template>
  <div>
    <h1>根目录</h1>
    <nuxt-page/>
  </div>
</template>
<script setup>
useHead({
  titleTemplate:(suffix) =>{
    return suffix ? `${suffix} - nuxt练习` : 'nuxt练习'
  }
})
</script>

index.vue

<template>
  <div>
  </div>
</template>
<script setup>
useHead({
  title:'首页'
})
</script>