# vue-hot-reload-api

> hot reload api for *.vue components

Latest version **2.3.4** (published 2019-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-hot-reload-api
pnpm add vue-hot-reload-api
yarn add vue-hot-reload-api
bun add vue-hot-reload-api
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.4 |
| Published | 2019-09-11 |
| First published | 2015-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 466 |
| Author | Evan You |
| Maintainers | soda, yyx990803 |
| Keywords | vue, hot, reload |

## Links

- npm: https://www.npmjs.com/package/vue-hot-reload-api
- Repository: https://github.com/vuejs/vue-hot-reload-api
- Homepage: https://github.com/vuejs/vue-hot-reload-api#readme
- Issues: https://github.com/vuejs/vue-hot-reload-api/issues
- npm.io page: https://npm.io/package/vue-hot-reload-api

## Recent versions

- 2.3.4 (latest) — 2019-09-11
- 2.3.3 — 2019-02-22
- 2.3.2 — 2019-02-11
- 2.3.1 — 2018-09-20
- 2.3.0 — 2018-02-21
- 2.2.4 — 2017-11-17
- 2.2.3 — 2017-11-07
- 2.2.2 — 2017-11-07
- 2.2.1 — 2017-11-07
- 2.2.0 — 2017-10-11
- 2.1.1 — 2017-10-03
- 2.1.0 — 2017-04-17
- 2.0.11 — 2017-02-26
- 2.0.10 — 2017-02-23
- 2.0.9 — 2017-02-19
- … 18 more at https://npm.io/package/vue-hot-reload-api/versions

## README

# 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)

---
_Source: https://npm.io/package/vue-hot-reload-api · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._