vue-hot-loader

Vue.js js component loader for Webpack

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-hot-loader
0.0.47 years ago7 years agoMinified + gzip package size for vue-hot-loader in KB

Readme

Vue Hot Loader
GitHub license Build Status NPM Version
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.