privatenumber / rollup-plugin-htmlvue

Rollup plugin for transforming HTML/XML to Vue SFC

rollup-plugin-htmlvue

Import HTML-snippets and SVGs as Vue components.

Features

• 🔥 Works with Vue 2 & 3 Comiles the HTML to a Vue.js SFC for the Vue plugin to handle compilation
• 💫 Versatile Supports any XML-parseable markup

🙋 Why?

Great for compiling SVG files as Vue.js components.

🚀 Install

npm i -D rollup-plugin-vue rollup-plugin-htmlvue

🛠 Config

rollup.config.js

import vue from 'rollup-plugin-vue'
import htmlvue from 'rollup-plugin-htmlvue'

export default {
    // ...

    plugins: [
        vue(),
        htmlvue(),
    ],
}

By default, it only automatically resolves .html files. To apply it to other extensions:

htmlvue({
    include: '**/*.svg',
})

⚙️ Options

vPre

Type: boolean

Default: false

Adds v-pre to the root element.

vOnce

Type: boolean

Default: false

Adds v-once to the root element.

functional

Type: boolean

Adds functional to the template to make it a functional component. Only supported in Vue 2.

inheritListeners

Type: boolean

Adds v-on="$listeners" to the root element to inherit event listeners. Only supported in Vue 2.

include/exclude

Patterns to identify which files to apply the plugin to. Passed into @rollup/pluginutils.