vue-facing-decorator

vue-facing-decorator is a library designed for Vue 3 that allows developers to write Vue components using ES classes. It is intended as a modern successor to the deprecated vue-class-component and vue-property-decorator packages.

Key features include:

• TypeScript & Decorator Support: Works with both TypeScript and standard decorators.
• Decorator Compatibility: Supports both Stage 2 and Stage 3 decorators.
• Project Flexibility: Compatible with both TypeScript and JavaScript projects.
• Safety & Performance: Transforms ES classes into Vue Options API components according to specifications, with transformations occurring during project loading for high performance.
• Inheritance Support: Supports ES class inheritance, Vue extends, and Vue mixins.

To use Stage 3 decorators instead of the standard Stage 2 decorators, you must update your environment to support the new specification.

Note: Some third-party libraries (such as esbuild when compiling TypeScript code inside .vue files) may not yet support Stage 3 decorators. Because of this, using Stage 2 decorators is generally recommended for stability.

// tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": false
  }
}

In vue-facing-decorator, you can use the @Provide decorator to make a dependency available to all descendant components in the component tree. This follows the standard Vue provide/inject pattern but allows you to declare dependencies directly on class properties within a class component.

@Provide()
myDependency = 'some value';

In a vue-facing-decorator class component, you can use almost all standard Vue lifecycle hooks by defining them directly as class methods. These hooks are recognized by the decorator and are not transformed into standard component methods.

import { Component, Vue } from 'vue-facing-decorator';

@Component
export default class MyComponent extends Vue {
  created() {
    console.log('Component created!');
  }

  mounted() {
    console.log('Component mounted!');
  }
}

In vue-facing-decorator v3.0.0+, you can use the TypeScript Decorators API Stage 3. To enable this, you must upgrade to TypeScript 5.x and configure your tsconfig.json by setting compilerOptions.experimentalDecorators to false. If you need to use Stage 2 decorators, keep the value as true.

{
  "compilerOptions": {
    "experimentalDecorators": false
  }
}

To create a class-based Vue component, use the @Component decorator on a class that extends the Vue base class.

import { Vue, Component } from 'vue-facing-decorator';

@Component
export default class MyComponent extends Vue {
  // component logic here
}

To extend a component from multiple sources, use the mixins function. This follows the Vue mixin pattern to merge multiple component definitions into a single component.

@Component({ mixins: [MixinA, MixinB] })
export class MyComponent extends BaseComponent {
  // ...
}

To use vue-facing-decorator in a TypeScript project, install the package via npm and ensure that experimentalDecorators is enabled in your tsconfig.json file.

npm install --save vue-facing-decorator

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}