Registry / web-framework / rollup-plugin-htmlvue

rollup-plugin-htmlvue

library1.2.2jsnpmunverified

Rollup plugin (v1.2.2, last updated Jan 2024) that imports HTML snippets, SVGs, and other XML-parseable markup as Vue single-file components. Works with both Vue 2 and 3 by generating a virtual SFC that is then compiled by rollup-plugin-vue. Key differentiators: supports functional components and v-once/v-pre directives via options; include/exclude patterns using rollup/pluginutils; ships TypeScript types. Unlike generic raw-loaders, this plugin allows using SVG files directly as Vue components with full reactivity support.

web-framework

npm install rollup-plugin-htmlvue

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-HTML

rollup-plugin-htmlvue

web-frameworkjavascriptv1.2.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

htmlvue

✓ import htmlvue from 'rollup-plugin-htmlvue'

✗ const htmlvue = require('rollup-plugin-htmlvue')

ESM-only; default export. Require will fail with ERR_REQUIRE_ESM.

rollup-plugin-htmlvue (type import)

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

✗ import { Options } from 'rollup-plugin-htmlvue'

Options type is a named export; use with `import type` for correct TypeScript usage.

Vue SFC (via HTML import)

✓ import MyComponent from './my-component.html'

✗ import MyComponent from 'rollup-plugin-htmlvue'

The plugin transforms .html files into Vue components after configuration; import paths are relative to the source file, not the package itself.

Shows minimal Rollup config to use htmlvue with vue plugin, and how to import an HTML file as a Vue component.

// rollup.config.js import vue from 'rollup-plugin-vue' import htmlvue from 'rollup-plugin-htmlvue' export default { input: 'src/main.js', output: { dir: 'dist', format: 'esm' }, plugins: [ vue(), htmlvue() ] } // src/MyButton.html <template> <button>Click me</button> </template> // src/main.js import MyButton from './MyButton.html' // Vue SFC as default export console.log(MyButton) // Component object

Debug

Known issues

breakingThe plugin is ESM-only; attempts to require() it will fail.

fix

Use import syntax or set type: 'module' in package.json.

affects: >=1.0.0

gotchaTemplate in the HTML file must contain exactly one root element; otherwise Vue compilation fails.

fix

Wrap multiple elements in a single parent <div> or <template>.

affects: >=1.0.0

gotchaPlugin does not compile Vue SFC itself — requires rollup-plugin-vue to be added before htmlvue in plugins array.

fix

Ensure vue() plugin is placed before htmlvue() in the plugins list.

affects: >=1.0.0

deprecatedOptions 'functional' and 'inheritListeners' are only for Vue 2; they are ignored in Vue 3.

fix

Omit these options when targeting Vue 3, or use Vue 2 documentation for functional components.

affects: >=1.1.0

gotchaIncluding .vue files via include pattern will produce unexpected results because the plugin expects plain HTML/XML, not Vue SFC.

fix

Restrict include pattern to .html, .svg, .xml, or custom non-vue extensions.

affects: >=1.0.0

Errors

Common errors & fixes

Error [ERR_REQUIRE_ESM]: require() of ES Module not supported

Using require() in a CommonJS context to import rollup-plugin-htmlvue, which is ESM-only.

fix

Use import syntax: `import htmlvue from 'rollup-plugin-htmlvue'` or switch to ESM (type:"module").

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Rollup cannot parse the .html file because rollup-plugin-htmlvue is not included in plugins list.

fix

Add htmlvue() to your Rollup plugins array.

ERROR: The template root requires exactly one element

The HTML file contains more than one root-level element.

fix

Wrap all elements in a single root element, e.g., `<div><!-- content --></div>`.

Module not found: Error: Can't resolve 'rollup-plugin-vue'

rollup-plugin-vue is not installed; it's a required peer dependency.

fix

Install rollup-plugin-vue: `npm i -D rollup-plugin-vue`.

Upgrade

Version history

1.2.2latest on npm

Audit

Dependencies

rollup-plugin-vuerequiredrollup-plugin-htmlvue generates a virtual Vue SFC that must be compiled by rollup-plugin-vue; both plugins must be used together.

rolluprequiredPeer dependency; requires Rollup ^4.0.0.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/privatenumber/rollup-plugin-htmlvue ↗

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