From 94077502dd6f151e84ed9c675fbc7436403a99fe Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 19 Apr 2022 10:36:33 +0200
Subject: [PATCH 1/4] adds support for passing options to @vitejs/plugin-vue

---
 packages/integrations/vue/src/index.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/integrations/vue/src/index.ts b/packages/integrations/vue/src/index.ts
index 20adf0f66414..b56763504cce 100644
--- a/packages/integrations/vue/src/index.ts
+++ b/packages/integrations/vue/src/index.ts
@@ -1,5 +1,6 @@
 import type { AstroIntegration, AstroRenderer } from 'astro';
 import vue from '@vitejs/plugin-vue';
+import type { Options } from '@vitejs/plugin-vue';
 
 function getRenderer(): AstroRenderer {
 	return {
@@ -9,26 +10,26 @@ function getRenderer(): AstroRenderer {
 	};
 }
 
-function getViteConfiguration() {
+function getViteConfiguration(options?: Options) {
 	return {
 		optimizeDeps: {
 			include: ['@astrojs/vue/client.js', 'vue'],
 			exclude: ['@astrojs/vue/server.js'],
 		},
-		plugins: [vue()],
+		plugins: [vue(options)],
 		ssr: {
 			external: ['@vue/server-renderer'],
 		},
 	};
 }
 
-export default function (): AstroIntegration {
+export default function (options?: Options): AstroIntegration {
 	return {
 		name: '@astrojs/vue',
 		hooks: {
 			'astro:config:setup': ({ addRenderer, updateConfig }) => {
 				addRenderer(getRenderer());
-				updateConfig({ vite: getViteConfiguration() });
+				updateConfig({ vite: getViteConfiguration(options) });
 			},
 		},
 	};

From 05297f2d93fdf2493fdcdb25cc0e0f2e4e735938 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 19 Apr 2022 10:46:57 +0200
Subject: [PATCH 2/4] updating vue integration README with options details

---
 packages/integrations/vue/README.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/integrations/vue/README.md b/packages/integrations/vue/README.md
index e9a55d3da1d9..3d5baa70d15e 100644
--- a/packages/integrations/vue/README.md
+++ b/packages/integrations/vue/README.md
@@ -63,3 +63,26 @@ Also check our [Astro Integration Documentation][astro-integration] for more on
 
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
 [astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components
+
+## Options
+
+This integration is powered by `@vitejs/plugin-vue`. To customize the Vue compiler, options can be provided to the integration. See the `@vitejs/plugin-vue` [docs](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) for more details.
+
+__astro.config.mjs__
+
+```js
+import vue from '@astrojs/vue';
+
+export default {
+  // ...
+  integrations: [vue({
+    template: {
+      compilerOptions: {
+        // treat any tag that starts with ion- as custom elements
+        isCustomElement: tag => tag.startsWith('ion-')
+      }
+    }
+    // ...
+  })],
+}
+```
\ No newline at end of file

From 3a554737f353d2a36c5bd23ba124f4106ec4bfdb Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 19 Apr 2022 10:52:56 +0200
Subject: [PATCH 3/4] adding a tests for custom vue compiler options

---
 .../astro/test/fixtures/vue-component/astro.config.mjs    | 8 +++++++-
 .../test/fixtures/vue-component/src/components/Result.vue | 1 +
 packages/astro/test/vue-component.test.js                 | 3 +++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/astro/test/fixtures/vue-component/astro.config.mjs b/packages/astro/test/fixtures/vue-component/astro.config.mjs
index 8a3a38574b9f..0e870b2b4995 100644
--- a/packages/astro/test/fixtures/vue-component/astro.config.mjs
+++ b/packages/astro/test/fixtures/vue-component/astro.config.mjs
@@ -3,5 +3,11 @@ import vue from '@astrojs/vue';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [vue()],
+	integrations: [vue({
+        template: {
+			compilerOptions: {
+				isCustomElement: tag => tag.includes('my-button')
+			}
+        }
+	})],
 });
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/vue-component/src/components/Result.vue b/packages/astro/test/fixtures/vue-component/src/components/Result.vue
index 7795d5ae0d01..90bf218b2553 100644
--- a/packages/astro/test/fixtures/vue-component/src/components/Result.vue
+++ b/packages/astro/test/fixtures/vue-component/src/components/Result.vue
@@ -1,5 +1,6 @@
 <template>
   <pre>{{ value }}</pre>
+  <my-button>Click Me</my-button>
 </template>
 
 <script>
diff --git a/packages/astro/test/vue-component.test.js b/packages/astro/test/vue-component.test.js
index e26a3cdbe59a..d3870dc88800 100644
--- a/packages/astro/test/vue-component.test.js
+++ b/packages/astro/test/vue-component.test.js
@@ -33,6 +33,9 @@ describe('Vue component', () => {
 			// test 3: all <astro-root>s have uid attributes
 			expect($('astro-root[uid]')).to.have.lengthOf(6);
 
+			// test 4: treats <my-button> as a custom element
+			expect($('my-button')).to.have.lengthOf(7);
+
 			// test 5: components with identical render output and props have been deduplicated
 			const uniqueRootUIDs = $('astro-root').map((i, el) => $(el).attr('uid'));
 			expect(new Set(uniqueRootUIDs).size).to.equal(5);

From dfaddf6c315050bef39b404f26f4556e52c61b17 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 19 Apr 2022 10:55:32 +0200
Subject: [PATCH 4/4] chore: adding changeset

---
 .changeset/neat-buttons-guess.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/neat-buttons-guess.md

diff --git a/.changeset/neat-buttons-guess.md b/.changeset/neat-buttons-guess.md
new file mode 100644
index 000000000000..64098a927056
--- /dev/null
+++ b/.changeset/neat-buttons-guess.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+`@astrojs/vue` integration supports custom vue compiler options