在 Nuxt 3 中获取计算出的标题

Question

Nuxt 配置定义了默认值title和titleTemplate.
我想从 Nuxt 页面访问计算出的标题。

配置如下：

export default defineNuxtConfig({
  app: {
    head: {
      title: "Default title",
      titleTemplate: "%s - Company"
    }
  }
})

在页面中，我想定义页面标题如下：

useHead({
  title: "Page title"
})

就在从标题模板访问计算出的标题之后，在本例中它将是Page title - Company。

我想用这个值来定义og:title元标记。

您知道如何实现此目标或使用插件可能的解决方法吗？

目标不是仅仅为了定义元标记而重复一些事情。

Answer 1

我今天遇到了同样的情况，以防万一有人需要这个。

要实现此目的，请使用titleTemplate元对象。这将允许您动态自定义各个页面上的页面标题。

例子，

app.vue

<script setup>
useHead( {
  titleTemplate: ( titleChunk ) => {
    return titleChunk ? `${ titleChunk } - My Example App` : 'My Example App'
  }
} )
</script>

~/pages/about.vue

<script lang="ts" setup>
useHead({
    title: 'About',
})
</script>
<template>
    <div>
        <h1>About</h1>
    </div>
</template>
<style scoped lang="css"></style>

关于页面的元标题设置为“关于”。但是，如果您查看“关于”页面，显示的元标题是About - My Example App。那是因为我们将其设置在app.vue. 但如果useHead页面中未指定可组合项，则标题将为My Example App。

动态元标题

您还可以动态填充元标题。

例子，

页面标题必须来自 API。

~/server/api/articles.get.ts

export default defineEventHandler((event) => {
    return 'Article API'
})

在页面示例中

<script lang="ts" setup>
const { data } = await useFetch('/api/articles')
useHead({
    title: data.value
})
</script>
<template>
    <main>
        <h1>{{ data }}</h1>
    </main>
</template>