Hola, estoy usando Vue3 con vue-meta: ^3.0.0-alpha.8 . Estoy tratando de configurar mi proyecto para establecer dinámicamente las metaetiquetas. Aquí mi código en 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 y description funcionan bien generando: <html lang="en" ... y <meta name="description" content="My description">
Las otras etiquetas, por otro lado, se generan incorrectamente:
<meta name="meta" content="my author string"> <meta name="meta" content="my keywords string"> <meta name="meta" content="my robots string"> ¿Por qué está generando <meta name="meta" .. en lugar de <meta name="MY PARAMETER NAME" .. ? Simplemente no puedo entenderlo.
Oye, tuve el mismo problema, investigué los archivos vue-meta y descubrí que puedes agregar tu propia configuración a la función createMetaManager así en tu archivo main.js:
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");El primer argumento en createMetaManager es isSSR, el segundo es la configuración (hay una variable defaultConfig dentro de vue-meta/dist/vue-meta.csj.js que copié y luego modifiqué para incluir un objeto robots). Esta es mi ruta a casa:
<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>