Vue-meta: How can we use it with vue-class-component?

[vishr]

I am trying examples with https://github.com/vuejs/vue-class-component but it doesn't work like below:

export default class App extends Vue {
    metaInfo = {
      title: 'Title'
    }
}

[vishr]

It works like below:

@Component({
  metaInfo: {
    title: title
})

[Atinux]

@vishr please look at https://github.com/vuejs/vue-class-component#adding-custom-hooks

import Component from 'vue-class-component'

Component.registerHooks([
  'metaInfo'
])

[vishr]

@Atinux Thanks for your response, I will have a look it.

[romandragan]

@vishr, I use it like that and it works fine:

@Component
export default class Home extends Vue {

   public metaInfo(): any {
        return {
            meta: [
                { name: 'description', content: 'Test description' },
                { name: 'keywords', content: 'Test keywords' },
            ],
            title: 'Test Title',
        };
    }
}

Also, as @Atinux said, I've to add custom metaInfo hook.

[derat]

Just to mention it in case someone else runs into it, the vue-class-component docs on additional hooks are now at https://class-component.vuejs.org/guide/additional-hooks.html, and it's essential that you register the metaInfo hook before defining any components (as described in the docs). Otherwise, metadata won't be updated when a component is initially mounted (although it will update after hot-reload), and you'll get This vue app/component has no vue-meta configuration if you manually call this.$meta().refresh().