Skip to content

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

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 ↓


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


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?



The mixin must be decorated with @Component:

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

@Component 👈
export default class extends Vue {
User contributions licensed under: CC BY-SA
5 People found this is helpful