rollup-plugin-vue-template-compiler

1.0.3 verified Mon Apr 27 auth: no javascript maintenance

Rollup plugin for compiling Vue.js 2.0 templates into render functions using vue-template-compiler. Version 1.0.3 is the latest stable release; no active development since 2017. It allows importing .html files as compiled template objects (render and staticRenderFns) with support for include/exclude patterns. Compared to alternative solutions like rollup-plugin-vue (which handles full SFC compilation) this plugin focuses solely on template compilation and works with plain HTML files.

Common errors

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

cause vue-template-compiler is a peer dependency not automatically installed.

fix

npm install --save-dev vue-template-compiler@^2.0.0

error SyntaxError: Unexpected token 'export' (maybe: Rollup config using ESM without bundling) ↓

cause Rollup config uses import statements but is not compiled by Node (e.g., without .mjs extension).

fix

Use rollup.config.mjs or run with --experimental-modules or transpile config via @rollup/plugin-babel.

Warnings

gotcha Requires Vue 2.x; incompatible with Vue 3. ↓

fix Use vue3 compatible plugin like rollup-plugin-vue for Vue 3.

deprecated Package is no longer actively maintained; last release in 2017. ↓

fix Consider rollup-plugin-vue or @vue/compiler-sfc for modern Vue projects.

Install

npm install rollup-plugin-vue-template-compiler

yarn add rollup-plugin-vue-template-compiler

pnpm add rollup-plugin-vue-template-compiler

Imports

default

wrong

const vueTemplateCompiler = require('rollup-plugin-vue-template-compiler')

correct

import vueTemplateCompiler from 'rollup-plugin-vue-template-compiler'

ESM default export; plugin is used in Rollup config

Quickstart

Configures Rollup plugin to compile Vue 2 templates from .html files and import them as render functions.

// rollup.config.js
import vueTemplateCompiler from 'rollup-plugin-vue-template-compiler';
import buble from 'rollup-plugin-buble';

export default {
  input: 'src/main.js',
  output: { file: 'dist/bundle.js', format: 'iife' },
  plugins: [
    vueTemplateCompiler({ include: '**/*.html' }),
    buble()
  ]
};

// main.js
import template from './template.html';

const App = {
  render: template.render,
  staticRenderFns: template.staticRenderFns,
  mounted() { console.log('mounted'); }
};

new Vue({
  el: '#app',
  render: h => h(App)
});