Nuxt.js: HMR for vuex store

[uptownhr]

I thought using modules mode will automatically add in the HMR code but found out that it is not.

https://vuex.vuejs.org/en/hot-reload.html

_{This feature request is available on Nuxt.js community (#c276)}

[uptownhr]

any chance this can be included in the 1.0 releåse?

[uptownhr]

if (module.hot) {
  module.hot.accept([
    './modules'
  ], () => {
    store.hotUpdate({
      modules: require('./modules')
    })
  })
}

is what i used in another project of mine. Not sure how difficult it is to inject this into the store template.

[Atinux]

It will be directly in this file @uptownhr https://github.com/nuxt/nuxt.js/blob/master/lib/app/store.js

[Atinux]

HMR for store

[galvez]

@Atinux @clarkdo closable?

[cmty[bot]]

This feature-request has been cancelled by @manniL.

This is already working out of the box

[uptownhr]

What version of nuxt was this from?

On Thu, Aug 9, 2018, 11:18 PM cmty[bot] [e-mail] wrote:

This feature-request https://cmty.app/nuxt/nuxt.js/issues/c276 has been
cancelled by @manniL https://cmty.app/nuxt/manniL.

This is already working out of the box

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/325#issuecomment-411986673, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AA-UtuAbPo_Q9vnfKvVrbpIWP4AtCSmVks5uPSWygaJpZM4MN7_K
.

[manniL]

Not sure when it got implemented exactly, but works in nuxt v1.4.2 and in nuxt-edge

[uptownhr]

Interesting. I noticed it wasn't working on my last project. Maybe it
wasn't fully caught up to 1.4.2 but I thought it was.is there anything
special you have to do or not do for her to work?

On Fri, Aug 10, 2018, 12:16 AM Alexander Lichter [e-mail]
wrote:

Not sure when it got implemented exactly, but works in nuxt v1.4.2 and in
nuxt-edge

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/325#issuecomment-411997378, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AA-UtgoefrmZjH0kRdepf9a2L1GIME1Kks5uPTM-gaJpZM4MN7_K
.

[manniL]

@uptownhr Don't think so. When testing the feature I used the store in modules mode and added a new property to the state :thinking:

[uptownhr]

@manniL I just created a sample project off of, vue init nuxt-community/starter-template <project-name> and created a simple store that looks like,

export const state = () => ({
  hmr: true
})


export const getters = {
  hmr (state) {
    return state.hmr
  }
}

I can confirm that on my machine the HMR does not work.

This is what I see in my browser console.

VM429 vendor.js:19773 Ignored an update to unaccepted module ./store/index.js -> ./store recursive ^\.\/(?!-)[^.]+\.(js)$ -> ./.nuxt/store.js -> ./.nuxt/index.js -> ./.nuxt/client.js -> 0
onUnaccepted @ VM429 vendor.js:19773
hotApply @ VM428 manifest.js:468
cb @ VM429 vendor.js:19817
(anonymous) @ VM429 vendor.js:19833
Promise.then (async)
check @ VM429 vendor.js:19832
webpackJsonp../node_modules/webpack-hot-middleware/process-update.js.module.exports @ VM429 vendor.js:19793
processMessage @ VM429 vendor.js:19716
handleMessage @ VM429 vendor.js:19584
handleMessage @ VM429 vendor.js:19547
VM429 vendor.js:19846 [HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.
logUpdates @ VM429 vendor.js:19846
applyCallback @ VM429 vendor.js:19814
(anonymous) @ VM429 vendor.js:19822
Promise.then (async)
cb @ VM429 vendor.js:19821
(anonymous) @ VM429 vendor.js:19833
Promise.then (async)
check @ VM429 vendor.js:19832
webpackJsonp../node_modules/webpack-hot-middleware/process-update.js.module.exports @ VM429 vendor.js:19793
processMessage @ VM429 vendor.js:19716
handleMessage @ VM429 vendor.js:19584
handleMessage @ VM429 vendor.js:19547
VM429 vendor.js:19854 [HMR]  - ./store/index.js
(anonymous) @ VM429 vendor.js:19854
logUpdates @ VM429 vendor.js:19853
applyCallback @ VM429 vendor.js:19814
(anonymous) @ VM429 vendor.js:19822
Promise.then (async)
cb @ VM429 vendor.js:19821
(anonymous) @ VM429 vendor.js:19833
Promise.then (async)
check @ VM429 vendor.js:19832
webpackJsonp../node_modules/webpack-hot-middleware/process-update.js.module.exports @ VM429 vendor.js:19793
processMessage @ VM429 vendor.js:19716
handleMessage @ VM429 vendor.js:19584
handleMessage @ VM429 vendor.js:19547
VM429 vendor.js:19893 [HMR] Reloading page

[manniL]

@uptownhr I see the point. Will open up a a PR soon, but I’m unsure if it’ll make it to 2.0.

[galvez]

Closing as there's already a PR in development.

[manniL]

In Nuxt 2, store HMR works as far as possible.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[manniL]

HMR could be improved as a full reload of the page is still necessary to update the module

[manniL]

How to reproduce:

Repo: https://github.com/manniL/nuxt-no-store-module-hmr/tree/master/
CSB: https://codesandbox.io/s/github/manniL/nuxt-no-store-module-hmr/tree/master/

1. Launch with yarn dev
2. Uncomment 2nd getter
3. see message from comment before

[manniL]

Possible strategy to implement: https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/state/modules/index.js