Skip to content

Define mixin global does not work #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
nqthiep opened this issue Apr 12, 2017 · 6 comments · Fixed by vuejs/vue#5448
Closed

Define mixin global does not work #83

nqthiep opened this issue Apr 12, 2017 · 6 comments · Fixed by vuejs/vue#5448

Comments

@nqthiep
Copy link

nqthiep commented Apr 12, 2017 •
edited
Loading

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
Copy link
Author

nqthiep commented Apr 13, 2017 •
edited
Loading

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

@ktsn ktsn mentioned this issue Apr 15, 2017
Merged
12 tasks
@ktsn
Copy link
Member

ktsn commented Apr 15, 2017

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

@nqthiep
Copy link
Author

nqthiep commented Apr 19, 2017

@ktsn Thank you so much

@iErik
Copy link

iErik commented Nov 16, 2018 •
edited
Loading

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

@akoidan
Copy link

akoidan commented Mar 28, 2019

@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
Copy link

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

@samuelnunoo samuelnunoo mentioned this issue May 18, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

allow an extended constructor as global mixin (fix vue-class-component#83) ktsn/vue
5 participants
@akoidan @ktsn @iErik @nqthiep @kosratdev