by vuejs

🌶️ Hot reload API for Vue components

415 Stars 48 Forks Last release: about 1 year ago (v2.3.4) MIT License 78 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:



[email protected]
only works with
[email protected]

Hot reload API for Vue components. This is what vue-loader and vueify use under the hood.


You will only be using this if you are writing some build toolchain based on Vue components. For normal application usage, just use

// define a component as an options object
const myComponentOptions = {
  data () { ... },
  created () { ... },
  render () { ... }

// assuming Webpack's HMR API. // if ( { 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

if (! { // 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)

} }



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.