fix(vue): useId() collisions (#12112)

1 files changed, 9 insertions, 1 deletions

diff --git a/packages/integrations/vue/server.js b/packages/integrations/vue/server.js
index afdc9e8a2..5b7f6cb50 100644
--- a/packages/integrations/vue/server.js
+++ b/packages/integrations/vue/server.js
@@ -2,12 +2,19 @@ import { setup } from 'virtual:@astrojs/vue/app';
 import { createSSRApp, h } from 'vue';
 import { renderToString } from 'vue/server-renderer';
 import StaticHtml from './static-html.js';
+import { incrementId } from './context.js';
 
 function check(Component) {
 	return !!Component['ssrRender'] || !!Component['__ssrInlineRender'];
 }
 
 async function renderToStaticMarkup(Component, inputProps, slotted, metadata) {
+	let prefix;
+	if (this && this.result) {
+		prefix = incrementId(this.result);
+	}
+	const attrs = { prefix };
+
 	const slots = {};
 	const props = { ...inputProps };
 	delete props.slot;
@@ -21,9 +28,10 @@ async function renderToStaticMarkup(Component, inputProps, slotted, metadata) {
 			});
 	}
 	const app = createSSRApp({ render: () => h(Component, props, slots) });
+	app.config.idPrefix = prefix;
 	await setup(app);
 	const html = await renderToString(app);
-	return { html };
+	return { html, attrs };
 }
 
 export default {