From 43eb7e875dc1e053b332b532c596a76d1fa03ee1 Mon Sep 17 00:00:00 2001
From: Reshma Bhosale <reshmab@mkcl.org>
Date: Fri, 4 Aug 2023 15:05:47 +0530
Subject: [PATCH] Fixed : VueMeta not working
---
app/package.json | 2 +-
app/src/App.vue | 32 ++++++++++++++------------------
app/src/main.js | 2 ++
app/src/views/vueMetaExample.vue | 2 +-
4 files changed, 18 insertions(+), 20 deletions(-)
diff --git a/app/package.json b/app/package.json
index e61a922..019d100 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 0253c2b..5aff8a3 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 b78bff8..6579bf3 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 c6eb0fc..3ebad9d 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',
--
GitLab