Vue3+ts+vite - meta name doesn't seem to work

Remzi1993 commented 1 year ago

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: Screenshot 2023-03-20 200630