Registry / vue-property-decorator-transpiler

vue-property-decorator-transpiler

JSON →
library2.0.6jsnpmunverified

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.

npm install vue-property-decorator-transpiler
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-PROPERTY-DECOR
V
vue-property-decorator-transpiler
javascriptv2.0.6
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

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

transpiler
✓ const transpiler = require('vue-property-decorator-transpiler');
✗ import transpiler from 'vue-property-decorator-transpiler';
Package is CommonJS-only, no ESM exports. Use require().
transpiler
✓ import transpiler = require('vue-property-decorator-transpiler');
✗ import * as transpiler from 'vue-property-decorator-transpiler';
In TypeScript with esModuleInterop: false, use import = require(). With esModuleInterop, default import works.
transpiler
✓ const { default: transpiler } = await import('vue-property-decorator-transpiler');
✗ const transpiler = await import('vue-property-decorator-transpiler');
Dynamic import in ESM returns module with default property due to CJS interop.

Transpiles a vue-property-decorator class component into a Vue.component global registration call.

const transpiler = require('vue-property-decorator-transpiler'); const code = ` import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; @Component({ name: 'my-component' }) export default class MyComponent extends Vue { @Prop(Number) readonly count!: number; message: string = 'hello'; @Watch('count') onCountChange(newVal: number) { console.log('count changed:', newVal); } greet() { console.log(this.message); } } `; const result = transpiler(code); console.log(result); // Outputs: Vue.component('my-component', { // data() { return { message: 'hello' }; }, // props: { count: Number }, // watch: { 'count'(newVal) { console.log('count changed:', newVal); } }, // methods: { greet() { console.log(this.message); } } // });
vue-property-decorator-transpiler --version
Debug
Known issues
gotchaPackage only supports a subset of vue-property-decorator syntax. Unsupported decorators like @Emit, @Model, @VModel, or advanced mixin patterns will not be transpiled correctly.
fix
Check supported decorators list: @Component, @Prop, @Watch, @Provide, @Inject, @ModelSync (partial). For missing features, manually write the equivalent Vue options.
affects: <=2.0.6
gotchaThe transpiler does not format output code. The result is minified or unformatted; use a separate formatter like prettier for readability.
fix
After transpilation, format with `prettier.format(result, { parser: 'babel' })`.
affects: <=2.0.6
gotchaIf @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.
fix
Always specify a name in @Component to control the registered component name.
affects: <=2.0.6
gotchaTemplate 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.
fix
Either pass a template string as second argument or ensure the HTML has an element with id matching the component name.
affects: >=2.0.0 <3.0.0
Errors
Common errors & fixes
Cannot find module 'vue-property-decorator-transpiler'
Package not installed or installed as devDependency but used in production code incorrectly.
fix
Install as devDependency: npm install --save-dev vue-property-decorator-transpiler. Ensure the require path is correct.
TypeError: transpiler is not a function
Importing incorrectly as a named export instead of the default export.
fix
Use const transpiler = require('vue-property-decorator-transpiler').
Unsupported decorator: @Emit
The package does not support @Emit decorator from vue-property-decorator.
fix
Remove or replace @Emit with explicit method calls. Alternatively, manually implement emits in the Vue component options.
Upgrade
Version history
2.0.6latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
2 hits · last 30 days
node
2
Resources
githubhttps://github.com/MuTsunTsai/vue-property-decorator-transpiler ↗
packagehttps://www.npmjs.com/package/vue-property-decorator-transpiler ↗
vue-property-decorator-transpiler — npm install vue-property-decorator-transpiler · libregistry