https://github.com/privatenumber/htmlvue-loader
Webpack loader for compiling HTML to Vue
https://github.com/privatenumber/htmlvue-loader
html loader svg transformation vue webpack webpack-loader
Last synced: over 1 year ago
JSON representation
Webpack loader for compiling HTML to Vue
- Host: GitHub
- URL: https://github.com/privatenumber/htmlvue-loader
- Owner: privatenumber
- License: mit
- Created: 2018-09-27T20:05:34.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-05T17:00:19.000Z (about 5 years ago)
- Last Synced: 2025-02-16T16:01:45.589Z (over 1 year ago)
- Topics: html, loader, svg, transformation, vue, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 390 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# htmlvue-loader 
Webpack loader for compiling HTML to Vue
## :raising_hand: Why?
- 🚰 **Pipes to `vue-loader`** and doesn't depend on `vue-template-compiler`
- ✍️ **Supports SVG** and any other XML format!
- ♻️ **Reusability** Preserve HTML/SVG files for reusability
- ⚙️ **Configurable** Add `v-pre`, `v-once` directives and transformers
- 🔥 **Fast** Only does the bare minimum
## :rocket: Quick setup
### Install
```sh
npm i -D htmlvue-loader
```
### Add to your Webpack config
Insert `vue-loader` above it to compile it as a Vue component.
```js
...
module: {
rules: [
...,
{
test: /\.(html|svg)$/,
use: [
'vue-loader',
'htmlvue-loader'
]
}
]
}
...
```
## ⚙️ Options
- `vPre` ``
Adds [`v-pre`](https://vuejs.org/v2/api/#v-pre) to the root element.
> Skip compilation for this element and all its children. You can use this for displaying raw mustache tags. Skipping large numbers of nodes with no directives on them can also speed up compilation.
- `vOnce` ``
Adds [`v-once`](https://vuejs.org/v2/api/#v-once) to the root element.
> Render the element and component **once** only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.
- `transform` ``
A function to transform the html string. If you're using a component in the transformation and you'd like to register it, declare it in `transform.components`.
```js
transform: {
transformer: svg => `${svg}`,
components: {
RandComp: './rand-comp.vue'
}
}
```