{"id":12494,"library":"vue-hot-reload-api","title":"Vue Hot Reload API","description":"vue-hot-reload-api is a foundational utility designed to provide the core API for hot module replacement (HMR) within Vue 2.x applications. It serves as an internal dependency for higher-level build tools like `vue-loader` and `vueify`, enabling developers to update Vue components in the browser without a full page reload, thereby preserving application state during development. The package's current stable version is 2.3.4, with releases primarily focusing on compatibility fixes for the Vue 2.x ecosystem. It is critically important to note that this package is strictly tied to Vue 2.x; it offers no support for Vue 3 or later versions, which have their own integrated HMR mechanisms. Therefore, its utility is confined to legacy Vue 2 projects. Application developers generally do not interact with this package directly but rather benefit from its functionality through their chosen build setup. Its release cadence is infrequent, reflecting its mature status within a specific, older framework version.","status":"maintenance","version":"2.3.4","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vue-hot-reload-api","tags":["javascript","vue","hot","reload"],"install":[{"cmd":"npm install vue-hot-reload-api","lang":"bash","label":"npm"},{"cmd":"yarn add vue-hot-reload-api","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-hot-reload-api","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for installation and compatibility checks with Vue 2.x.","package":"vue","optional":false}],"imports":[{"note":"The package is primarily CommonJS; direct ESM default import may not work without bundler configuration.","wrong":"import api from 'vue-hot-reload-api'","symbol":"api","correct":"const api = require('vue-hot-reload-api')"},{"note":"For named methods, destructuring from the CommonJS require call is the correct approach.","wrong":"import { install } from 'vue-hot-reload-api'","symbol":"install","correct":"const { install } = require('vue-hot-reload-api')"},{"note":"Similar to 'install', use destructuring for other core functions like 'createRecord', 'rerender', and 'reload'.","wrong":"import { createRecord } from 'vue-hot-reload-api'","symbol":"createRecord","correct":"const { createRecord } = require('vue-hot-reload-api')"}],"quickstart":{"code":"const myComponentOptions = {\n  data () { return { msg: 'Hello' } },\n  created () { console.log('Component created!') },\n  render (h) { return h('div', this.msg) }\n}\n\n// assuming Webpack's HMR API.\n// https://webpack.js.org/guides/hot-module-replacement/\nif (module.hot) {\n  const api = require('vue-hot-reload-api')\n  const Vue = require('vue')\n\n  // make the API aware of the Vue that you are using.\n  // also checks compatibility.\n  api.install(Vue)\n\n  // compatibility can be checked via api.compatible after installation\n  if (!api.compatible) {\n    throw new Error('vue-hot-reload-api is not compatible with the version of Vue you are using.')\n  }\n\n  // indicate this module can be hot-reloaded\n  module.hot.accept()\n\n  if (!module.hot.data) {\n    // for each component option object to be hot-reloaded,\n    // you need to create a record for it with a unique id.\n    // do this once on startup.\n    api.createRecord('very-unique-id', myComponentOptions)\n  } else {\n    // if a component has only its template or render function changed,\n    // you can force a re-render for all its active instances without\n    // destroying/re-creating them. This keeps all current app state intact.\n    api.rerender('very-unique-id', myComponentOptions)\n\n    // --- OR ---\n\n    // if a component has non-template/render options changed,\n    // it needs to be fully reloaded. This will destroy and re-create all its\n    // active instances (and their children).\n    api.reload('very-unique-id', myComponentOptions)\n  }\n}","lang":"javascript","description":"Demonstrates how to initialize the hot-reload API, install it with Vue, and implement hot reloading for a component's template (rerender) or full options (reload) within a Webpack HMR context."},"warnings":[{"fix":"Ensure your project explicitly uses Vue 2.x if this package is required. For Vue 3, rely on its native HMR support without this package.","message":"This package is strictly compatible only with Vue 2.x. Attempting to use it with Vue 3 or later will result in runtime errors and unexpected behavior as Vue 3 has its own HMR mechanisms.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"For application development, rely on build tools like `vue-loader` which abstract this API. Only use directly if developing a custom Vue 2.x build solution.","message":"This API is designed for underlying build tool implementations (e.g., vue-loader) and is not intended for direct use by application developers. Directly integrating it into application code is generally discouraged.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Always ensure `api.install(Vue)` is the first method called after requiring the module, passing the Vue constructor that your application is using.","message":"Failure to call `api.install(Vue)` with your active Vue instance before using other API methods will lead to runtime errors or incorrect hot-reloading behavior, as the API needs to be initialized with the Vue constructor.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your project uses Vue 2.x. If migrating to Vue 3, this package is not needed as Vue 3 has its own HMR mechanisms.","cause":"The installed Vue version is incompatible with `vue-hot-reload-api` (e.g., Vue 3.x is being used instead of Vue 2.x).","error":"vue-hot-reload-api is not compatible with the version of Vue you are using."},{"fix":"Verify that `api.install(Vue)` is called once at startup, passing the correct Vue constructor instance from your application.","cause":"`api.install(Vue)` was not called or Vue was not correctly passed, leading to the API not being properly initialized.","error":"TypeError: api.createRecord is not a function"}],"ecosystem":"npm"}