Mixin decorators for Vue Component
npm install vue-mixin-decorator
This library fully depends on vue-class-component.
Most ideas and code are ~~stolen~~ _borrowed_ from @HerringtonDarkholme
and his av-ts project. Also from
@JsonSong89's
comment, who suggested that the idea
should be extracted into a separate project _which is why I've begrudgingly done so_.
Project template shamelessly stolen from vue-property-decorator.
Best case scenario is this project/implementation/concept
gets merged/provided into/by an officially supported project
and this one can be deprecated.
MIT License
``bash`
npm install --save-dev vue-mixin-decorator
There are 2 decorators:
* @Mixin @Component
*
and an extension class:
* Mixins
_Note: @Mixin is @Component exported from vue-class-component._
`typescript
import Vue from 'vue';
import { Component, Mixin, Mixins } from 'vue-mixin-decorator';
@Mixin
class MyMixin extends Vue {
created() {
console.log('Mixin created()');
}
mixinMethod() {
console.log('Mixin method called.');
}
}
@Component
class MyComponent extends Mixins
created() {
this.mixinMethod();
}
}
`
typescript
import Vue from 'vue';
import { Component, Mixin, Mixins } from 'vue-mixin-decorator';@Mixin
class MyMixin extends Vue {
created() {
console.log('Mixin created()');
}
mixinMethod() {
console.log('Mixin method called.');
}
}
@Mixin
class MyOtherMixin extends Vue {
created() {
console.log('Other mixin created()');
}
otherMixinMethod() {
console.log('Other mixin method called.');
}
}
// Create an interface extending the mixins to provide
interface IMixinInterface extends MyMixin, MyOtherMixin {}
@Component
class MyComponent extends Mixins(MyMixin, MyOtherMixin) {
created() {
this.mixinMethod();
this.otherMixinMethod();
}
}
``