vue-meta
vue-meta copied to clipboard
Vue3+ts+vite - meta name doesn't seem to work
I have the following config:
main.ts
import {createApp} from 'vue'
import {createRouter, createWebHistory} from 'vue-router'
import App from './App.vue'
import 'bootstrap/dist/js/bootstrap.esm.min.js'
import 'bootstrap-icons/font/bootstrap-icons.scss'
import './style.scss'
import Home from './components/Home.vue'
import Resume from './components/Resume.vue'
import Contact from './components/Contact.vue'
import Portfolio from './components/Portfolio.vue'
import {createMetaManager} from 'vue-meta'
// Routes
const routes = [
{path: '/', name: 'Home', component: Home},
{path: '/portfolio', name: 'Portfolio', component: Portfolio},
{path: '/resume', name: 'Resume', component: Resume},
{path: '/contact', name: 'Contact', component: Contact},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
createApp(App)
.use(router)
.use(createMetaManager())
.mount('#app')
My App.vue
<script>
import NavBar from './components/NavBar.vue'
import {useMeta} from "vue-meta";
export default {
setup () {
useMeta({
htmlAttrs: { lang: 'nl'},
meta: [
{charset: 'UTF-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{name: 'description', content: 'Website of Remzi Cavdar'}
]
})
},
name: 'App',
components: {
NavBar
}
}
</script>
Home.vue
<script lang="ts">
import Sidebar from "./Sidebar.vue";
import {useMeta} from "vue-meta";
export default {
setup() {
useMeta({
title: 'Home'
})
},
name: "Home",
components: {Sidebar}
}
</script>
Everything seems to work except this:
Should be this:
I followed the following instructions: https://github.com/nuxt/vue-meta/issues/665#issuecomment-820927172 And I checked the following docs: https://github.com/nuxt/vue-meta/tree/v3.0.0-alpha.10
Maybe the problem is related to #665
@charles-allen Could you please help me out? 😢😵💫
try this: createMetaManager(false, { meta: { tag: 'meta', nameless: true }, })
try this: createMetaManager(false, { meta: { tag: 'meta', nameless: true }, })
Great, set it up like this and you're good to go
try this: createMetaManager(false, { meta: { tag: 'meta', nameless: true }, })
Thank you! It Works!