1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
# vue-hot-reload-api
> Note: `vue-hot-reload-api@2.x` only works with `vue@2.x`
Hot reload API for Vue components. This is what [vue-loader](https://github.com/vuejs/vue-loader) and [vueify](https://github.com/vuejs/vueify) use under the hood.
## Usage
You will only be using this if you are writing some build toolchain based on Vue components. For normal application usage, just use `vue-loader` or `vueify`.
``` js
// define a component as an options object
const myComponentOptions = {
data () { ... },
created () { ... },
render () { ... }
}
// assuming Webpack's HMR API.
// https://webpack.js.org/guides/hot-module-replacement/
if (module.hot) {
const api = require('vue-hot-reload-api')
const Vue = require('vue')
// make the API aware of the Vue that you are using.
// also checks compatibility.
api.install(Vue)
// compatibility can be checked via api.compatible after installation
if (!api.compatible) {
throw new Error('vue-hot-reload-api is not compatible with the version of Vue you are using.')
}
// indicate this module can be hot-reloaded
module.hot.accept()
if (!module.hot.data) {
// for each component option object to be hot-reloaded,
// you need to create a record for it with a unique id.
// do this once on startup.
api.createRecord('very-unique-id', myComponentOptions)
} else {
// if a component has only its template or render function changed,
// you can force a re-render for all its active instances without
// destroying/re-creating them. This keeps all current app state intact.
api.rerender('very-unique-id', myComponentOptions)
// --- OR ---
// if a component has non-template/render options changed,
// it needs to be fully reloaded. This will destroy and re-create all its
// active instances (and their children).
api.reload('very-unique-id', myComponentOptions)
}
}
```
## License
[MIT](http://opensource.org/licenses/MIT)
|
