rollup-plugin-vue2

0.8.1 verified Mon Apr 27 auth: no javascript maintenance

Rollup plugin for Vue 2.0 components that precompiles templates using vue-template-compiler and transforms .vue files into JavaScript. Version 0.8.1 is the stable release. The plugin is not actively maintained and is a subset of rollup-plugin-vue, which also supports Vue 2 and is better maintained. It requires additional plugins for handling CSS imports and transpilation. Supports ES6 transpilation via rollup-plugin-buble or rollup-plugin-babel. No support for hot-reload.

Common errors

error Error: Could not resolve './App.vue' from 'src/main.js' ↓

cause Missing Rollup plugin to handle .vue files.

fix

Add vue() plugin to rollup.config.js plugins array.

error Error: Unexpected token (1:0) in file 'src/App.vue' ↓

cause The .vue file is not being processed by any plugin.

fix

Ensure vue() plugin is configured and imported correctly.

Warnings

deprecated The plugin is not actively maintained; use rollup-plugin-vue instead. ↓

fix Replace with rollup-plugin-vue (supports Vue 2 and is better maintained).

gotcha CSS from .vue files is not handled automatically; you must include a CSS plugin. ↓

fix Add rollup-plugin-css-only, rollup-plugin-postcss, or rollup-plugin-scss to your Rollup config.

gotcha Order of plugins matters: vue() should be before transpilers like Bublé or Babel. ↓

fix Place vue() before buble() or babel() in the plugins array.

gotcha No support for vue-hot-reload-api; HMR does not work. ↓

fix Use rollup-plugin-vue if hot-reload is needed.

Install

npm install rollup-plugin-vue2

yarn add rollup-plugin-vue2

pnpm add rollup-plugin-vue2

Imports

default
wrong
```
const vue = require('rollup-plugin-vue2')
```
correct
```
import vue from 'rollup-plugin-vue2'
```
Default export is a function. ESM imports supported; CommonJS require works as well.

Quickstart

Shows a basic Rollup configuration using vue plugin with CSS and Bublé transpilation.

// rollup.config.js
import vue from 'rollup-plugin-vue2';
import css from 'rollup-plugin-css-only';
import buble from 'rollup-plugin-buble';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  entry: 'src/main.js',
  dest: 'dist/bundle.js',
  sourcemaps: true,
  plugins: [
    vue(),
    css(),
    buble(),
    nodeResolve({ browser: true, jsnext: true, main: true }),
    commonjs()
  ]
};