vue-property-decorator-transpiler

2.0.6 verified Fri May 01 auth: no javascript

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.

Common errors

error Cannot find module 'vue-property-decorator-transpiler' ↓

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

error TypeError: transpiler is not a function ↓

cause Importing incorrectly as a named export instead of the default export.

fix

Use const transpiler = require('vue-property-decorator-transpiler').

error Unsupported decorator: @Emit ↓

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

Warnings

gotcha 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. ↓

fix Check supported decorators list: @Component, @Prop, @Watch, @Provide, @Inject, @ModelSync (partial). For missing features, manually write the equivalent Vue options.

gotcha The 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' })`.

gotcha 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. ↓

fix Always specify a name in @Component to control the registered component name.

gotcha 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. ↓

fix Either pass a template string as second argument or ensure the HTML has an element with id matching the component name.

Install

npm install vue-property-decorator-transpiler

yarn add vue-property-decorator-transpiler

pnpm add vue-property-decorator-transpiler

Imports

transpiler

wrong

import transpiler from 'vue-property-decorator-transpiler';

correct

const transpiler = require('vue-property-decorator-transpiler');

Package is CommonJS-only, no ESM exports. Use require().

transpiler

wrong

import * as transpiler from 'vue-property-decorator-transpiler';

correct

import transpiler = require('vue-property-decorator-transpiler');

In TypeScript with esModuleInterop: false, use import = require(). With esModuleInterop, default import works.

transpiler

wrong

const transpiler = await import('vue-property-decorator-transpiler');

correct

const { default: transpiler } = await import('vue-property-decorator-transpiler');

Dynamic import in ESM returns module with default property due to CJS interop.

Quickstart

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); } }
// });