diff --git a/app/package.json b/app/package.json
index e61a9229eefaaaf16014727db00887a3328b6183..019d1004a6c33744bf0385d0c74833428de44a5a 100644
--- a/app/package.json
+++ b/app/package.json
@@ -30,7 +30,7 @@
     "vue": "^3.3.1",
     "vue-i18n": "^9.2.0-beta.15",
     "vue-json-viewer": "^3.0.4",
-    "vue-meta": "^3.0.0-alpha.9",
+    "vue-meta": "^3.0.0-alpha.10",
     "vue-router": "^4.0.12",
     "vue3-clipboard": "^1.0.0",
     "vue3-confirm-dialog": "^0.1.1",
diff --git a/app/src/App.vue b/app/src/App.vue
index 0253c2be5c664e10d0886456b704086da4cc0afa..5aff8a3563e922a9ea51e40dd28a7aef7981614b 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,5 +1,8 @@
 <template>
 	<div id="app">
+		<metainfo>
+			<template v-slot:title="{ content }">{{ content ? `${content}` : "" }}</template>
+		</metainfo>
 		<div v-if="mainStore.isPageBlocked" class="absolute	top-0 right-0 left-0 bottom-0 bg-white opacity-80 z-50 flex items-center justify-center">
 			<div class="bg-gray-200 w-full min-h-screen flex justify-center items-center">
 				<div class="flex min-h-screen w-full items-center justify-center bg-gray-200">
@@ -21,7 +24,6 @@
 </template>
 
 <script>
-	import { useMeta } from "vue-meta"
 	import Footer from "./components/common/Footer.vue"
 	import { main } from './store/index'
 
@@ -31,25 +33,19 @@
 			Footer,
 		},
 		data() {
-			return {}
-		},
-		setup() {
-			useMeta({
-				title: "",
-				htmlAttrs: { lang: "en", amp: true },
-			})
-			const mainStore = main()
-			return {mainStore}
+			return {
+				mainStore : main
+			}
 		},
 		metaInfo: {
-			meta: [
-				{
-					vmid: "description",
-					name: "description",
-					content: "Test title",
-					template: (chunk) => `${chunk} - FullStack`,
-				},
-			],
+				meta: [
+					{
+						vmid: "description",
+						name: "description",
+						content: "Test title",
+						template: (chunk) => `${chunk} - FullStack`,
+					},
+				],
 		},
 	}
 </script>
diff --git a/app/src/main.js b/app/src/main.js
index b78bff807b225b031c66a3a1c41834769ee7561d..6579bf33b9f23f2f93304328d2f10f776af2474b 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -4,6 +4,7 @@ import router from './router'
 import mqlOptions from './plugins/mqlOptions.js'
 import { loadLanguageAsync, i18n } from './setup/i18n-setup.js'
 import { createMetaManager } from "vue-meta";
+import { plugin as vueMetaPlugin } from 'vue-meta'
 import Toaster from '@meforma/vue-toaster'
 import '../assets/fonts/iconsax/style.css'
 import "./index.css"
@@ -27,6 +28,7 @@ vm.use(router)
 vm.use(plugin, defaultConfig(formKitConfig))
 vm.use(defaultConfig)
 vm.use(createMetaManager())
+vm.use(vueMetaPlugin)
 vm.use(Toaster, {
   position: "top-right",
   duration: 3000
diff --git a/app/src/views/vueMetaExample.vue b/app/src/views/vueMetaExample.vue
index c6eb0fce3df750c51fb28e68096ce904caa3e474..3ebad9d01b5bf60265d7ac1899950d5cecd1af28 100644
--- a/app/src/views/vueMetaExample.vue
+++ b/app/src/views/vueMetaExample.vue
@@ -22,7 +22,7 @@ export default {
   name: 'Data',
   metaInfo () {
     return {
-      title: this.response.title,
+      title: this.$route.params.title,
       meta: [
         {
           vmid: 'description',