Registry / web-framework / rollup-plugin-vue

rollup-plugin-vue

library6.0.0jsnpmunverified

rollup-plugin-vue version 6.0.0 is a Rollup plugin specifically designed to compile Vue 3 Single File Components (SFCs). It integrates directly with `@vue/compiler-sfc`, the official Vue SFC compiler, to process `.vue` files within a Rollup build pipeline. This version focuses exclusively on Vue 3 compatibility. While a specific release cadence isn't stated, major versions typically align with significant Vue ecosystem updates. Key differentiators include its tight integration with `@vue/compiler-sfc`, enabling configuration of Vue's internal compiler options, and specialized features like `target` options for server-side rendering (`node`) or browser compilation, `exposeFilename` for debugging, and `preprocessStyles` for handling CSS preprocessors directly. It is an essential tool for bundling Vue 3 applications with Rollup.

web-framework

npm install rollup-plugin-vue

package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-VUE

rollup-plugin-vue

web-frameworkjavascriptv6.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vuePlugin

✓ import vuePlugin from 'rollup-plugin-vue'

✗ const vuePlugin = require('rollup-plugin-vue')

Rollup plugins are primarily consumed via ESM imports. For CommonJS, append `.default` if needed, but ESM is recommended.

Options

✓ import type { Options } from 'rollup-plugin-vue'

Imports the TypeScript type definition for the plugin options.

Demonstrates a basic Rollup configuration for bundling a Vue 3 SFC (`src/App.vue`) using `rollup-plugin-vue` and writing the output to `dist/bundle.js`.

import path from 'path'; import { rollup } from 'rollup'; import vuePlugin from 'rollup-plugin-vue'; async function buildVueComponent() { const bundle = await rollup({ input: 'src/App.vue', plugins: [ vuePlugin({ target: 'browser', exposeFilename: true // useful for debugging }) ] }); await bundle.write({ file: 'dist/bundle.js', format: 'es', sourcemap: true }); console.log('Vue component bundled successfully!'); } buildVueComponent().catch(console.error); // src/App.vue (example content) /* <template> <div>Hello, {{ msg }}</div> </template> <script setup> import { ref } from 'vue'; const msg = ref('Rollup Vue!'); </script> <style scoped> div { color: blue; } </style> */

Debug

Known issues

breakingVersion 6.0.0 is a complete rewrite targeting Vue 3. It is not compatible with Vue 2 projects. Projects migrating from `rollup-plugin-vue@5` or earlier must upgrade their Vue project to Vue 3.

fix

Ensure your project uses Vue 3 and `@vue/compiler-sfc` version compatible with Vue 3.

affects: >=6.0.0

gotcha`@vue/compiler-sfc` is a required peer dependency. If not installed, the plugin will fail with module not found errors. Ensure its version is compatible with your Vue 3 installation.

fix

Install `@vue/compiler-sfc` manually: `npm install @vue/compiler-sfc` or `yarn add @vue/compiler-sfc`.

affects: >=6.0.0

gotchaThe `target` option (`'node'` or `'browser'`) is critical for correct compilation. Using `'node'` for client-side builds can lead to browser-incompatible output, especially for SSR-related code.

fix

Set `target: 'browser'` for client-side applications and `target: 'node'` for server-side rendering builds.

affects: >=6.0.0

gotchaThe `exposeFilename` option adds a `__file` property to components for better debugging in development. This can slightly increase bundle size and should typically be disabled for production builds.

fix

Ensure `exposeFilename: false` or omit the option in production Rollup configurations.

affects: >=6.0.0

gotchaThe `preprocessStyles` option, when `true`, delegates style preprocessing to `rollup-plugin-vue` itself. If you're using other Rollup plugins for CSS preprocessing (e.g., `rollup-plugin-scss`), this could lead to conflicts or double processing.

fix

Carefully consider whether `preprocessStyles` should be `true` or `false` based on your overall Rollup style processing setup. Typically, you'd use one or the other.

affects: >=6.0.0

Errors

Common errors & fixes

Error: Cannot find module '@vue/compiler-sfc'

The `@vue/compiler-sfc` package is a peer dependency and was not installed in the project.

fix

Install the peer dependency: `npm install @vue/compiler-sfc` or `yarn add @vue/compiler-sfc`.

Error: [rollup-plugin-vue] compiler.parse is not a function

There is a version mismatch between `rollup-plugin-vue` and `@vue/compiler-sfc`, or an incorrect version of `@vue/compiler-sfc` is installed (e.g., a Vue 2 compatible version).

fix

Ensure both `rollup-plugin-vue` and `@vue/compiler-sfc` are compatible with Vue 3. Check your `package.json` and `node_modules` for correct versions.

ReferenceError: process is not defined (in browser environment)

The `target` option in `rollup-plugin-vue` was set to `'node'` for a client-side build, leading to the inclusion of Node.js-specific code that cannot run in a browser.

fix

Set `target: 'browser'` in your `rollup-plugin-vue` options for client-side bundles.

Upgrade

Version history

6.0.0latest on npm

Audit

Dependencies

@vue/compiler-sfcrequiredRequired for compiling Vue Single File Components. It's a peer dependency and must be installed manually.

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/rollup-plugin-vue ↗