vue.js html loader,vue-html-loader

vue template loader for webpack

vue-html-loader

This is a fork of html-loader with some modifications for handling Vue templates.

Config

You can config the loader's behavior by adding an html field under vue in your webpack config:

// webpack.config.js

module.exports = {

// ...

vue: {

html: {

// all loader queries can be specified here

// also, you can specify options for htmlMinifier here.

}

}

}

Original README below

Exports HTML as string. HTML is minimized when the compiler demands.

By default every local is required (require("./image.png")). You may need to specify loaders for images in your configuration (recommended file-loader or url-loader).

You can specify which tag-attribute combination should be processed by this loader via the query parameter attrs. Pass an array or a space-separated list of : combinations. (Default: attrs=img:src)

To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in attrs=false.

Usage

Examples

With this configuration:

{

module: { loaders: [

{ test: /\.jpg$/, loader: "file-loader" },

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

]},

output: {

publicPath: "http://cdn.example.com/[hash]/"

}

}

require("html!./fileA.html");

// => ''

require("html?attrs=img:data-src!./file.html");

// => ''

require("html?attrs=img:src img:data-src!./file.html");

require("html?attrs[]=img:src&attrs[]=img:data-src!./file.html");

// => ''

require("html?-attrs!./file.html");

// => ''

/// minimized by running `webpack --optimize-minimize`

// => ''

'Root-relative' urls

For urls that start with a /, the default behavior is to not translate them.

If a root query parameter is set, however, it will be prepended to the url

and then translated.

With the same configuration above:

require("html!./fileB.html");

// => ''

require("html?root=.!./fileB.html");

// => ''

Interpolation

You can use interpolate flag to enable interpolation syntax for ES6 template strings, like so:

require("html?interpolate!./file.html");

${require('./partials/gallery.html')}

License

Repository

https@github.com:vuejs/vue-html-loader