search

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.65k stars 2.48k forks source link

🐛 BUG: Vue component HMR does not work #2707

Closed sdoerger closed 2 years ago

sdoerger commented 2 years ago

What version of astro are you using?

0.23.4

What package manager are you using?

npm

What operating system are you using?

Linux Manjaro

Describe the Bug

Problem: Vue components do not work with hot reload on save.

STR

I added in the Blog Boilderplate of Astro a simple vue component (Test.vue, <Test :client:load />) and installed Tailwind.

When I save changes in the Vue-Component (either console, html or style) the changes are not refelcted in Browser nor console. Only if I save the parent astro component, updates take place.

I could not find in the docs, how to fix that. Is it connected to :client... or settings/config or is it a real bug/feature request?

I use "@astrojs/renderer-vue": "^0.4.0" for vue components.

Thanks

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-zv8xdl?file=src/pages/index.astro

FredKSchott commented 2 years ago

I believe this was fixed by #1843

ckissi commented 2 years ago

It doesn't work. I'm on version 0.24.3 and facing the same issue. I have to manually refresh the page to see changes.

natemoo-re commented 2 years ago

I can confirm that this is still an issue. Reopening.

HMR for files other than .astro are handled by their respective Vite plugins. I'm guessing we have an issue where we're not handling the HMR request coming from the Vue plugin properly. I'm going to take a look at this as soon as I can.

tony-sull commented 2 years ago

I ran into this while looking into #3097 as well

With client: directives for other components the browser gets an update event from Vite including the component file that was updated. For some reason, specifically with view we only get an update event for the .astro page and not the hydrated Vue component

TheDutchCoder commented 2 years ago

I get the same issue with the default Vue template. Content updates to the page HMR fine, but the Vue component does not.

Side note: the default Vue template does not work, the config is out of date and it's missing @astrojs/vue as a dependency

natemoo-re commented 2 years ago

I made some HMR fixes in https://github.com/withastro/astro/pull/3138 but it looks like we're still having trouble with the HMR handling of Vue components. Not sure if it's coming from Vue's Vite plugin or from us.

matthewp commented 2 years ago

This appears to have been fixed in the last 2 months:

https://stackblitz.com/edit/github-zv8xdl-s1vj7l?file=astro.config.mjs,package.json,src%2Fpages%2Findex.astro,src%2Fcomponents%2FElements%2FTest.vue