Как правильно управлять заголовками и мета-тегами в vuejs head, meta, title, etc?

Question

[yrtrk]

Как правильно управлять заголовками и мета-тегами в vuejs head, meta, title, etc? Есть vue-meta, еще некоторые плагины, но почему о том как управлять заголовками ничего не сказано в документации и как это правильно делать? vue-meta у меня почему то "не взлетает", можно просто присваивать document.title = "page title", но тоже куча вопросов как это правильно делать. Может у кого то есть опыт?

Answer 1

[Андрей Хохлов]

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
С серверным рендерингом так же работает, но там больше заморочек.

Comments

[SKY-SHY]

Подключал в App.vue --- это не работает.

<script>
    import TopPanel from "@/components/topPanel/topPanel";
    export default {
        name: 'App',
        metaInfo: {
            title: 'CRM אבי הובלות',
            titleTemplate: '%s | crm.avi-hovalot.co.il',
            link: [
                      {rel: 'shortcut icon', type: 'image/png', href: '/favicon.ico'}
            ],
            meta: [
                      { 'http-equiv': 'Content-Type', content: 'text/html; charset=utf-8' },
                      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
                      {'property': 'og:title', 'content': 'CRM אבי הובלות'},    
            ],
        },

Answer 2

[Evgeny Kulakov]

Никак, ко vue это не имеет отношение.