Dynamic title in Vue3 with vue-meta composition API

Question

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!

Answer 1

Maybe It's too late to answer this question. This module is for vue2. After many searches, I found version 3 of this module, But It's at the alpha stage, now.

I found an alternative solution that doesn't need any dependency.

Create a new file somewhere in your project directory(utils.js) and put the below code in it:

const changeMetaTags = (meta) => {
  document.title = `${meta.title} - YOUR PROJECT NAME`;
  // document.querySelector('meta[name="og:title"]').setAttribute("content", meta['og:title']);
  // document.querySelector('meta[name="description"]').setAttribute("content", meta.description);
  // document.querySelector('meta[name="og:description"]').setAttribute("content", meta['og:description']);
  // document.querySelector('meta[name="keywords"]').setAttribute("content", meta.keywords);
}




export { changeMetaTags }

Caution: You have to have the above code on your index.html file.

and for your use case just import it and use:

<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";

import { changeMetaTags } from "@/infrastructures/seo/utils"; // <----- this

  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,
  }));
  changeMetaTags(metaTitle.value); // <---- this
  
</script>

I use it in the router file (router/index.js) as well

const router = createRouter({

  routes: [
    {
      path: "/",
      component: () => import("@/layouts/MainLayout.vue"),
      children: [
        {
          path: "",
          name: "Home",
          meta: { // <-------- add this
            title: "Home",
            description:
              "your description",
            "og:title": `YOUR PROJECT NAME home page`,
            "og:description":
              "og description",
            keywords:
              `your, keywords`,
          },
          component: () => import("@/views/HomeView.vue"),
        },
     ...
     ]
})

router.beforeEach((to, from) => {
  changeMetaTags(to.meta); // <----- and this
  ...
})