Search code examples
typescriptvue.jsnuxt.jsvetur

Nuxt `head` property shows errors when using computed properties


I'm using Nuxt.js using head() { } to set SEO metadata.

Within this, if I access computed properties, Vetur shows:

Property 'domain' does not exist on type 'CombinedVueInstance {...}>'.
import Vue from "vue";
export default Vue.extend({
   head(){ 
       const domain = this.domain;
       return {};
   },
   computed: {
       domain() {
           return this.$route.params.domain || '';
       }
   }
});

The app renders fine server-side, but not sure why I'm seeing these errors in VSCode.


Solution

  • I found an answer (https://github.com/nuxt-community/typescript-template/issues/219) that fixes this problem:

    add: import { MetaInfo } from 'vue-meta' and declare head(): MetaInfo {...}

    import Vue from "vue";
    import { MetaInfo } from 'vue-meta'
    export default Vue.extend({
       head(): MetaInfo { 
           const domain = this.domain;
           return {};
       },
       computed: {
           domain() {
               return this.$route.params.domain || '';
           }
       }
    });