Fix vue resetting state when using view transition persistence (#11946)

* Fix vue resetting state when using view transition persistence

* Avoid calling internal apis when forcing vue component update

.changeset/five-walls-build.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+Fix vue islands keeping their state when using view transition persistence

packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="counter">
-		<button @click="subtract()">-</button>
+		<button @click="subtract()" class="decrement">-</button>
-		<pre>{{ count }}</pre>
+		<pre>{{prefix}}{{ count }}</pre>
-		<button @click="add()">+</button>
+		<button @click="add()" class="increment">+</button>
 	</div>
 	<div class="counter-message">
 		<slot />
@@ -12,6 +12,12 @@
 <script lang="ts">
 import { ref } from 'vue';
 export default {
+	props: {
+		prefix: {
+			type: String,
+			default: '',
+		},
+	},
 	setup() {
 		const count = ref(0);
 		const add = () => (count.value = count.value + 1);

packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-one.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+import Counter from '../components/VueCounter.vue';
+export const prerender = false;
+
+---
+<Layout>
+	<p id="island-one">Page 1</p>
+	<a id="click-two" href="/island-vue-two">go to 2</a>
+	<Counter prefix="AA" client:load transition:persist transition:name="counter" />
+</Layout>

packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-two.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../components/Layout.astro';
+import Counter from '../components/VueCounter.vue';
+export const prerender = false;
+
+---
+<Layout>
+	<p id="island-two">Page 2</p>
+	<a id="click-two" href="/island-vue-one">go to 1</a>
+	<Counter prefix="BB" client:load transition:persist transition:name="counter" />
+</Layout>

packages/astro/e2e/view-transitions.test.js

@@ -522,7 +522,7 @@ test.describe('View Transitions', () => {
 		expect(secondTime).toBeGreaterThanOrEqual(firstTime);
 	});
 
-	test('Islands can persist using transition:persist', async ({ page, astro }) => {
+	test('React Islands can persist using transition:persist', async ({ page, astro }) => {
 		// Go to page 1
 		await page.goto(astro.resolveUrl('/island-one'));
 		let cnt = page.locator('.counter pre');
@@ -544,6 +544,24 @@ test.describe('View Transitions', () => {
 		await expect(pageTitle).toHaveText('Island 2');
 	});
 
+	test('Vue Islands can persist using transition:persist', async ({ page, astro }) => {
+		// Go to page 1
+		await page.goto(astro.resolveUrl('/island-vue-one'));
+		let cnt = page.locator('.counter pre');
+		await expect(cnt).toHaveText('AA0');
+
+		await page.click('.increment');
+		await expect(cnt).toHaveText('AA1');
+
+		// Navigate to page 2
+		await page.click('#click-two');
+		const p = page.locator('#island-two');
+		await expect(p).toBeVisible();
+		cnt = page.locator('.counter pre');
+		// Count should remain, but the prefix should be updated
+		await expect(cnt).toHaveText('BB1');
+	});
+
 	test('transition:persist-props prevents props from changing', async ({ page, astro }) => {
 		// Go to page 1
 		await page.goto(astro.resolveUrl('/island-one?persist'));

packages/integrations/vue/client.js

@@ -2,6 +2,9 @@ import { setup } from 'virtual:@astrojs/vue/app';
 import { Suspense, createApp, createSSRApp, h } from 'vue';
 import StaticHtml from './static-html.js';
 
+// keep track of already initialized apps, so we don't hydrate again for view transitions
+let appMap = new WeakMap();
+
 export default (element) =>
 	async (Component, props, slotted, { client }) => {
 		if (!element.hasAttribute('ssr')) return;
@@ -15,10 +18,20 @@ export default (element) =>
 
 		const isHydrate = client !== 'only';
 		const bootstrap = isHydrate ? createSSRApp : createApp;
+
+		// keep a reference to the app, props and slots so we can update a running instance later
+		let appInstance = appMap.get(element);
+
+		if (!appInstance) {
+			appInstance = {
+				props,
+				slots,
+			};
 			const app = bootstrap({
 				name,
 				render() {
-				let content = h(Component, props, slots);
+					let content = h(Component, appInstance.props, appInstance.slots);
+					appInstance.component = this;
 					// related to https://github.com/withastro/astro/issues/6549
 					// if the component is async, wrap it in a Suspense component
 					if (isAsync(Component.setup)) {
@@ -29,7 +42,12 @@ export default (element) =>
 			});
 			await setup(app);
 			app.mount(element, isHydrate);
-
+			appMap.set(element, appInstance);
+		} else {
+			appInstance.props = props;
+			appInstance.slots = slots;
+			appInstance.component.$forceUpdate();
+		}
 		element.addEventListener('astro:unmount', () => app.unmount(), { once: true });
 	};