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.

60 lines
1.9 KiB

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