{"id":14277,"library":"vue-facing-decorator","title":"Vue Facing Decorator","description":"Vue Facing Decorator (vue-facing-decorator) is a library that enables class-based component syntax and TypeScript decorators for Vue 3 applications, offering an alternative to the standard Options API or Composition API without `<script setup>`. Currently at version 4.0.1, it provides a familiar development experience for developers accustomed to `vue-class-component` or `vue-property-decorator` in Vue 2, but specifically engineered for Vue 3. The library maintains an active release cadence, with several minor and patch updates in its 3.x series and a recent major jump to 4.x. Key differentiators include its compatibility with both the Stage 2 and the newer Stage 3 Decorators API (requiring specific TypeScript configurations), robust support for ES class inheritance, Vue's `extends`, and `mixins` features, and a performance-optimized transformation process that converts ES classes to Vue Options API during project loading. It aims to be a safe and specification-compliant transformer, serving as a community-desired solution for class-based Vue 3 components.","status":"active","version":"4.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/facing-dev/vue-facing-decorator","tags":["javascript","vue","class","typescript","decorator","vue decorator","vue component","sfc","vue class component"],"install":[{"cmd":"npm install vue-facing-decorator","lang":"bash","label":"npm"},{"cmd":"yarn add vue-facing-decorator","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-facing-decorator","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for all Vue 3 component features, as this library builds on top of Vue's core.","package":"vue","optional":false}],"imports":[{"note":"The primary decorator used to designate a class as a Vue component. It is a named export.","wrong":"import Component from 'vue-facing-decorator'","symbol":"Component","correct":"import { Component } from 'vue-facing-decorator'"},{"note":"This is the base class that your component classes should extend. Note that it is imported from 'vue-facing-decorator', not directly from 'vue'.","wrong":"import Vue from 'vue'","symbol":"Vue","correct":"import { Vue } from 'vue-facing-decorator'"},{"note":"The decorator used for defining reactive component properties. Other common decorators like `@Emit`, `@Ref`, `@Watch`, `@Provide`, and `@Inject` are also named exports from this package.","symbol":"Prop","correct":"import { Prop } from 'vue-facing-decorator'"},{"note":"Since v3.0.0, this utility function is required to transform a class component into a Vue Options API object, making it compatible with Vue's component registration system (e.g., `app.component` or the `components` option).","wrong":"const MyComponent = new MyClassComponent().$options","symbol":"toNative","correct":"import { toNative } from 'vue-facing-decorator'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { Component, Prop, Vue, toNative } from 'vue-facing-decorator';\n\n@Component({\n  name: 'GreetingDisplay',\n  emits: ['greeted']\n})\nclass GreetingDisplay extends Vue {\n  @Prop({ type: String, default: 'World' })\n  readonly name!: string;\n\n  message: string = 'Hello';\n\n  get fullGreeting(): string {\n    return `${this.message}, ${this.name}!`;\n  }\n\n  sayHello(): void {\n    console.log(this.fullGreeting);\n    this.$emit('greeted', this.fullGreeting);\n  }\n\n  // Example lifecycle hook\n  mounted(): void {\n    this.sayHello();\n    console.log('GreetingDisplay component mounted.');\n  }\n}\n\n// Create Vue app instance and register the class component\nconst app = createApp({\n  template: `\n    <div id=\"app-root\">\n      <h1>Vue Facing Decorator Example</h1>\n      <greeting-display :name=\"'Developer'\" @greeted=\"handleGreeted\" />\n      <greeting-display />\n    </div>\n  `,\n  components: {\n    // Convert the class component to a native Vue options API component for registration\n    GreetingDisplay: toNative(GreetingDisplay)\n  },\n  methods: {\n    handleGreeted(msg: string) {\n      console.log('Component greeted:', msg);\n    }\n  }\n});\n\napp.mount('#app');\n\n// To run this, you would typically have an index.html file with a div#app element:\n// <div id=\"app\"></div>","lang":"typescript","description":"This quickstart demonstrates how to define a class-based Vue 3 component using `@Component` and `@Prop` decorators, including lifecycle methods and a computed property. It also illustrates how to register and use the component within a standard Vue application by converting it to the native Options API format with the `toNative` utility."},"warnings":[{"fix":"Always wrap your class components with `toNative()` when registering them, e.g., `components: { MyComponent: toNative(MyClassComponent) }`.","message":"Since v3.0.0, class components created with `vue-facing-decorator` must be explicitly converted to standard Vue Options API objects using the `toNative()` function before they can be registered globally or used within a parent component's `components` option.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"For Stage 3 decorators with TypeScript 5.x+, ensure `compilerOptions.experimentalDecorators: false` and `compilerOptions.useDefineForClassFields: true`. For older TypeScript versions and Stage 2 decorators, set `compilerOptions.experimentalDecorators: true`.","message":"Version 3.0.0 introduced support for the Stage 3 Decorators API. This necessitates using TypeScript 5.x or newer and setting `compilerOptions.experimentalDecorators` to `false` in your `tsconfig.json`. Previously, for Stage 2 decorators, `experimentalDecorators` needed to be `true`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Consult the official documentation for `vue-facing-decorator` and your specific Vue tooling (e.g., Volar, Vue CLI) for the latest recommendations regarding TypeScript versions and decorator configurations. Consider sticking to Stage 2 decorators or a specific TS version if tooling stability is paramount.","message":"While v3.0.0 supports TypeScript 5.x and Stage 3 decorators, the release notes mention potential compatibility issues with certain Vue tooling, such as Volar, at the time of release. Always verify your development environment's compatibility.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Always use named imports: `import { Component, Vue, Prop } from 'vue-facing-decorator';`. For CommonJS, destructure the `require` result.","message":"All exported symbols from `vue-facing-decorator`, including the `Vue` base class and all decorators (`@Component`, `@Prop`, `@Emit`, etc.), are named exports. Attempting to use default imports or CommonJS `require()` for individual symbols will likely result in undefined values or errors in modern ESM environments.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'3':26 'altern':30 'api':35,38 'applic':27 'base':18 'class':17 'class-bas':16 'compon':19 'composit':37 'decor':3,6,10,23 'enabl':15 'face':2,5,9 'librari':13 'offer':28 'option':34 'standard':33 'syntax':20 'typescript':22 'vue':1,4,8,25 'vue-facing-decor':7 'without':39","created_at":"2026-04-20T01:58:52.660811+00:00","updated_at":"2026-04-20T01:58:52.660811+00:00","problems":[{"fix":"When defining your components object, ensure you wrap your class component: `components: { MyComponent: toNative(MyClassComponent) }`.","cause":"A class-based component was not correctly transformed using `toNative()` before being registered with Vue, leading Vue to not recognize it as a valid component option.","error":"Failed to resolve component: MyComponent"},{"fix":"For Stage 2 decorators (older TypeScript), set `compilerOptions.experimentalDecorators: true`. For Stage 3 decorators (TypeScript 5.x+), set `compilerOptions.experimentalDecorators: false` and `compilerOptions.useDefineForClassFields: true`.","cause":"TypeScript's support for decorators is not correctly configured in your `tsconfig.json` for the specific decorator API stage you are using.","error":"Decorators are not enabled. Try compiling with the 'experimentalDecorators' compiler option."},{"fix":"Ensure that methods accessing Vue instance properties are defined within the component class and that the component is properly mounted before these properties are accessed. Be mindful of how `this` context is handled, especially with arrow functions or external utility functions.","cause":"Attempting to access Vue instance properties (like `this.$emit`, `this.$refs`, `this.$slots`) in a context where `this` is not correctly bound to the Vue component instance, or before the component has been fully initialized and mounted.","error":"TypeError: Cannot read properties of undefined (reading '$emit')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://facing-dev.github.io/vue-facing-decorator","github":"https://github.com/facing-dev/vue-facing-decorator","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-facing-decorator","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","type-stubs"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}