vue-compiler

4.2.1 verified Fri May 01 auth: no javascript

A standalone Vue single-file component (SFC) compiler for projects that cannot use webpack. Current stable version is 4.2.1, released on an irregular cadence by a community maintainer. Unlike official vue-loader, this package compiles .vue files directly to CommonJS modules without requiring webpack, supporting both async (compile) and sync (compileSync) APIs. It includes template compilation (via vue-template-compiler), style processing, and custom compiler hooks. However, the package is not actively maintained by the Vue core team and relies on an outdated peer dependency of vue-template-compiler ^2.6.10, meaning it only supports Vue 2.x. For Vue 3, use @vue/compiler-sfc instead.

Common errors

error Cannot find module 'vue-template-compiler' ↓

cause Missing peer dependency.

fix

Run npm install vue-template-compiler@^2.6.10 in your project.

error TypeError: (0 , _vueCompiler.default) is not a function ↓

cause Improper import: using named import for default export.

fix

Use import compile from 'vue-compiler' instead of import { compile } from 'vue-compiler'.

error Expected vue-template-compiler to be a function, got object ↓

cause Incompatible version of vue-template-compiler (e.g., Vue 3 version installed).

fix

Ensure you have vue-template-compiler@^2.6.10 installed, not @vue/compiler-sfc.

Warnings

breaking Vue 2 only; does not support Vue 3 SFC syntax. ↓

fix Use @vue/compiler-sfc for Vue 3 projects.

deprecated The peer dependency vue-template-compiler ^2.6.10 is outdated and may have security vulnerabilities. ↓

fix Update your project's vue-template-compiler to a newer patch within 2.6.x, or migrate to Vue 3.

gotcha The default export is the async compile function. Importing as `import { compile }` will not work. ↓

fix Use `import compile from 'vue-compiler'` for the async function.

gotcha When using TypeScript, the package does not ship its own type definitions. You may need to create a declaration file. ↓

fix Add a .d.ts file: `declare module 'vue-compiler'` or use @types/vue-compiler if available.

Install

npm install vue-compiler

yarn add vue-compiler

pnpm add vue-compiler

Imports

compile (default)
wrong
```
const compile = require('vue-compiler').compile
```
correct
```
import compile from 'vue-compiler'
```
The default export is the async compile function. Named exports are also available.

compileSync

wrong

const compileSync = require('vue-compiler').compileSync

correct

import { compileSync } from 'vue-compiler'

Only available as named export, not as a default property.

parse
```
import { parse } from 'vue-compiler'
```
Exported as a named function for parsing SFC descriptors.
assemble
```
import { assemble } from 'vue-compiler'
```
Used to combine compiled parts into a final module.

Quickstart

Demonstrates async compilation of a Vue single-file component string to a CommonJS module.

import compile from 'vue-compiler';

const source = `<template><div>{{ msg }}</div></template><script>export default { data() { return { msg: 'Hello' } } }</script><style scoped>div { color: red }</style>`;

const result = await compile(source, { filename: 'App.vue' });
console.log(result.code);