{"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.","language":"javascript","status":"active","last_verified":"Fri May 01","install":{"commands":["npm install rollup-plugin-htmlvue"],"cli":null},"imports":["import htmlvue from 'rollup-plugin-htmlvue'","import type { Options } from 'rollup-plugin-htmlvue'","import MyComponent from './my-component.html'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}