diff options
| -rw-r--r-- | .changeset/seven-brooms-trade.md | 5 | ||||
| -rw-r--r-- | packages/astro/e2e/fixtures/vue-component/src/components/State.vue | 9 | ||||
| -rw-r--r-- | packages/astro/e2e/fixtures/vue-component/src/pages/index.astro | 2 | ||||
| -rw-r--r-- | packages/astro/e2e/vue-component.test.js | 13 | ||||
| -rw-r--r-- | packages/integrations/vue/client.js | 22 |
5 files changed, 42 insertions, 9 deletions
diff --git a/.changeset/seven-brooms-trade.md b/.changeset/seven-brooms-trade.md new file mode 100644 index 000000000..124df8d06 --- /dev/null +++ b/.changeset/seven-brooms-trade.md @@ -0,0 +1,5 @@ +--- +'@astrojs/vue': patch +--- + +Fix Vue component HMR when updating the script tag diff --git a/packages/astro/e2e/fixtures/vue-component/src/components/State.vue b/packages/astro/e2e/fixtures/vue-component/src/components/State.vue new file mode 100644 index 000000000..920cb4594 --- /dev/null +++ b/packages/astro/e2e/fixtures/vue-component/src/components/State.vue @@ -0,0 +1,9 @@ +<script setup> +import { ref } from 'vue' +const props = defineProps(['id']) +const count = ref(1) +</script> + +<template> + <span :id="props.id">Count is {{ count }}</span> +</template> diff --git a/packages/astro/e2e/fixtures/vue-component/src/pages/index.astro b/packages/astro/e2e/fixtures/vue-component/src/pages/index.astro index 5ea9823b6..fb10e6038 100644 --- a/packages/astro/e2e/fixtures/vue-component/src/pages/index.astro +++ b/packages/astro/e2e/fixtures/vue-component/src/pages/index.astro @@ -2,6 +2,7 @@ import Counter from '../components/Counter.vue'; import VueComponent from '../components/VueComponent.vue'; import AsyncTest from '../components/Test.vue' +import State from '../components/State.vue' const someProps = { count: 0, @@ -35,5 +36,6 @@ const someProps = { <VueComponent id="client-only" client:only="vue" /> <AsyncTest id="client-test" client:only="vue" /> + <State id="state" client:load /> </body> </html> diff --git a/packages/astro/e2e/vue-component.test.js b/packages/astro/e2e/vue-component.test.js index b7371cd1b..5d0455dee 100644 --- a/packages/astro/e2e/vue-component.test.js +++ b/packages/astro/e2e/vue-component.test.js @@ -39,3 +39,16 @@ test('test the async vue component in mdx', async ({ page, astro }) => { await expect(label, 'component not hydrated').toHaveText('2'); }); + +test('hmr works', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const span = page.locator('#state'); + await expect(span).toHaveText('Count is 1'); + + await astro.editFile('./src/components/State.vue', (content) => + content.replace('ref(1)', 'ref(2)') + ); + + await expect(span).toHaveText('Count is 2'); +}); diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/client.js index 8b2a5eede..7e1d8090e 100644 --- a/packages/integrations/vue/client.js +++ b/packages/integrations/vue/client.js @@ -14,16 +14,20 @@ export default (element) => slots[key] = () => h(StaticHtml, { value, name: key === 'default' ? undefined : key }); } - let content = h(Component, props, slots); - // related to https://github.com/withastro/astro/issues/6549 - // if the component is async, wrap it in a Suspense component - if (isAsync(Component.setup)) { - content = h(Suspense, null, content); - } - const isHydrate = client !== 'only'; - const boostrap = isHydrate ? createSSRApp : createApp; - const app = boostrap({ name, render: () => content }); + const bootstrap = isHydrate ? createSSRApp : createApp; + const app = bootstrap({ + name, + render() { + let content = h(Component, props, slots); + // related to https://github.com/withastro/astro/issues/6549 + // if the component is async, wrap it in a Suspense component + if (isAsync(Component.setup)) { + content = h(Suspense, null, content); + } + return content; + }, + }); await setup(app); app.mount(element, isHydrate); |