3

I am using Nuxt Content to store application content (JSON files). It works cool in dev mode with hot reload. The backend of my site changes any file in content folder and this changes immediately in the browser without reloading the page. But in production mode nothing changes even after a page reload. I've tried using Handling Hot Reload without process.dev condition:

export default function ({ store }) {
  window.onNuxtReady(($nuxt) => {
    $nuxt.$on('content:update', ({ event, path }) => {
      console.log('content:update')
      store.dispatch('fetchContentData')
    })
  })
}

But it doesn't even work on page reload. How to make a hot reload in production mode working without reload, or at least with reload

Lawrence Cherone
  • 46,049
  • 7
  • 62
  • 106
Yosef
  • 241
  • 2
  • 12
  • 2
    wrong tool for job, there is no dev hmr socket running in dev, you would need to rebuild your app by watching for changes to the file, you could do that with nodemon or pm2 etc but you might as well move away from content and use a database – Lawrence Cherone Jul 27 '21 at 15:43
  • 1
    @LawrenceCherone HMR with `nuxt/content` on `dev` totally works. You meant `production` maybe? You can try this repo if you want: https://github.com/kissu/nuxt-tailwind-typography-darkmode-boilerplate Since the current Nuxt CLI is a bit annoying to generate a quick boilerplate as of right now. – kissu Jul 27 '21 at 15:57
  • of course, it works in dev there is additional code running (a websocket) that listens, builds and pushes changes. Its not added in production builds – Lawrence Cherone Jul 27 '21 at 15:59
  • 1
    @kissu of course, but I am still not finding the final solution for my project and am researching other approaches. I let you know my final solution. But I don't really understand why the Content module is so popular if I can't change my content without rebuilding. – Yosef Jul 29 '21 at 14:24
  • It is intended to work fine during dev in a lot of cases and in a straightforward way. What you're asking is simply not done by anybody at all. https://tina.io/ is what you can get as the closest solution visually. But you either have: 1) an API being fetched and getting the latest value each time your reach a specific page 2) static content that will be generated ahead of time and served without further API calls. You cannot mix 1) and 2), nobody is doing this and I cannot see a way that this could be possible. Then, I may not know all of them, but I highly doubt it exist. Still, good luck! – kissu Jul 29 '21 at 14:38

1 Answers1

2

If your content is hosted on an API, you could watch the changes with the Live Preview feature.
But if it's changing your files locally and you do use target: static, there is not other way as generating your project again to see the changes indeed.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Is any way to update application in production mode when content file is changing? I don't use `target: static` in my project. I tried to use [Live Preview feature](https://nuxtjs.org/docs/2.x/features/live-preview) and had no effect. And there is the note on this page `Only available when using target:static` but you said opposite – Yosef Jul 27 '21 at 21:24
  • 1
    @Yosef if you check the linked repo to this video, you'll see that the target seems to be irrelevant: https://youtu.be/2DtDsnWe2MU Meanwhile, you need to understand that having a preview like this requires an API and that it has nothing to build with building the app. I proposed this as an alternative solution to your question. But you need to understand that out of the box, what you're asking is not possible. HMR is for dev only and when you build your app, there is no way of dynamically injecting code inside of a bundled build, it is not supposed to work like this. – kissu Jul 27 '21 at 23:57