Hot reload refresh issue, any idea what is causing this?
I am still new to Nuxt, but I followed this guide for initial setup: https://www.youtube.com/watch?v=r3zxLMoPBAI
/nuxt.config.js file:
import tailwindcss from '@tailwindcss/vite';
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2024-11-01',
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
vite: {
plugins: [tailwindcss()],
},
modules: [
'@nuxt/content',
'@nuxt/eslint',
'@nuxt/fonts',
'@nuxt/icon',
'@nuxt/image',
'@nuxt/scripts',
'@nuxt/test-utils',
'@nuxt/ui',
],
image: {
cloudflare: {
baseURL: 'https://images.mydomain.com',
},
},
});
/plugins/directus.js
import { createDirectus, rest, readItem, readItems } from '@directus/sdk';
const directus = createDirectus('https://api.mydomain.com').with(rest());
export default defineNuxtPlugin(() => {
return {
provide: {
directus,
readItem,
readItems,
},
};
});Directus
YouTube
Getting Started with Directus and Nuxt
In this video, you'll learn how to use the Directus SDK with a Nuxt application.
See more framework tutorials on Directus TV: https://directus.io/tv
https://nuxt.com
https://directus.io
https://docs.directus.io
2 Replies
Hi @avidrunner. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources provided, there are several potential causes for hot reload/refresh issues in Nuxt 3 projects. Here are the most likely issues affecting your setup:
Possible Causes
1. Component Naming Convention
One user reported that component naming affected HMR functionality. Using PascalCase components like
MyComponentOne caused issues, while changing to Mycomponentone fixed it Stack Overflow.
2. Windows Performance Issues
If you're developing on Windows, HMR performance can be extremely slow with reload times ranging from 20-30 seconds or more. Using WSL (Windows Subsystem for Linux) with Ubuntu is recommended for significantly improved performance GitHub PR #31301.
3. Devtools and Output Folder
Having devtools enabled (devtools: { enabled: true } in your config) combined with the existence of .output/server/node_modules folder can cause HMR issues. You could try disabling devtools temporarily or deleting that folder GitHub Issue #12376.
4. PWA Plugin Issues
If you're using @vite-pwa/nuxt, it can cause hydration errors in development mode. The recommended solution is to disable PWA in development as it works fine in production Stack Overflow.
5. Tailwind v4 Compatibility
There have been reports of HMR not working properly with Tailwind v4, particularly with server-side files. This was reportedly fixed in a Nitro update GitHub Issue #31096.
Solutions to Try
1. Try modifying your Vite configuration to use polling:
2. Temporarily disable devtools to see if that resolves the issue:
3. Check if you have a .output/server/node_modules folder and try deleting it.
4. If you're on Windows, consider using WSL for development.
5. For Nuxt Content specifically, you can adjust the watch configuration:
If none of these solutions work, it might be related to a specific version issue. Recent Nuxt versions (3.15.x and 3.16.x) have had reported HMR issues where pages reload entirely instead of just updating the changed components GitHub Issue #30861.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@313298495417221121> Kapa.ai is still learning and improving, please let me know how I did by reacting below.