有没有办法在 nuxt 3 中动态设置元标记？

Question

我正在尝试使用来自 api 的动态数据填充页面标题和元标记，以实现 seo 目的。但无法在查看页面源中获取它

我尝试过具有反应性属性的 useHead、useSeoMeta 和 useServerSeoMeta 。但所有这些函数都是在获取 api 响应之前调用的。有没有办法在查看源页面中获取动态元数据？

Answer 1

useSeoMeta对我有用。请注意，值必须是函数。

<script setup>

const id = route.params.id;
const { data: product } = await useAsyncData(id, () => 
  apiStore.GET_PRODUCT(id),
);

...

useSeoMeta({
  title: () => product.value?.name,
  description: () => product.value?.short_description,
  ogTitle: () => product.value?.name,
  ogDescription: () => product.value?.short_description,
  // and other stuff
});

<script>