https://github.com/ktsn/vue-hot-reload-loader

Enable hot module replacement (HMR) on your Vue components
https://github.com/ktsn/vue-hot-reload-loader

hot-module-replacement hot-reload vue webpack webpack-loader

Last synced: 4 days ago
JSON representation

Enable hot module replacement (HMR) on your Vue components

• Host: GitHub
• URL: https://github.com/ktsn/vue-hot-reload-loader
• Owner: ktsn
• License: mit
• Created: 2017-01-11T06:09:00.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-23T01:35:20.000Z (about 6 years ago)
• Last Synced: 2024-08-09T10:51:29.357Z (3 months ago)
• Topics: hot-module-replacement, hot-reload, vue, webpack, webpack-loader
• Language: JavaScript
• Size: 46.9 KB
• Stars: 19
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-hot-reload-loader

Enable hot module replacement (HMR) on your Vue components.

This loader is for Vue components written in `.js` (or other non single file components format) file. If you are using `.vue` file, you don't need this loader because they already have HMR feature.

## Installation

```bash

# NPM

$ npm install --save-dev vue-hot-reload-loader

# Yarn

$ yarn add --dev vue-hot-reload-loader

```

## Usage

You need to update your webpack config to let webpack awere `vue-hot-reload-loader`. Note that you should carefuly set webpack's [rule condition](https://webpack.js.org/configuration/module/#rule-conditions) so that `vue-hot-reload-loader` is only used for actual component files. See [a discussion](https://github.com/ktsn/vue-hot-reload-loader/issues/6).

```js

module.exports = {

  module: {

    rules: [

      {

        test: /\.js/,

        use: ['vue-hot-reload-loader', 'buble-loader'],

        // If and only if all your components are in `path/to/components` directory

        include: path.resolve(__dirname, 'path/to/components')

      }

    ]

  }

}

```

And you have to export each component as default export.

```js

export default {

  data () {

    return {

      message: 'hi'

    }

  }

}

```

## License

MIT