Hi I'm using Vue3 with vue-meta: ^3.0.0-alpha.8. I'm trying to setup my project in order to set dynamically the meta-tags.
Here my code on App.vue:
import constants from './constants'
export default {
data() {
return {
constants: constants
}
}
},
setup() {
useMeta({
htmlAttrs: {
lang: constants.meta.language,
},
description: constants.main.description,
meta: [
{
name: 'author',
content: constants.meta.author
},
{
name: 'keywords',
content: constants.meta.keywords
},
{
name: 'robots',
content: constants.meta.robots
}
]
}
}
}
htmlAttrs and description works fine generating: <html lang="en" ... and <meta name="description" content="My description">
The other tags, on the other hand, are generated incorrectly:
<meta name="meta" content="my author string">
<meta name="meta" content="my keywords string">
<meta name="meta" content="my robots string">
Why it is generating <meta name="meta" .. instead of <meta name="MY PARAMETER NAME" ..?
I just can't figure it out.
Hey I had the same issue, I looked into the vue-meta files and found that you can add your own config to the createMetaManager function like so in your main.js file:
import { createApp } from "vue";
import { createMetaManager } from "vue-meta";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// import Amplify from "aws-amplify";
// import config from "./aws-exports";
import "./assets/css/tailwind.css";
createApp(App)
.use(store)
.use(router)
.use(
createMetaManager(false, {
body: {
tag: "script",
to: "body",
},
base: {
valueAttribute: "href",
},
charset: {
tag: "meta",
nameless: true,
valueAttribute: "charset",
},
description: {
tag: "meta",
},
og: {
group: true,
namespacedAttribute: true,
tag: "meta",
keyAttribute: "property",
},
twitter: {
group: true,
namespacedAttribute: true,
tag: "meta",
},
htmlAttrs: {
attributesFor: "html",
},
headAttrs: {
attributesFor: "head",
},
bodyAttrs: {
attributesFor: "body",
},
robots: {
tag: "meta",
},
})
)
.mount("#app");
The first argument in createMetaManager is isSSR, the second is the config (there's a defaultConfig variable inside vue-meta/dist/vue-meta.csj.js that I copied then modified to include a robots object). This is my home route:
<script>
import { useMeta } from "vue-meta";
export default {
name: "HomePage",
setup() {
useMeta({
title: "title",
htmlAttrs: { lang: "en", amp: true },
description: "desc",
robots: "index, follow",
});
},
};
</script>