{"id":26615,"library":"vue-property-decorator-transpiler","title":"vue-property-decorator-transpiler","description":"Transpiles classes written with vue-property-decorator back to simple Vue component global registration code. Version 2.0.6 is current, with support for async methods, props defaults, mixins, const mode, and template precompilation. Unlike vue-class-component or vue-property-decorator at runtime, this package outputs plain Vue component options objects without runtime dependencies, enabling developers to use decorator syntax during development but deploy lightweight, self-contained components. Ideal for projects that need to avoid runtime decorator overhead or generate registerable components for use outside of a full build system.","status":"active","version":"2.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/MuTsunTsai/vue-property-decorator-transpiler","tags":["javascript","vue","typescript","decorator","component"],"install":[{"cmd":"npm install vue-property-decorator-transpiler","lang":"bash","label":"npm"},{"cmd":"yarn add vue-property-decorator-transpiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-property-decorator-transpiler","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package is CommonJS-only, no ESM exports. Use require().","wrong":"import transpiler from 'vue-property-decorator-transpiler';","symbol":"transpiler","correct":"const transpiler = require('vue-property-decorator-transpiler');"},{"note":"In TypeScript with esModuleInterop: false, use import = require(). With esModuleInterop, default import works.","wrong":"import * as transpiler from 'vue-property-decorator-transpiler';","symbol":"transpiler","correct":"import transpiler = require('vue-property-decorator-transpiler');"},{"note":"Dynamic import in ESM returns module with default property due to CJS interop.","wrong":"const transpiler = await import('vue-property-decorator-transpiler');","symbol":"transpiler","correct":"const { default: transpiler } = await import('vue-property-decorator-transpiler');"}],"quickstart":{"code":"const transpiler = require('vue-property-decorator-transpiler');\nconst code = `\nimport { Component, Vue, Prop, Watch } from 'vue-property-decorator';\n@Component({\n  name: 'my-component'\n})\nexport default class MyComponent extends Vue {\n  @Prop(Number) readonly count!: number;\n  message: string = 'hello';\n  @Watch('count')\n  onCountChange(newVal: number) {\n    console.log('count changed:', newVal);\n  }\n  greet() {\n    console.log(this.message);\n  }\n}\n`;\nconst result = transpiler(code);\nconsole.log(result);\n// Outputs: Vue.component('my-component', {\n//   data() { return { message: 'hello' }; },\n//   props: { count: Number },\n//   watch: { 'count'(newVal) { console.log('count changed:', newVal); } },\n//   methods: { greet() { console.log(this.message); } }\n// });","lang":"javascript","description":"Transpiles a vue-property-decorator class component into a Vue.component global registration call."},"warnings":[{"fix":"Check supported decorators list: @Component, @Prop, @Watch, @Provide, @Inject, @ModelSync (partial). For missing features, manually write the equivalent Vue options.","message":"Package only supports a subset of vue-property-decorator syntax. Unsupported decorators like @Emit, @Model, @VModel, or advanced mixin patterns will not be transpiled correctly.","severity":"gotcha","affected_versions":"<=2.0.6"},{"fix":"After transpilation, format with `prettier.format(result, { parser: 'babel' })`.","message":"The transpiler does not format output code. The result is minified or unformatted; use a separate formatter like prettier for readability.","severity":"gotcha","affected_versions":"<=2.0.6"},{"fix":"Always specify a name in @Component to control the registered component name.","message":"If @Component name option is omitted, the component name is derived from the class name (lowercased). This may not match the expected kebab-case or PascalCase naming convention.","severity":"gotcha","affected_versions":"<=2.0.6"},{"fix":"Either pass a template string as second argument or ensure the HTML has an element with id matching the component name.","message":"Template precompilation (v2+) requires passing a template string as second argument. If omitted, the output assumes the template ID equals the component name. This may lead to runtime template-not-found errors.","severity":"gotcha","affected_versions":">=2.0.0 <3.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Install as devDependency: npm install --save-dev vue-property-decorator-transpiler. Ensure the require path is correct.","cause":"Package not installed or installed as devDependency but used in production code incorrectly.","error":"Cannot find module 'vue-property-decorator-transpiler'"},{"fix":"Use const transpiler = require('vue-property-decorator-transpiler').","cause":"Importing incorrectly as a named export instead of the default export.","error":"TypeError: transpiler is not a function"},{"fix":"Remove or replace @Emit with explicit method calls. Alternatively, manually implement emits in the Vue component options.","cause":"The package does not support @Emit decorator from vue-property-decorator.","error":"Unsupported decorator: @Emit"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}