Dynamic title in composition API

[idesignzone]

I am trying to get a dynamic title for useMeta with composition API but it does not work.

<script setup>
import { computed } from 'vue'
import { POST } from '@/constants/blog'
import { useQuery, useResult } from "@vue/apollo-composable";
import { useRoute } from 'vue-router'
import { useMeta } from "vue-meta";

  const route = useRoute();
  const variables = computed(() => ({
    slug: route.params.slug,
  }));
  const { result, loading, error } = useQuery(
    POST, variables
  );
  const post = useResult(result, null, data => data.post.data );
  const metaTitle = computed(() => ({
    title: post.attributes.title,
  }));
  useMeta(metaTitle);
  
</script>

Here is the response

{
  "data": {
    "post": {
      "data": {
        "id": 4,
        "attributes": {
          "title": "This is the post title"
        }
      }
    }
  }
}

Please help me understand what is wrong here!

[vlad-grybennikov]

I am trying to get a dynamic title for useMeta with composition API but it does not work.

<script setup>
import { computed } from 'vue'
import { POST } from '@/constants/blog'
import { useQuery, useResult } from "@vue/apollo-composable";
import { useRoute } from 'vue-router'
import { useMeta } from "vue-meta";

  const route = useRoute();
  const variables = computed(() => ({
    slug: route.params.slug,
  }));
  const { result, loading, error } = useQuery(
    POST, variables
  );
  const post = useResult(result, null, data => data.post.data );
  const metaTitle = computed(() => ({
    title: post.attributes.title,
  }));
  useMeta(metaTitle);
  
</script>

Here is the response

{
  "data": {
    "post": {
      "data": {
        "id": 4,
        "attributes": {
          "title": "This is the post title"
        }
      }
    }
  }
}

Please help me understand what is wrong here!

You should use the correct computed for this case. Try to add data here

const metaTitle = computed(() => ({
    title: post.data.attributes.title,
}));