Home > Software engineering >  Nuxt `head` property shows errors when using computed properties
Nuxt `head` property shows errors when using computed properties

Time:08-08

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.

CodePudding user response:

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 || '';
       }
   }
});
  • Related