Open
Description
openedon Jul 15, 2024
Environment
- Operating System:
Darwin - Node Version:
v20.11.0 - Nuxt Version:
3.12.3 - CLI Version:
3.12.0 - Nitro Version:
2.9.7 - Package Manager:
[email protected] - Builder:
- - User Config:
compatibilityDate,devtools,modules - Runtime Modules:
@nuxtjs/[email protected] - Build Modules:
-
Reproduction
https://stackblitz.com/edit/github-xdbpil?file=pages%2Findex.vue
Describe the bug
As soon as i install the nuxt tailwindcss module, the HMR triggers a page reload.
With tailwind module
[nuxt] builder:watch: 0.48ms
[nuxt] builder:watch: 0.521ms
vite:hmr [file change] components/not-used.vue +6s
ℹ page reload components/not-used.vue
Having a plain nuxt application, without tailwind installed will not trigger a page reload.
Without tailwind module
[nuxt] builder:watch: 0.434ms
[nuxt] builder:watch: 0.488ms
vite:hmr [file change] components/not-used.vue +11s
vite:hmr [no modules matched] components/not-used.vue +0ms
However, if you change files/components which are part of the current page, even with the tailwindcss plugin there is no complete page-reload:
With tailwind module + component is used in current page
vite:hmr [file change] components/not-used.vue +4s
[nuxt] builder:watch: 0.146ms
[nuxt] builder:watch: 0.181ms
vite:hmr [vue:update(template)] {MY_ROOT_DIR}/components/not-used.vue +1m
ℹ hmr update /components/not-used.vue, /node_modules/tailwindcss/tailwind.css
The same behaviour counts for .ts files. Changes within them will trigger a whole page reload, which does not happen without the @nuxtjs/tailwindcss module.
With tailwind module
vite:hmr [file change] utils/test.ts +9s
ℹ page reload utils/test.ts
Without tailwind module
[nuxt] builder:watch: 1.331ms
vite:hmr [file change] utils/test.ts +4s
vite:hmr [no modules matched] utils/test.ts +0ms
Additional context
No response
Logs
No response
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Labels
Something isn't workingSomething isn't working