3

I am trying to create a site using data fetched from a directus instance.

Currently I have a layout component app.vue filling all seo meta tags using static default values hardcoded in that file.

So in the setup I am using:

useSeoMeta({
  title: () => "Static title"
})

which is not creating the desired output. No title is rendered.

Also for a post component I want to overwrite the values from layout using data fetched from a remote source:

const { data: post, pending } = await useAsyncData('post', () => {
  return getItemById({
    collection: "collection_id",
    filter: {
      status: "published"
    },
    id: route.params.id,
  }).then((data) => {
      let ast = Markdoc.parse(data.content);
      let transform = Markdoc.transform(ast);
      data.content = Markdoc.renderers.html(transform);
    
      useSeoMeta({
        title: data.seo_title,      
      });

      return data;
  });
});

This is also not working as expected and serves different result, depending weather ssr is applied or not.

How would one implement a solution like this?

kissu
  • 40,416
  • 14
  • 65
  • 133
Felix D.
  • 4,811
  • 8
  • 38
  • 72

1 Answers1

0

I had this problem and I found out best way to define SEO tags with ssr data is using Nuxt built-in components.

<template>
 <div>
  <Title>{{data.seo_title}}</Title>
 </div>
</template>
<script setup>
const route = useRoute()
const { data, pending } = await useAsyncData('post', () => {
  return getItemById({
    collection: "collection_id",
    filter: {
      status: "published"
    },
    id: route.params.id,
  })
});
</script>
Farid
  • 170
  • 1
  • 6