https://www.npmjs.com/package/vue-meta
Юзаете:
main.js
import Meta from 'vue-meta';
Vue.use(Meta);
В роутере у вас каждому роуту соответствует какой-то компонент-страница:
router.js
import HomePage from '../components/pages/Home.vue';
new Router({
routes: [
{
name: 'home',
path: '/',
component: HomePage,
},
});
В компоненте описываете нужные мета-данные
components/pages/Home.vue:
<script>
export default {
metaInfo: {
title: 'Vue App',
meta: [
{ vmid: 'description', property: 'description', content: 'Vue App' },
{ vmid: 'og:title', property: 'og:title', content: 'Vue App' },
{ vmid: 'og:description', property: 'og:description', content: 'Vue App' },
],
},
};
</script>
В общем-то в документации всё расписано:
https://github.com/declandewet/vue-meta
С серверным рендерингом так же работает, но там больше заморочек.