Support custom vue compiler options in @astrojs/vue

.changeset/neat-buttons-guess.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+`@astrojs/vue` integration supports custom vue compiler options

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')
+ }
+ }
+ })],
 });

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>

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);

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-')
+ }
+ }
+ // ...
+ })],
+}
+```

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) });
  },
  },
  };