Unmount framework components when islands are destroyed (#8264)

* fix(view-transitions): update persistence logic for improved unmount behavior

* feat(astro): add `astro:unmount` event

* feat(vue): automatically unmount islands

* feat(react): automatically unmount islands

* feat(react): automatically unmount islands

* feat(solid): automatically dispose of islands

* feat(svelte): automatically destroy of islands

* feat(svelte): automatically destroy of islands

* feat(solid): automatically dispose of islands

* feat(preact): automatically unmount islands

* chore: update changeset

* fix: rebase issue

* chore: add clarifying comment

* chore: remove duplicate changeset

* chore: add changeset

1 files changed, 7 insertions, 9 deletions

diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/client.js
index ca61116b2..8b2a5eede 100644
--- a/packages/integrations/vue/client.js
+++ b/packages/integrations/vue/client.js
@@ -21,15 +21,13 @@ export default (element) =>
 			content = h(Suspense, null, content);
 		}
 
-		if (client === 'only') {
-			const app = createApp({ name, render: () => content });
-			await setup(app);
-			app.mount(element, false);
-		} else {
-			const app = createSSRApp({ name, render: () => content });
-			await setup(app);
-			app.mount(element, true);
-		}
+		const isHydrate = client !== 'only';
+		const boostrap = isHydrate ? createSSRApp : createApp;
+		const app = boostrap({ name, render: () => content });
+		await setup(app);
+		app.mount(element, isHydrate);
+
+		element.addEventListener('astro:unmount', () => app.unmount(), { once: true });
 	};
 
 function isAsync(fn) {