https://github.com/privatenumber/rollup-plugin-htmlvue

Rollup plugin for transforming HTML/XML to Vue SFC
https://github.com/privatenumber/rollup-plugin-htmlvue

html rollup rollup-plugin svg vue xml

Last synced: 4 months ago
JSON representation

Rollup plugin for transforming HTML/XML to Vue SFC

• Host: GitHub
• URL: https://github.com/privatenumber/rollup-plugin-htmlvue
• Owner: privatenumber
• License: mit
• Created: 2020-07-04T04:43:43.000Z (over 4 years ago)
• Default Branch: develop
• Last Pushed: 2024-01-30T08:00:16.000Z (about 1 year ago)
• Last Synced: 2024-10-11T14:06:46.664Z (4 months ago)
• Topics: html, rollup, rollup-plugin, svg, vue, xml
• Language: TypeScript
• Homepage:
• Size: 444 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/vuejs/rollup-plugin-vue) to handle compilation

- 💫 **Versatile** Supports any XML-parseable markup

## 🙋 Why?

Great for compiling SVG files as Vue.js components.

## 🚀 Install

```sh

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

```

## 🛠 Config

rollup.config.js

```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:

```js

htmlvue({

    include: '**/*.svg'

})

```

## ⚙️ Options

### vPre

Type: `boolean`

Default: `false`

Adds [`v-pre`](https://vuejs.org/v2/api/#v-pre) to the root element.

### vOnce

Type: `boolean`

Default: `false`

Adds [`v-once`](https://vuejs.org/v2/api/#v-once) to the root element.

### functional

Type: `boolean`

Adds [`functional`](https://vuejs.org/v2/api/#functional) to the template to make it a functional component. Only supported in Vue 2.

### inheritListeners

Type: `boolean`

Adds [`v-on="$listeners"`](https://vuejs.org/v2/api/#vm-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](https://github.com/rollup/plugins/tree/master/packages/pluginutils#include-and-exclude).