Nuxt3 + Vite + Nitro HMR cache issue

Question

I have default project setup getting from nuxt3 document. I'm talk about this starting point : npx nuxi init <project-name>.

The project is up and running on my local machine. Unfortunately output is not up to date in the devtools. For example I made changes on JS part. But I can't see that changes on devtools and it's not impact the result in browser. When I try to clear cache the updated code is working until I do normal refresh on browser. It's so weird and annoying. How do I disable caching. I guess it's still using app.vue. But I removed it.

Is anyone else have an idea ?

Edit: I added --force tag to dev script like this; "dev": "nuxt dev --force", It didn't change anything.

Answer 1

I created a vite.config.tz file in the root directory and added the following in, which seemed to have worked for me. It may not be the best practice, but I'm new to this so not sure

export default {
   server: {
      hmr: {
        overlay: false
      }
   }
}

Answer 2

I'm writing my solution here if someone need that. Unfortunately I re-created the project from scratch with same steps. But with one difference. When I do yarn install, I didn't run the project. Firstly, I removed the app.vue file within the root of the project. Then I created pages dir and placed index.vue file inside that folder. Now my project is running as I expected.

Note; exactly I copied all the changes from the old project. Just I didn't run the project while app.vue exist.

I hope someone find it useful.