supporting top of await (#6671)

* add fix

* fix

* revert verison

* fix fn is undefined g

* add e2e test

* fix unit test

* delete redundant code

* add changeset

---------

Co-authored-by: wuls <linsheng.wu@beantechs.com>

2 files changed, 16 insertions, 4 deletions

diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/client.js
index 7e67825df..508cc59c0 100644
--- a/packages/integrations/vue/client.js
+++ b/packages/integrations/vue/client.js
@@ -1,4 +1,4 @@
-import { h, createSSRApp, createApp } from 'vue';
+import { h, createSSRApp, createApp, Suspense } from 'vue';
 import { setup } from 'virtual:@astrojs/vue/app';
 import StaticHtml from './static-html.js';
 
@@ -13,13 +13,26 @@ export default (element) =>
 		for (const [key, value] of Object.entries(slotted)) {
 			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)
+		}
+		
 		if (client === 'only') {
-			const app = createApp({ name, render: () => h(Component, props, slots) });
+			const app = createApp({ name, render: () => content });
 			await setup(app);
 			app.mount(element, false);
 		} else {
-			const app = createSSRApp({ name, render: () => h(Component, props, slots) });
+			const app = createSSRApp({ name, render: () => content });
 			await setup(app);
 			app.mount(element, true);
 		}
 	};
+
+function isAsync (fn) {
+	const constructor = fn?.constructor
+	return constructor && constructor.name === 'AsyncFunction';
+}
diff --git a/packages/integrations/vue/test/app-entrypoint.test.js b/packages/integrations/vue/test/app-entrypoint.test.js
index 0c60818a3..5c9ea840c 100644
--- a/packages/integrations/vue/test/app-entrypoint.test.js
+++ b/packages/integrations/vue/test/app-entrypoint.test.js
@@ -1,7 +1,6 @@
 import { loadFixture } from './test-utils.js';
 import { expect } from 'chai';
 import { parseHTML } from 'linkedom';
-
 describe('App Entrypoint', () => {
 	/** @type {import('./test-utils').Fixture} */
 	let fixture;