htmlvue-loader
v1.1.1
Published
Webpack loader for compiling HTML to Vue
Downloads
25
Maintainers
Readme
Webpack loader for compiling HTML to Vue
:raising_hand: Why?
- 🚰 Pipes to
vue-loader
and doesn't depend onvue-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
npm i -D htmlvue-loader
Add to your Webpack config
Insert vue-loader
above it to compile it as a Vue component.
...
module: {
rules: [
...,
{
test: /\.(html|svg)$/,
use: [
'vue-loader',
'htmlvue-loader'
]
}
]
}
...
⚙️ Options
vPre
<Boolean>
Addsv-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
<Boolean>
Addsv-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
<Object|Function>
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 intransform.components
.transform: { transformer: svg => `<rand-comp>${svg}</rand-comp>`, components: { RandComp: './rand-comp.vue' } }