How to dynamically update "title" and other meta tags?

[yakhyomus]

Vuejs 3 ("vue-meta": "^3.0.0-alpha.8")

On my vue page i'm trying update title like that:
data() { title: 'title' }, setup () { useMeta({ title: this.title }); }, created() { this.title = 'New title' }

ang get: Cannot read properties of undefined (reading 'title')

How i can fix that? Thank you!

[habib-it]

@yakhyomus
any luck?

[yakhyomus]

@yakhyomus any luck?

In vuejs you can't dynamically update meta tags, now i'm using vuejs 2

[habib-it]

@yakhyomus
yes brother i tried a way but it also didn't work but i found a solution with new package that is for vue 3
https://www.npmjs.com/package/@unhead/vue
https://github.com/unjs/unhead

to dynamic set meta tags we can work like this.

<script> import {fetchData} from "../../../store/api"; import {useHead} from "@unhead/vue"; import { ref } from 'vue' export default { name: "BlogsDetail", data() { return { blog_content:[], }; }, setup(){ const metaTitle = ref(''); const metaDescription = ref(''); const metaKeywords = ref(''); const canonical = ref(''); // Use the useHead hook to dynamically update the title and meta tags useHead({ title: metaTitle, meta: [ {name: 'description', content: metaDescription}, {name: 'keywords', content: metaKeywords}, ], link: [ { rel: 'canonical', href: canonical }, ], }); // expose to template and other options API hooks return { metaTitle,metaDescription,metaKeywords,canonical } }, components: { WidgetsBreadcrumbs }, computed: { settings(){ return useSettingsStore().getSettings } }, methods:{ async get_blog_detail(){ try { const resp = await fetchData('blog/'+this.$route.params.slug,'post'); if (resp.status) { this.blog_content= resp.data; this.metaTitle = resp.data.meta_title??resp.data.title; this.metaDescription = resp.data.meta_description??''; this.metaKeywords = resp.data.meta_keywords??''; this.canonical = resp.data.canonical??''; } else { this.$router.push({ name: 'Page404' }); } }catch (error){ this.$root.toaster.warning('Server Error') } }, }, created() { this.get_blog_detail(); }, } </script>