Skip to content

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

Open
@Remzi1993

Description

@Remzi1993

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

Should be this:
Screenshot 2023-03-20 200759

I followed the following instructions: #665 (comment)
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? 😢😵‍💫

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions