{"id":26328,"library":"rollup-plugin-htmlvue","title":"rollup-plugin-htmlvue","description":"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.","status":"active","version":"1.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/privatenumber/rollup-plugin-htmlvue","tags":["javascript","rollup","rollup plugin","vue","html","xml","svg","typescript"],"install":[{"cmd":"npm install rollup-plugin-htmlvue","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-htmlvue","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-htmlvue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"rollup-plugin-htmlvue generates a virtual Vue SFC that must be compiled by rollup-plugin-vue; both plugins must be used together.","package":"rollup-plugin-vue","optional":false},{"reason":"Peer dependency; requires Rollup ^4.0.0.","package":"rollup","optional":false}],"imports":[{"note":"ESM-only; default export. Require will fail with ERR_REQUIRE_ESM.","wrong":"const htmlvue = require('rollup-plugin-htmlvue')","symbol":"htmlvue","correct":"import htmlvue from 'rollup-plugin-htmlvue'"},{"note":"Options type is a named export; use with `import type` for correct TypeScript usage.","wrong":"import { Options } from 'rollup-plugin-htmlvue'","symbol":"rollup-plugin-htmlvue (type import)","correct":"import type { Options } from 'rollup-plugin-htmlvue'"},{"note":"The plugin transforms .html files into Vue components after configuration; import paths are relative to the source file, not the package itself.","wrong":"import MyComponent from 'rollup-plugin-htmlvue'","symbol":"Vue SFC (via HTML import)","correct":"import MyComponent from './my-component.html'"}],"quickstart":{"code":"// rollup.config.js\nimport vue from 'rollup-plugin-vue'\nimport htmlvue from 'rollup-plugin-htmlvue'\n\nexport default {\n  input: 'src/main.js',\n  output: {\n    dir: 'dist',\n    format: 'esm'\n  },\n  plugins: [\n    vue(),\n    htmlvue()\n  ]\n}\n\n// src/MyButton.html\n<template>\n  <button>Click me</button>\n</template>\n\n// src/main.js\nimport MyButton from './MyButton.html' // Vue SFC as default export\nconsole.log(MyButton) // Component object","lang":"javascript","description":"Shows minimal Rollup config to use htmlvue with vue plugin, and how to import an HTML file as a Vue component."},"warnings":[{"fix":"Use import syntax or set type: 'module' in package.json.","message":"The plugin is ESM-only; attempts to require() it will fail.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Wrap multiple elements in a single parent <div> or <template>.","message":"Template in the HTML file must contain exactly one root element; otherwise Vue compilation fails.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure vue() plugin is placed before htmlvue() in the plugins list.","message":"Plugin does not compile Vue SFC itself — requires rollup-plugin-vue to be added before htmlvue in plugins array.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Omit these options when targeting Vue 3, or use Vue 2 documentation for functional components.","message":"Options 'functional' and 'inheritListeners' are only for Vue 2; they are ignored in Vue 3.","severity":"deprecated","affected_versions":">=1.1.0"},{"fix":"Restrict include pattern to .html, .svg, .xml, or custom non-vue extensions.","message":"Including .vue files via include pattern will produce unexpected results because the plugin expects plain HTML/XML, not Vue SFC.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use import syntax: `import htmlvue from 'rollup-plugin-htmlvue'` or switch to ESM (type:\"module\").","cause":"Using require() in a CommonJS context to import rollup-plugin-htmlvue, which is ESM-only.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module not supported"},{"fix":"Add htmlvue() to your Rollup plugins array.","cause":"Rollup cannot parse the .html file because rollup-plugin-htmlvue is not included in plugins list.","error":"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"},{"fix":"Wrap all elements in a single root element, e.g., `<div><!-- content --></div>`.","cause":"The HTML file contains more than one root-level element.","error":"ERROR: The template root requires exactly one element"},{"fix":"Install rollup-plugin-vue: `npm i -D rollup-plugin-vue`.","cause":"rollup-plugin-vue is not installed; it's a required peer dependency.","error":"Module not found: Error: Can't resolve 'rollup-plugin-vue'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}