Vue Mixin Decorator

Common errors

• TypeError: Decorator @Mixin is not a function

  cause TypeScript decorators are not properly enabled in your `tsconfig.json` or you're missing `reflect-metadata`.
  fix Ensure `experimentalDecorators` and `emitDecoratorMetadata` are set to `true` in `tsconfig.json`. Also, import `reflect-metadata` once at the entry point of your application: `import 'reflect-metadata';`.

• Property 'mixinMethod' does not exist on type 'MyComponent'.

  cause TypeScript is not correctly inferring types from the mixed-in class, or the `Mixins` helper is used incorrectly.
  fix Ensure the generic type argument for `Mixins<IMyMixinInterface>(MyMixin)` correctly defines the interface that extends all mixed-in classes (e.g., `interface IMyMixinInterface extends MyMixin, MyOtherMixin {}`).

• Cannot find module 'vue-mixin-decorator' or its corresponding type declarations.

  cause The package is not installed, or TypeScript cannot find its declaration files.
  fix Run `npm install --save-dev vue-mixin-decorator` or `yarn add --dev vue-mixin-decorator`. Ensure TypeScript is configured to include `node_modules/@types` or that the package ships its own types.

• [Vue warn]: Unknown custom element: <my-component> - did you register the component correctly?

  cause The Vue component defined with `@Component` is not registered globally or locally within its parent component.
  fix Globally register the component using `Vue.component('my-component', MyComponent)` or locally within another component's `components` option.

Warnings

• breaking The `v1.0.0` release was marked as 'BREAKING NEWS! Ready for v1' in its changelog, but specific breaking changes were not detailed. Users upgrading from pre-1.0 versions should review the underlying `vue-class-component` changes.
  Fix: Review the changelog and `vue-class-component` documentation for breaking changes. Conduct thorough testing when upgrading.
• gotcha This library is built for Vue 2 and `vue-class-component`. It is NOT compatible with Vue 3, which has largely moved away from class-style components and decorators in favor of the Composition API and `defineComponent` or `vue-facing-decorator` for class-style component system.
  Fix: For Vue 3 projects, consider using the Composition API or dedicated Vue 3 decorator libraries like `vue-facing-decorator`. Migration from Vue 2 class components to Vue 3 often involves significant refactoring.
• gotcha The peer dependency for `typescript` is `>= 2 < 4`. Using TypeScript 4.x or newer with this package may lead to compilation errors or unexpected behavior due to breaking changes in TypeScript's decorator implementation or type inference.
  Fix: Ensure your project uses a compatible TypeScript version (e.g., TypeScript 3.x). Downgrade TypeScript if necessary, or consider alternatives for newer TypeScript versions.
• deprecated The project's README explicitly states that the 'best case scenario is this project/implementation/concept gets merged/provided into/by an officially supported project and this one can be deprecated.' This indicates the project maintainers do not intend for long-term independent development. It has not been updated since 2019.
  Fix: Evaluate the long-term viability of this package in new projects. For ongoing maintenance or new Vue 2 projects, consider its unmaintained status. For Vue 3, avoid this package entirely.
• gotcha Vue 3 changed the data option declaration to always expect a function, and when merging multiple data return values from mixins, the merge is now shallow instead of deep. This library's behavior, tied to Vue 2's deep merge, would be incompatible with Vue 3's approach if it were to be used.
  Fix: This package is for Vue 2. If migrating to Vue 3, understand that mixin data merging behavior fundamentally changed, and direct translation will likely not work as expected. The Composition API provides more explicit ways to share state.

Install

• npm install vue-mixin-decorator npm
• yarn add vue-mixin-decorator yarn
• pnpm add vue-mixin-decorator pnpm

Imports

• Mixin
  wrong:

  const Mixin = require('vue-mixin-decorator').Mixin;

  correct:

  import { Mixin } from 'vue-mixin-decorator';

  Used to declare a class as a Vue mixin. This is an alias for @Component from vue-class-component, specifically for mixins.
• Component
  wrong:

  import Component from 'vue-mixin-decorator';

  correct:

  import { Component } from 'vue-mixin-decorator';

  This is a re-export of the @Component decorator from 'vue-class-component', used to declare a Vue component class. It's a named import.
• Mixins
  wrong:

  import { mixins } from 'vue-mixin-decorator';

  correct:

  import { Mixins } from 'vue-mixin-decorator';

  A helper function used to extend a Vue component class with one or more declared mixins, providing type inference. Ensure it's imported as `Mixins` (capitalized).

Quickstart

Demonstrates defining a mixin with `@Mixin` and composing it into a class-style Vue component using `Mixins` helper, showcasing method and property access.

import Vue from 'vue';
import { Component, Mixin, Mixins } from 'vue-mixin-decorator';

// Define a mixin using the @Mixin decorator
@Mixin
class MyMixin extends Vue {
  message: string = 'Hello from Mixin!';

  created() {
    console.log('Mixin created hook fired. Message:', this.message);
  }

  mixinMethod() {
    console.log('Mixin method called. Message:', this.message);
  }
}

// Define a component that extends the mixin using Mixins helper
@Component
class MyComponent extends Mixins<MyMixin>(MyMixin) {
  created() {
    // Access mixin properties and methods directly
    this.mixinMethod();
    console.log('Component created hook fired. Mixin message:', this.message);
  }

  render(h) {
    return h('div', `Component Output: ${this.message}`);
  }
}

// Instantiate and mount the component
new MyComponent().$mount('#app');