Registry / web-framework / vue-mixin-decorator

vue-mixin-decorator

library1.2.0jsnpmunverified

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.

web-framework

npm install vue-mixin-decorator

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-MIXIN-DECORATO

vue-mixin-decorator

web-frameworkjavascriptv1.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Mixin

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

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

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

Component

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

✗ 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

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

✗ 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).

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');

Debug

Known issues

breakingThe `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.

affects: >=1.0.0

gotchaThis 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.

affects: all

gotchaThe 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.

affects: >=1.0.0

deprecatedThe 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.

affects: all

gotchaVue 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.

affects: all

Errors

Common errors & fixes

TypeError: Decorator @Mixin is not a function

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'.

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.

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?

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.

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

vuerequiredProvides the Vue 2 runtime environment for components and mixins.

typescriptrequiredRequired for compiling TypeScript code, enabling decorator syntax and type checking. Compatible with TypeScript versions >=2 <4.

vue-class-componentrequiredThis library fully depends on vue-class-component, which enables class-style Vue components and the @Component decorator.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/justrhysism/vue-mixin-decorator ↗

packagehttps://www.npmjs.com/package/vue-mixin-decorator ↗