gulp-vue-property-decorator-transpiler

1.0.5 verified Fri May 01 auth: no javascript

Gulp plugin that transpiles Vue single-file components (SFCs) using vue-property-decorator-transpiler into a single HTML and JS bundle. It collects all .vue files from a components directory, inlines them into an initial .html template, and outputs one .html and one .js file. Current stable version is 1.0.5. Released occasionally with bug fixes only.

Common errors

error TypeError: gvpd is not a function ↓

cause Named import instead of default import in ES module context.

fix

Use default import: import gvpd from 'gulp-vue-property-decorator-transpiler'

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

cause Missing peer dependency vue-property-decorator-transpiler.

fix

Run: npm install vue-property-decorator-transpiler --save-dev

Warnings

gotcha The plugin expects a single source file (the initial HTML). Passing multiple files via gulp.src will cause unexpected behavior. ↓

fix Always use gulp.src with a single HTML file entry point.

gotcha The componentsDir option must contain only .vue files; non-.vue files are ignored but may cause errors if present. ↓

fix Ensure componentsDir directory exclusively contains .vue files.

deprecated No updates since 2019; package may be unmaintained. ↓

fix Consider switching to Vue CLI or Vite for Vue SFC compilation.

Install

npm install gulp-vue-property-decorator-transpiler

yarn add gulp-vue-property-decorator-transpiler

pnpm add gulp-vue-property-decorator-transpiler

Imports

gvpd (or default)

wrong

const { gvpd } = require('gulp-vue-property-decorator-transpiler');

correct

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

Package exports a single function as default. Named import gvpd is not available.

default export

wrong

const { default: gvpd } = require('gulp-vue-property-decorator-transpiler');

correct

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

CommonJS require returns the function directly, not a module with default property.

Type usage (no types provided)
```
No official types; use @ts-ignore or declare module.
```
Package does not ship TypeScript definitions. Use with caution in TS projects.

Quickstart

Shows basic Gulp task using the plugin to transpile Vue SFCs and output single HTML+JS bundle with minification.

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

gulp.src('src/index.html')
  .pipe(gvpd({
    script: 'src/main.js',
    componentsDir: 'src/components',
    outputScript: 'dist/assets/main.js',
    outputHTML: 'dist/index.html',
    minifyScript: true
  }))
  .pipe(gulp.dest('dist'));