[Vue] add support for `appEntrypoint` (#5075)

* feat(vue): add support for appEntrypoint

* chore: add changeset

* test(vue): add tests for app entrypoint

* docs(vue): update README to include app entrypoint

* fix(vue): prefer resolvedVirtualModuleId

Co-authored-by: Nate Moore <nate@astro.build>

8 files changed, 94 insertions, 0 deletions

diff --git a/packages/integrations/vue/test/app-entrypoint.test.js b/packages/integrations/vue/test/app-entrypoint.test.js
new file mode 100644
index 000000000..1b53fbd21
--- /dev/null
+++ b/packages/integrations/vue/test/app-entrypoint.test.js
@@ -0,0 +1,34 @@
+import { loadFixture } from './test-utils.js';
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+
+describe('App Entrypoint', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/app-entrypoint/'
+		});
+		await fixture.build();
+	});
+
+	it('loads during SSR', async () => {
+		const data = await fixture.readFile('/index.html')
+		const { document } = parseHTML(data);
+		const bar = document.querySelector('#foo > #bar');
+		expect(bar).not.to.be.undefined;
+		expect(bar.textContent).to.eq('works');
+	});
+
+	it('setup included in renderer bundle', async () => {
+		const data = await fixture.readFile('/index.html')
+		const { document } = parseHTML(data);
+		const island = document.querySelector('astro-island');
+		const client = island.getAttribute('renderer-url');
+		expect(client).not.to.be.undefined;
+
+		const js = await fixture.readFile(client);
+		expect(js).to.match(/\w+\.component\(\"Bar\"/gm)
+	});
+});
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs
new file mode 100644
index 000000000..0bf5fd95d
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+export default defineConfig({
+  integrations: [vue({
+		appEntrypoint: '/src/pages/_app'
+	})]
+})
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint/package.json
new file mode 100644
index 000000000..3cb7d419b
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/vue-app-entrypoint",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/vue": "workspace:*"
+  }
+}
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Bar.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Bar.vue
new file mode 100644
index 000000000..9e690ea06
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Bar.vue
@@ -0,0 +1,3 @@
+<template>
+	<div id="bar">works</div>
+</template>
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue
new file mode 100644
index 000000000..3e648808c
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue
@@ -0,0 +1,5 @@
+<template>
+	<div id="foo">
+		<Bar />
+	</div>
+</template>
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/_app.ts b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/_app.ts
new file mode 100644
index 000000000..bbda85382
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/_app.ts
@@ -0,0 +1,6 @@
+import type { App } from 'vue'
+import Bar from '../components/Bar.vue'
+
+export default function setup(app: App) {
+	app.component('Bar', Bar);
+}
diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro
new file mode 100644
index 000000000..3240cbe0f
--- /dev/null
+++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+import Foo from '../components/Foo.vue';
+---
+
+<html>
+	<head>
+		<title>Vue App Entrypoint</title>
+	</head>
+	<body>
+		<Foo client:load />
+	</body>
+</html>
diff --git a/packages/integrations/vue/test/test-utils.js b/packages/integrations/vue/test/test-utils.js
new file mode 100644
index 000000000..2475944be
--- /dev/null
+++ b/packages/integrations/vue/test/test-utils.js
@@ -0,0 +1,17 @@
+import { loadFixture as baseLoadFixture } from '../../../astro/test/test-utils.js';
+
+/**
+ * @typedef {import('../../../astro/test/test-utils').Fixture} Fixture
+ */
+
+export function loadFixture(inlineConfig) {
+	if (!inlineConfig || !inlineConfig.root)
+		throw new Error("Must provide { root: './fixtures/...' }");
+
+	// resolve the relative root (i.e. "./fixtures/tailwindcss") to a full filepath
+	// without this, the main `loadFixture` helper will resolve relative to `packages/astro/test`
+	return baseLoadFixture({
+		...inlineConfig,
+		root: new URL(inlineConfig.root, import.meta.url).toString(),
+	});
+}