It seems that Vue Meta has been upgraded to handle Vue.js 3 with a new npm package called vue-3-meta
Before Vue.js 3, it was easy to use vue-meta
by adding it to the Vue instance:
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
// optional pluginOptions
refreshOnceOnNavigation: true
})
However in Vue.js 3, there is no Vue instance; and instead you create the app by running createApp
like such:
const app = createApp(App);
const router = createVueRouter();
app.use(router);
// need to make app use Vue-Meta here
I cannot find any documentation for vue-3-meta
. import VueMeta from 'vue-meta'
no longer works.
How do I import the vue-3-meta
plugin properly and use it with app
like in prior versions?
Disclaimer: vue-meta v3 is still in alpha!
This was the minimal implementation I needed to get started:
Update
vue-meta
to v3 (in package.json)...or with yarn:
Add
metaManager
to Vue appAdd
<metainfo>
to App.vue<template>
(this is also where I set a "title template")Set default meta in App.vue
<script>
Vue 3 vanilla:
or with
vue-class-component
:Override meta in each component
Vue 3 vanilla:
or with
vue-class-component
:See also:
next
branch)next
branch)