vuejs / vue-hot-reload-api

🌶️ Hot reload API for Vue components

vue-hot-reload-api

Note: [email protected] only works with [email protected]

Hot reload API for Vue components. This is what vue-loader and 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.

// 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

vue-hot-reload-api's Issues

How to keep custom properties when reloading components

When the component is reloaded, I expect to keep the custom properties.
Can we add logic here: vue-hot-reload-api/blob/master/src/index.js#L91?

injectHook(options, initHookName, function() {
  var record = map[id]
  if (!record.Ctor) {
    record.Ctor = this.constructor
  }
+ // keep the custom properties example
+ if (!this.$ls && record?.instances?.length > 0 && record.instances[0].$ls) {
+   this.$ls = record.instances[0].$ls
+ }
  record.instances.push(this)
})

Or have other schemes, please tell me.

Cannot read property '_lifecycleHooks' of undefined

I've updated my project dependencies and now I'm getting this error from vue-hot-reload-api:

Uncaught TypeError: Cannot read property '_lifecycleHooks' of undefined
    at Object.exports.install (eval at ./node_modules/vue-hot-reload-api/index.js (app.js:1381), <anonymous>:15:17)
    at eval (eval at ./src/App.vue (app.js:1473), <anonymous>:18:10)
    at eval (eval at ./src/App.vue (app.js:1473), <anonymous>:26:3)
    at Object../src/App.vue (app.js:1473)
    at __webpack_require__ (app.js:660)
    at fn (app.js:84)
    at eval (eval at ./src/main.js (app.js:1489), <anonymous>:3:67)
    at Object../src/main.js (app.js:1489)
    at __webpack_require__ (app.js:660)
    at fn (app.js:84)

App.vue has just this content:

<template></template>

main.js has just this content (the Vue instance isn't even being mounted):

import Vue from 'vue'
import App from './App.vue'

I'm using webpack-dev-server and the error only happens when devServer.hot is true and the plugin webpack.HotModuleReplacementPlugin is used.

It should actually do a full reload when it's required, not just reporting a need

I think it should actually do a full reload when it's required, not just reporting a need because it's really simple to miss the report among other HMR/app's messages. If making it a default behaviour is too much, an option would suffice.

vue-hot-reload-api/src/index.js

Lines 122 to 125 in 45936fb

	console.warn(
	'Something went wrong during Vue component hot-reload. Full reload required.'
	)
	}

vue-hot-reload-api/src/index.js

Lines 246 to 248 in 45936fb

	console.warn(
	'Root or manually mounted instance modified. Full reload required.'
	)

To anyone who also think so, you can use this snippet until the option is introduce or the default behaviour is changed:

// webpack.config.js
const VueReload = require('../plugins/vue-reload')

module.exports = {
  plugins: [new VueReload()]
}

// vue-reload.js
module.exports = class VueReloadPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('VueReloadPlugin', compilation => {
      compilation.hooks.processAssets.tap({ name: 'VueReloadPlugin', stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS  }, () => {
        const patched = []

        for (const chunk of compilation.chunks) {
          const anyVueModules = chunk.getModules().some((module) => /\.vue/.test(module.resource))
          if (!anyVueModules) {
            continue
          }

          for (const file of chunk.files) {
            const isJSFile = /\.js/.test(file)
            if (!isJSFile) {
              continue
            }

            compilation.updateAsset(file, (input) => {
              // the \\n part is necessary in case the source code is turned into an eval string
              const re = /(console\.warn\([\s\\n]*['"](?:Something went wrong during Vue component hot-reload.|Root or manually mounted instance modified.) Full reload required.['"][\s\\n]*\))/g
              const matches = Array.from(input.source().matchAll(re))
              if (matches.length === 0) {
                return input
              }

              const output = new ReplaceSource(input)
              for (const match of matches) {
                const position = match.index + match[1].length
                output.insert(position, ';window.location.reload();')
              }

              patched.push(file)
              return output
            })
          }
        }

        if (patched.length !== 0) {
          console.info('vue-reload-plugin: patched', patched.join(', '))
        }
      })
    })
  }
}

Error when using with SSR

/Users/cmseguin/dev/git/home-controller/node_modules/vue-hot-reload-api/dist/index.js:3
var map = (window.__VUE_HOT_MAP__ = Object.create(null))
                                  ^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/cmseguin/dev/git/home-controller/node_modules/vue-hot-reload-api/dist/index.js:3:35)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at $serverRequire (/Users/cmseguin/dev/git/home-controller/dist/server.js:2198:22)
    at $getRef (/Users/cmseguin/dev/git/home-controller/dist/server.js:2230:20)

I believe a simple check on the window should fix that issue

Hot reload not working with global functional components

test.vue

<template functional>
    <div>example</div>
</template>

main.js

import test from 'test.vue'

Vue.component('test', test)

App.vue

<template>
    <div>
         <test />
    </div>
</template>

If i changing test.vue file - hot reload won't works.
As i can see this is because Vue.component creates new options object, but hot reload stores original component object

if i adds something like this:

function makeOptionsHot(id, options) {
  if (options.functional) {
    var render = options.render
    options.render = function (h, ctx) {
+     var record = map[id]
+     if (record.options !== ctx.$options) {
+         record.options = ctx.$options
+     }
      var instances = map[id].instances
      if (ctx && instances.indexOf(ctx.parent) < 0) {
        instances.push(ctx.parent)
      }
      return render(h, ctx)
    }

all works as expected

rerender vs reload

I'm trying to get vue-hot-reload-api working with SystemJS instead of Webpack. Currently if I call api.reload, it doesn't seem to re-render the component, at least if only the render function has changed. Instead it only re-renders the parent, not the changed component. Is this correct? vue-loader seems to only ever call reload though.

Should I call both reload and rerender to make sure the component updates completely?

I'm modifying a component App mounted like this:

new Vue({
	el: '#app',
	components: { App },
	render: (h) => h('app')
});

When this API calls instance.$parent.$forceUpdate() here, it seems to decide here that it got back the same vnode as earlier and doesn't render it again.

Maximum call stack size exceeded

HMR will succeed with webpack-dev-server, but I get an error.

I have a problem whith vue-hot-reload-api

when i npm update and npm run dev

i have err

i print vue.__esMoudule and it is undefined and next vue.version is undefined.
how can i do?

Support for Vue 2.5+ with Typescript?

Hi, I'm trying to add hot reload capability to my Vue 2.5 project with Typescript. I'm using Vue.extend() to define new components and they're not ComponentOptions type any more, and so the Usage documentation with the ComponentOptions instances seems to not apply any more. Is it possible to enable hot reload for components defined with Vue.extend()?

Hot reload and memory leak (functional components)

Version:

v2.3.4

How to reproduce:

Just comand+c & comand-v in your terminal: (ctrl+c & ctrl+v / copy & past)

vue create -d -n vue-memory-leak-functional;
cd vue-memory-leak-functional;
yarn;
# create Functional.vue
echo "<script>
  export default {
    name: 'Functional',
    functional: true,
    render(createElement) {
      return createElement('div', 'HelloWorld');
    }
  }
</script>" > src/components/Functional.vue

# create JustComponent.vue
echo "<template>
  <div>
    <functional v-for=\"i in 100\" :key=\"i\" />
  </div>
</template>
<script>
import Functional from \"./Functional\";
export default {
  name: 'JustComponent',
  components: { Functional },
}
</script>" > src/components/JustComponent.vue

# update HelloWorld.vue
echo "<template>
  <div>
    <just-component v-if=\"show\" />
  </div>
</template>
<script>
import JustComponent from \"./JustComponent\";
export default {
  name: 'HelloWorld',
  components: {JustComponent},
  data() {
    return {
      show: true
    }
  },
  created() {
    setInterval(()=>{
      this.show = \!this.show;
    }, 1000);
  },
}
</script>" > src/components/HelloWorld.vue
yarn serve;

after that open devtool > more tools > performance monitor

Hot reloading of extended components doesn't work when base component changes

I have a 'child' component that extends a 'base' component, using the property 'extends'.
However, when I edit the HTML or change the data of the base component and save the file, the child component gets overwritten completely with the contents of the base component by the hot reload, and there's no way to get the child back other than hard reloading the page.

Is this a known issue or a bug?

SSR support

When using the plugin in SSR application there is window is not defined issue at index.js:3.

What about fixing it with changing this:

var map = window.__VUE_HOT_MAP__ = Object.create(null)

to:

var map = (typeof window !== 'undefined'
    ? (window.__VUE_HOT_MAP__ = Object.create(null))
    : Object.create(null))

Then, Server-Side Rendering would be work fine.

P.S. @yyx990803, if you prefer, I could submit PL for that.

同时直接使用 vue & vuex 外链时候 报错 "$store" is not defined

[email protected] / [email protected] 同时使用 script 标签引入时候，发现报错

而报错 vue.js 来源于 node_modules，请问外链引入的 Vue 对象为何错误发生在 node_modules 上的？

实验1 换为同时 import vue & vuex 则没有出现这样的错误
实验2 换为旧版本 vue-hot-reload-api 也没有出现这样的错误，但热加载不了
实验3 禁止 webpack 热加载，同时外链，也没有出现这样的错误

Handle custom option merge strategies

After the initial createRecord call, a Ctor will be created and cached without custom option merge strategies.
e.g. vuejs/vue#6609

Can we skip Vue.extend(options) in createRecord if there's a custom option/hook in mixins?

Initial data lost in component when updating a mixin

Version

• vue-hot-reload-api 2.2.0

Reproduction link

https://github.com/Awea/issue-vue-hot-reload-api-mixins

Steps to reproduce

Try comment/uncomment:

// src/mixins/my-mixin.vue#L20-22
foo(){
  console.log('bar')
}

What is expected ?

I expect that HelloWorld component will have his data.internalData set to 'Some stuff'.

What is actually happening?

When a Mixin is updated the Component that use it lost his initial data.

How to use hot reload ?

hi, i installed vueify and i saw this package installed.
How to use it ?

regards

No reactivity with data from websocket when using npm run serve

I happen to have a strange issue and I think it is related to 'npm run serve'.

I implemented two apps a and b, both of them get async data from a websocket and put them in a javascript object which is later used in vue (as a reactive property). I don't know what caused it but now app a is running as usual while app b is not updating the UI with the reactive data. I checked this multiple times. Both apps use the same dependencies and libraries, just visualize them differently.

When I then build App b and start it from a webserve it works like a charm again.

So i narrowed it down to 'npm run serve' and maybe to this plugin. Has anyone experiences something similiar?

'vue info' is giving me the following:

System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
  Binaries:
    Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
    Yarn: Not Found
    npm: 8.1.0 - /usr/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 94.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.15 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.15 
    @vue/cli-plugin-babel: ~4.5.15 => 4.5.15 
    @vue/cli-plugin-eslint: ~4.5.15 => 4.5.15 
    @vue/cli-plugin-router: ~4.5.15 => 4.5.15 
    @vue/cli-plugin-typescript: ~4.5.15 => 4.5.15 
    @vue/cli-plugin-unit-mocha: ~4.5.15 => 4.5.15 
    @vue/cli-plugin-vuex:  4.5.15 
    @vue/cli-service: ~4.5.15 => 4.5.15 
    @vue/cli-shared-utils:  4.5.15 
    @vue/component-compiler-utils:  3.2.2 
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2 
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils: ^1.0.3 => 1.2.2 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    typescript: ^4.1.6 => 4.1.6 
    vue: ^2.6.14 => 2.6.14 
    vue-chartjs: ^3.5.1 => 3.5.1 
    vue-class-component: ^7.2.3 => 7.2.6 
    vue-cli-plugin-i18n: ~2.3.1 => 2.3.1 
    vue-cli-plugin-vuetify: ~2.4.3 => 2.4.3 
    vue-eslint-parser:  7.11.0 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.26.7 => 8.26.7 
    vue-i18n-extract:  1.0.2 
    vue-loader:  15.9.8 (16.8.1)
    vue-property-decorator: ^9.1.2 => 9.1.2 
    vue-router: ^3.2.0 => 3.5.2 
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.11 => 2.6.14 
    vue-template-es2015-compiler:  1.9.1 
    vuetify: ^2.5.14 => 2.5.14 
    vuetify-loader: ^1.7.0 => 1.7.3 
  npmGlobalPackages:
    @vue/cli: Not Found

Possible to set this up when use Vue with Vanilla JS (not .vue)

Hey I recently posted an issue on vue-router about not being able to properly hot reload vue components with Vanilla JS (at the time I thought it was vue-router).

I have a demo repo here that demonstrates the problem but I will quickly explain it here also.

Basically I am using Vue without .vue files this is simply because I find my workflow (syntax highlighting, how I structure my SASS, etc...) works better using Vanilla JS files. I am requiring .html files using the webpack html-loader as the component template like so:

export default {
    name: 'Home',
    // ...
    template: require('./Home.html')
}

<!-- Home.html -->
<div>
    <p>
        <router-link to="/test-one">Test One</router-link>
    </p>
    <p>
        <router-link to="/test-two">Test Two</router-link>
    </p>
</div>

Is there a way I can set up the vue-hot-reload-api to work with this?

peerinvalid The package [email protected] does not satisfy its siblings

Error

npm ERR! Linux 4.4.0-36-generic
npm ERR! argv "/data/settings/.config/fnm/bin/node" "/home/ed8/.config/fnm/bin/npm" "install"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants vue-hot-reload-api@^1.2.0

Package.json

Only devDependencies

{
    "vue": "^1.0.26",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-i18n": "^4.5.0",
    "vue-loader": "^8.5.2",
    "vue-router": "^0.7.13",
    "vue-style-loader": "^1.0.0",
    "vuex": "^1.0.0-rc.2",
}

v2.1.1 cause throw error：[vuex] Do not mutate vuex store state outside mutation handlers

i upgrade vue-loader to "13.3.0",my project throw error(vuex options:{strict:true}):
[vuex] Do not mutate vuex store state outside mutation handlers.

it give me nothing useful info,so my only work is to recover the previous git version and analyze it.
my project work fine for long time,except updage package,i change nothing.
i analyze the vue-loader and its dependencies(vue-hot-reload-api,and so on),and replace with previous version,finally i find the [email protected] is the last work fine version.
i really do not know where my code cause this problem,so has no Reproduction Step.
i think it maybe relate to vue-router,because the error was throw after click menu,and because the error trace tell me it begin from vue-router.esm.js(function extracetGuard)

but i promise if i replace [email protected] to [email protected],all work fine.
and i also expect the vuex can throw more useful info to help me locate my problem

热部署时，同类型vue组件顺序修改与不同类型vue组件顺序修改，对于$children产生效果不同

同类型vue组件顺序修改，$children中vueComponent顺序发生修改
不同类型vue组件顺序修改时，$children中vueComponent顺序不发生修改
虽然vue文档中明确指出$children不保证顺序
但是还是希望能统一对于$children产生的效果

巨人稍稍动动手指 肩膀上的普通人将感激涕零

HMR with inline-template bindings doesn't seem to work

Sample code:

export const foo = {
    template: "",

    data: () => ({
        visible: false
    }),

    methods: {
        toggle: function() { 
            this.visible = !this.visible; 
        }
    }
};

<foo inline-template>
    <div>
        <button v-on:click="toggle"></button> 
        <div v-bind:class="{visible: visible}">
            bar
        </div>
    </div>
</foo>

import { foo } from "./foo";

if (module.hot) {
    const api = require("vue-hot-reload-api");

    api.install(Vue);

    if(!module.hot.data) {
        api.createRecord("foo-id", foo);
    } else {
        api.reload("foo-id", foo);
    }

    module.hot.accept();
}

const app = new Vue({
    el: "#app",

    components: {
        "foo": foo
    }
});

After a hot reload the HTML bindings seem to be lost. The html is served from a server and bound on the client. Is there a way to make that work with hot reloading? I'm trying out a progressive enhancement approach.

Thank you in advance!

VueRouter beforeRouteEnter hook data changes are not reloaded

Hi,

thanks for your work on hot reload!

I'm using vue-hot-reload-api implicitly with webpack dev server and vue-loader. When introducing vue-router into the mix and declaring a beforeRequestEnter hook, hot reloading does not work.

Expected behaviour

Hot reloading should reload data set by vue-routers beforeRequestEnter hook as well.

Actual behaviour

The beforeRequestEnter hook is executed, but the data set on the instance is not reloaded.

Steps to reproduce

Clone https://github.com/stoically/vue-router-hot-reload-issue (based on vue init webpack-simple)
npm install
npm run dev
Navigate to http://localhost:8080
You'll see Message from VueRouter: beforeRouteEnter
Now make a change in the src/Router.vue file
Message changes to Message from VueRouter: data

Notes

I'm actually not sure if this is expected behaviour. But if it is I would appreciate any pointers on how to achieve hot reloading in this case manually.

Best regards

Component extends another component lost its extended methods after hot reload

Description

Component A is defined in a .vue file, and component B is defined in a .js file that extends A. After changing the <script> section of A, B is reloaded but it lost what is extended (for the example below, test() will be gone).

import Vue from 'vue'
import component from './component'

export default Vue.extend({
  extends: component,
  methods: {
    test () {           // test will be lost!
      alert('test!')
    }
  }
})

What is expected

Component B is correctly reloaded.

Reproduction repo

https://github.com/hjkcai/vue-hot-reload-api-issue

Reproduction steps

Edit changeThis() method or any part of the <script> section in component.vue. The console will show the error after hot reload.

What I have found

I tried to step into vue-hot-reload-api to find out this question. It seems that component A and B share the same entry in the map object, which means they have the same data ID (data-v-xxxxxx). After hot reload, the constructor of B is recreated with the options of A. Maybe that is why component B is reloaded without its own methods?

Using hot reload for plain es6 components (non-functional)

@yyx990803 Please, look at
vuejs/vue-loader#461
for details

Reload with VueComponent instead of ComponentOptions

VueJS supports typescript but working with typescript we have to sacrifice HMR.

I was wondering if it was possible to make this API work with the VueComponent instead of the VueJS options. I don't understand VueJS internals enough to see if there is a solution here to create a loader that would allow me to add HMR to typescript files exporting VueComponent objects.

Here is my sample code where I try to use HMR directly.

import Vue from 'vue'
import { Component, prop } from 'vue-property-decorator'
import api from 'vue-hot-reload-api'

@Component({
    template: `
        <div>
            <h1>Hello {{ name }}</h1>
            <p>This component</p>
        </div>`
})

export default class HelloWord extends Vue{
    @prop(String)
    name: String

    greet () {
        console.log('Welcome' + this.name)
    }
}

// HMR for this specific component
if (module.hot) {
  api.install(Vue)
  if (!api.compatible) {
    throw new Error('vue-hot-reload-api is not compatible with the version of Vue you are using.')
  }
  module.hot.accept()
  if (!module.hot.data) {
    api.createRecord('my-helloword-component', HelloWord) // HelloWord is a function VueComponent(){}
  } else {
    api.reload('my-helloword-component', HelloWord)
  }
}

Changes not auto reload

Using Vuejs 1.0.26 with webpack.

I have the vue hot reload installed:

"vue-hot-reload-api": "^2.0.6"

Then I start the webpack dev server, and able to view the page sing http://localhsot:8080:

webpack-dev-server --inline --hot

Page changes is not auto reload, I have to run webpack command to see the changes.

I saw many sample on the internet is using Vuejs 1, or this only work with Vujs 2?

TypeError: Cannot read property 'extend' of undefined

This happens every time to me when component is reloaded:

TypeError: Cannot read property 'extend' of undefined
    at VM93425 main.js:28952
    at Object.reload (VM93425 main.js:28860)
    at VM93425 main.js:43826
    at Object../src/agilecards/components/edit-settings/TemplateScopeSelector.vue (VM93425 main.js:43831)
    at __webpack_require__ (VM93425 main.js:679)
    at hotApply (VM93425 main.js:608)
    at VM93425 main.js:290
    at <anonymous>

Stack trace is not very helpful, but I tracked this exception to line 196:

const newCtor = record.Ctor.super.extend(options)

Looks like super does not exist in Ctor (and Ctor is the Vue constructor function). I'm using Vue 2.5.2.

Static nodes not being hot reloaded

Add comment to one line of example

Hello,

I was reading the Usage section of the README.md file and one line lack a comment :

if (!module.hot.data) {

I have no ideea what this line does. I checked the WebPack HMR API doc and found one occurence of this property (https://webpack-v3.jsx.app/api/hot-module-replacement/):

This object will be available at module.hot.data after the update.

But it doesn't explain what's its purpose and what checking its existence implies.

Adding a comment to this line may help futur reader.

Cannot read property 'split' of undefined

Hi, with use a last webpack & vue, after yarn command, vue-hot-reload-api will break code execution in attempt to get Vue version:

If I use an old node_modules codebase — all works fine. What is wrong?

In debugger you can see what Vue version was inside vue.default:

My package.json

{
  "name": "trol-front",
  "version": "0.1.0",
  "description": "",
  "main": "client/index.js",
  "scripts": {
    "start": "node start.js",
    "api": "cd json && json-server --watch db.json --port 8008 --routes routes.json",
    "dev": "node build/server.js",
    "build": "webpack --config build/webpack.prod.js",
    "dev:menu": "node build/server.js MENU",
    "build:menu": "NODE_ENV=production webpack --config build/webpack.prod.menu.js",
    "menu": "cd dist-menu && python -m SimpleHTTPServer 4000 && echo 'http://localhost:4000/'",
    "lint": "eslint client/* --ext .js --ext .vue",
    "test": "echo lol"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.15.3",
    "babel-polyfill": "^6.23.0",
    "vue": "^2.2.1",
    "vue-router": "^2.0.0",
    "vue-template-compiler": "^2.2.1",
    "vuex": "^2.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.16.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-syntax-jsx": "^6.13.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.1.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-2": "^6.13.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^2.0.0",
    "css-loader": "^0.23.1",
    "css-mqpacker": "^5.0.1",
    "es6-promise": "^4.0.5",
    "eslint": "^3.6.0",
    "eslint-config-vue": "latest",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "fs-extra": "^0.30.0",
    "html-webpack-plugin": "^2.22.0",
    "http-proxy-middleware": "^0.17.3",
    "json-server": "^0.9.4",
    "lodash": "^4.17.4",
    "moment": "^2.17.1",
    "node-sass": "^4.0.0",
    "postcss-loader": "^1.2.0",
    "progress-bar-webpack-plugin": "^1.9.0",
    "sass-loader": "^4.0.2",
    "static-loader": "^0.1.8",
    "style-loader": "^0.13.1",
    "vue-loader": "^10.0.2",
    "webpack": "2.1.0-beta.22",
    "webpack-dev-middleware": "^1.8.1",
    "webpack-hot-middleware": "^2.12.2"
  }
}

hot reload clearing data

I'm trying to make quasar-framework and vuefire work together but my data gets cleared after each hot reload. Quasar-framework suggested to open an issue here. Is this something that can be fixed in your source code?

More info:
quasarframework/quasar#87
vuejs/vuefire#29

rerender throws an exception when component options are missing a render function

Hi everyone, I'm having an issue with rerender.

In the readme.md file, you provided a sample component options.

const myComponentOptions = {
  data () { ... },
  created () { ... },
  render () { ... }
}

However, my object does not have a render function. It's using a template, instead. Here's a sample:

const componentOptions = {
  data() { return { foo: 'bar' }; },
  template: '<div>foo value is: {{ foo }}</div>'
};

When I try to rerender it, an exception occurs because the render function is missing.

The reload method is working perfectly fine though.

Here's a repro:
https://github.com/BrightSoul/vue-hot-reload-api-issue-repro

I am aware that an easy solution to this is to just rewrite my component options like this:

const componentOptions = {
  data() { return { foo: 'bar' }; },
  ...Vue.compile('<div>foo value is: {{ foo }}</div>')
};

But I was wondering whether the difference in behavior between reload and rerender is intended or not.

[Bug] Cannot create property 'xxx' on boolean 'true' with Vue 2.6.7

After update to Vue 2.6.7 I get the following error when hot reloading a component with scoped slots.

TypeError: Cannot create property 'items' on boolean 'true'
    at resolveScopedSlots (vue.runtime.esm.js?2b0e:2890)

I traced it back to https://github.com/vuejs/vue-hot-reload-api/blob/master/src/index.js#L259 which passes res=true to the resolveScopedSlots function:

https://github.com/vuejs/vue/blob/v2.6.7/src/core/instance/render-helpers/resolve-scoped-slots.js#L20

This works fine on Vue 2.6.6.

State not preserved during HMR when <script> is changed

I have tried the browserify and the webpack templates using vue-cli. In both cases, the state is preserved during HMR when I change the template portion, but not when I change the script portion of the *.vue file.

To reproduce:

• modify src/components/Hello.vue of the vue-cli created example:

<template>
  <div id="hello">
    <h1>{{ count }}</h1>
    <button v-on:click='inc'>inc</button>
    <button v-on:click='count -= 1'>dec</button>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () { return { count: 1 } },
  methods: { inc: function() { this.count += 1} }
}
</script>

• run the example with npm run dev
• press 'inc' a few times to change the state
• change count -= 1 to count -= 2 in the template part
  • after HMR, the counter value is preserved
• change count += 1 to count += 2 in the script part
  • after HMR, the counter value is reset to 1

Tested on: Chrome & Firefox on macOS & Windows

An example project using Vue.js 1.0 and the associated vueify+template I've created a few weeks ago preserves the state in both cases.

please add tags for releases

This repo is missing tags corresponding to npmjs.com releases. Please add them. We like to take github tarballs for creating debian packages (to include tests and also sometimes to use the real/non-transpiled/non-minified source).