{"id":15038,"library":"vue-mixin-decorator","title":"Vue Mixin Decorator","description":"This library provides decorators for applying Vue 2 mixins within a TypeScript codebase, specifically designed for use with `vue-class-component`. It allows developers to compose reusable functionalities into class-style Vue components using decorator syntax, enhancing type safety compared to traditional mixin usage. The current stable version is 1.2.0, with the last release in July 2019, indicating a halted development cadence. Key differentiators include its focus on TypeScript and decorators for Vue 2 mixin composition, drawing inspiration from `av-ts` and `vue-property-decorator`. The project explicitly states a hope for deprecation if its core functionality is absorbed by officially supported projects, suggesting it's not intended for long-term standalone development.","status":"abandoned","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/justrhysism/vue-mixin-decorator","tags":["javascript","vue","typescript","decorator"],"install":[{"cmd":"npm install vue-mixin-decorator","lang":"bash","label":"npm"},{"cmd":"yarn add vue-mixin-decorator","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-mixin-decorator","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the Vue 2 runtime environment for components and mixins.","package":"vue","optional":false},{"reason":"Required for compiling TypeScript code, enabling decorator syntax and type checking. Compatible with TypeScript versions >=2 <4.","package":"typescript","optional":false},{"reason":"This library fully depends on vue-class-component, which enables class-style Vue components and the @Component decorator.","package":"vue-class-component","optional":false}],"imports":[{"note":"Used to declare a class as a Vue mixin. This is an alias for @Component from vue-class-component, specifically for mixins.","wrong":"const Mixin = require('vue-mixin-decorator').Mixin;","symbol":"Mixin","correct":"import { Mixin } from 'vue-mixin-decorator';"},{"note":"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.","wrong":"import Component from 'vue-mixin-decorator';","symbol":"Component","correct":"import { Component } from 'vue-mixin-decorator';"},{"note":"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).","wrong":"import { mixins } from 'vue-mixin-decorator';","symbol":"Mixins","correct":"import { Mixins } from 'vue-mixin-decorator';"}],"quickstart":{"code":"import Vue from 'vue';\nimport { Component, Mixin, Mixins } from 'vue-mixin-decorator';\n\n// Define a mixin using the @Mixin decorator\n@Mixin\nclass MyMixin extends Vue {\n  message: string = 'Hello from Mixin!';\n\n  created() {\n    console.log('Mixin created hook fired. Message:', this.message);\n  }\n\n  mixinMethod() {\n    console.log('Mixin method called. Message:', this.message);\n  }\n}\n\n// Define a component that extends the mixin using Mixins helper\n@Component\nclass MyComponent extends Mixins<MyMixin>(MyMixin) {\n  created() {\n    // Access mixin properties and methods directly\n    this.mixinMethod();\n    console.log('Component created hook fired. Mixin message:', this.message);\n  }\n\n  render(h) {\n    return h('div', `Component Output: ${this.message}`);\n  }\n}\n\n// Instantiate and mount the component\nnew MyComponent().$mount('#app');","lang":"typescript","description":"Demonstrates defining a mixin with `@Mixin` and composing it into a class-style Vue component using `Mixins` helper, showcasing method and property access."},"warnings":[{"fix":"Review the changelog and `vue-class-component` documentation for breaking changes. Conduct thorough testing when upgrading.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"all"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":"all"},{"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.","message":"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.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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';`.","cause":"TypeScript decorators are not properly enabled in your `tsconfig.json` or you're missing `reflect-metadata`.","error":"TypeError: Decorator @Mixin is not a function"},{"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 {}`).","cause":"TypeScript is not correctly inferring types from the mixed-in class, or the `Mixins` helper is used incorrectly.","error":"Property 'mixinMethod' does not exist on type 'MyComponent'."},{"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.","cause":"The package is not installed, or TypeScript cannot find its declaration files.","error":"Cannot find module 'vue-mixin-decorator' or its corresponding type declarations."},{"fix":"Globally register the component using `Vue.component('my-component', MyComponent)` or locally within another component's `components` option.","cause":"The Vue component defined with `@Component` is not registered globally or locally within its parent component.","error":"[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly?"}],"ecosystem":"npm"}