Thanks for sharing reproductions. I can confirm the same issue on WSL2 and also normal Linux servers and windows. HMR only works fine on a macOS laptop with fsevents.

• ✅ MacOS
• ❌ Windows
• ❌ Linux (arm64 and x86)
• ❌ WSL2

An interesting finding is that native watcher, works but only for one instance. Disabling server [watcher] with ssr: false, client watcher and HMR start to work.

Ok, @danielroe, your instinct was right after all:

my instinct is that this might be a watcher issue

I kept digging inside @vitejs/plugin-vue and found out that if I add a 100ms sleep inside handleHotUpdate function after file is read, the autoupdates start working. Then I’ve found this issue, and although it mentions Windows (this was also your instinct I guess, since you asked if I have Windows), the fix worked for me in Ubuntu:

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    server: {
      watch: {
        usePolling: true,
      },
    },
  },
});

After I set usePolling to true, it started working as expected. Thank you for your help, I guess this can be closed after @radusuciu confirms.

I just verified that this is fixed with the latest version of nuxt! Thank you!

I have the same issue - using npx nuxi init pure-nuxt3 to create a fresh nuxt 3 project and then changing app.vue to

<template>
  <div>
    {{ counter }}
    <NuxtWelcome />
  </div>
</template>

<script setup>
const counter = 1;
</script>

Behavior is the same as described by @radusuciu - updating template works immediately, but whenever I change counter value, it’s not updated, only after full page refresh. Pure vite project (created via npm init vite-app pure-vite) doesn’t have this issue, both template and script changes are picked up immediately.

Is this still an issue with current stable nuxt releases? Or can it be closed?

As an alternative of vite.server.watch.usePolling option, you can add this to your Shell profile (.bashrc/.zshrc, …) :

# Workaround for Chokidar Watcher
export CHOKIDAR_USEPOLLING=1

This will do the same but be applied for every project through this environment variable.

This can be suitable until we find a better solution to this issue.

Encountered same issue (I’m on WSL2 but my code is on the Subsystem), fixed with vite.server.watch.usePolling.

Reproduction

<script setup>
const data = ref('a')
</script>

<template>
  <div>
    {{ data }}
  </div>
</template>

Then changes ref('a') to ref('b') in your editor, and save.

On my computer, it won’t correctly trigger HMR client side.

Thanks for the validation, was feeling a little crazy that I was the only one with the issue despite my being able to reproduce it consistently… in fact I can’t NOT reproduce it 🤣