Skip to content

Commit

Permalink
Support custom vue compiler options in @astrojs/vue (#3143)
Browse files Browse the repository at this point in the history
* adds support for passing options to @vitejs/plugin-vue

* updating vue integration README with options details

* adding a tests for custom vue compiler options

* chore: adding changeset
  • Loading branch information
Tony Sullivan authored Apr 19, 2022
1 parent 550c7d0 commit 44e294c
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 5 deletions.
5 changes: 5 additions & 0 deletions .changeset/neat-buttons-guess.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/vue': patch
---

`@astrojs/vue` integration supports custom vue compiler options
8 changes: 7 additions & 1 deletion packages/astro/test/fixtures/vue-component/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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')
}
}
})],
});
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<pre>{{ value }}</pre>
<my-button>Click Me</my-button>
</template>

<script>
Expand Down
3 changes: 3 additions & 0 deletions packages/astro/test/vue-component.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
23 changes: 23 additions & 0 deletions packages/integrations/vue/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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-')
}
}
// ...
})],
}
```
9 changes: 5 additions & 4 deletions packages/integrations/vue/src/index.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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) });
},
},
};
Expand Down

0 comments on commit 44e294c

Please sign in to comment.