How to use mixins in Nuxt.js app with nuxt-property-decortor

Question

I have used Nuxt.js in my latest project, and the language is TypeScript. Also, I'm using nuxt-property-decorator. I'm trying to understand the 'mixins' property in the following code.

mixins.vue ↓

<template>
  <div>    
    <p>{{hello}}</p>
  </div>   
</template>

<script lang="ts">
import { Component ,Vue } from 'nuxt-property-decorator'
import Mixin from "~/mixins/mixin";
@Component({
    mixins:[
        Mixin
    ]
})
export default class extends Vue{
    greeting:string = 'Hello'
}
</script>

mixin.ts↓

import { Vue } from "nuxt-property-decorator";
export default class extends Vue {
    greeting:string = ''
    message:string = 'world'
    get hello(){
        return this.greeting + ' ' + this.message + '!'
    }
}

I was expecting "Hello worlds!" in the output, but an error occurred:

Property or method "hello" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Could anyone advise me?

Answer 1

The mixin must be decorated with @Component:

// mixin.ts
import { Component, Vue } from "nuxt-property-decorator";

@Component 👈
export default class extends Vue {
  //...
}