You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.9 KiB
61 lines
1.9 KiB
4 years ago
|
# 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)
|