Vue-class-component: Define mixin global does not work

[nqthiep]

Hi all,

I tried creating a mixin in the Vue-Class-Component format like below:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component()
export default class HelloMixins extends Vue{
  helloMixinsData = 'Hello mixin class component!'
  created() {
    console.log('created: ', this.helloMixinsData)
  }
}

And I try to use it in two ways:

Option 1: Register and use that mixin locally:

@Component({
    // Register mixin locally
    mixins:[HelloMixins]
})
export default class Parent extends Vue {
...
}
<template>
<div>{{helloMixinsData}}</div>
</template>

With this option, it works fine.

Option 2: Register and use that mixin globally:

// Register mixin globally
Vue.mixin(HelloMixins)
...
@Component({})
export default class Parent extends Vue {
...
}
<template>
<div>{{helloMixinsData}}</div>
</template>

With this option, it throws an error:

Property or method "helloMixinsData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Does anyone point out to me what the problem is?

[nqthiep]

@yyx990803 @ktsn Could you please help me know solve this issue?

[ktsn]

Currenly, Vue does not handle an extended constructor as global mixin. I already make a PR to fix this. vuejs/vue#5448

[nqthiep]

@ktsn Thank you so much

[iErik]

@nqthiep I'm still having the exact same issue, how did you solve it?

[akoidan]

@ktsn The PR is resolved in 2017, it still doesn't work. Am I doing something wrong. I'm getting

ERROR in /home/andrew/WebstormProjects/vue-webpack-minimal/template/src/main.ts
./src/main.ts
[tsl] ERROR in /home/andrew/WebstormProjects/vue-webpack-minimal/template/src/main.ts(30,11)
      TS2345: Argument of type 'typeof LoggerMixin' is not assignable to parameter of type 'VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
  Type 'typeof LoggerMixin' is not assignable to type 'VueConstructor<Vue>'.
    Types of parameters 'options' and 'options' are incompatible.
      Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | undefined' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined'.
        Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
          Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is not assignable to type 'ComponentOptions<Vue, DataDef<object, Record<never, any>, Vue>, object, object, never[], Record<never, any>>'.
            Type 'PropsDefinition<Record<string, any>>' is not assignable to type 'never[]'.
              Type 'string[]' is not assignable to type 'never[]'.
                Type 'string' is not assignable to type 'never'.

[kosratdev]

is there a way to use Global Mixins with vue-class-component??