Nuxt3 doesn't hot reload on content change, but does after I rename the component

Question

First and foremost, using Windows. There are no errors in the console regarding hot-reload, and the page works just fine when I refresh it manually. Currently editing a file that's under ./components/Navigation.vue.

I'm using more or less default Nuxt3 configuration. Trying out different things, I found multiple cases when folder/file structure naming could impact how hot reloading works. Now comes the interesting part. When dev server is running, I can rename a component, let's say from ./components/Navigation to ./components/navigation and it doesn't change the hot reload part right away, but if I refresh the page once more, all the changes in said component are hot-reloaded when changing the component in the editor. But only the renamed component. If I change other components, the page stays the same. If I stop and start the server, the behaviour goes back - the page is not hot-reloaded on content change.

Tried both, localhost:3000 and network address, both have the same behaviour. Using Firefox, but the same behaviour using Chrome. I'm using latest Webstorm, but the issue is the same if I'm using VS Code and runnig the server through CMD.

Interestingly, it shows [vite] css hot updated: /assets/css/tailwind.css when I change the content, but the page doesn't update.

I found an interesting clue. The component was added in layouts/default.vue where it's not updating. If I add it to a page under pages pages/index.vue, then it is hot updating.

This seems more and more like a Nuxt3 problem. I have added the component to both, the layout file, and the page. The layout one doesn't update, the page one does.

This is my full nuxt.config.ts file

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/strapi'],
  strapi: {
    url: process.env.STRAPI,
  },
});

This is my package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/strapi": "^1.8.1",
    "@nuxtjs/tailwindcss": "^6.4.1",
    "autoprefixer": "^10.4.14",
    "nuxt": "^3.2.3",
    "nuxt-storm": "^1.1.3",
    "postcss": "^8.4.21",
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.4",
    "tailwindcss": "^3.2.7"
  },
  "dependencies": {
    "postcss-cli": "^10.1.0"
  }
}

This is the component ./components/Navigation.vue

<template>
  <header class="bg-white">
    <nav
      class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
      aria-label="Global"
    >
      <span class='font-sans'>
        Trying to edit content here, or change class names - anything. 
      </span>
    </nav>
  </header>
</template>

<script setup>
</script>

Trying to use Nuxt3 with hot-reload in the browser, expecting it to work right away, but instead it only works after the component is re-named.

Nuxt3 doesn't hot reload on content change, but does after I rename the component

0 Answers0