Vue Hot Loader

The Vue Hot Loader adds webpack HMR compatibility to your standard JS vue components.

Why

The standard vue-loader is hard to use with standard webpack loaders like the html loader. (If you want to use html interpolation for example.)

This loader only adds HMR capabilities to your normal JS code without the need to override all the loaders you know from other webpack / JS projects.

Usage

Install vue-hot-loader via npm or yarn.

yarn add vue-hot-loader #OR
npm install vue-hot-loader --dev

Add a loader in your webpack configuration.

module.exports = {
    // ...
    loaders: [
        {
            test: /\.vue\.js/,
            loader: 'vue-js',
        },
        // ...
    ],
    // ...
};

Call your vue component files [name].vue.js.

Example component.vue.js:

import template from './component.html';

import './component.less';

export default {
    name: 'component',
    template,
};

PS: This example uses less-loader and vue-html-loader.