diff options
| -rw-r--r-- | .changeset/neat-buttons-guess.md | 5 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/vue-component/astro.config.mjs | 8 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/vue-component/src/components/Result.vue | 1 | ||||
| -rw-r--r-- | packages/astro/test/vue-component.test.js | 3 | ||||
| -rw-r--r-- | packages/integrations/vue/README.md | 23 | ||||
| -rw-r--r-- | packages/integrations/vue/src/index.ts | 9 |
6 files changed, 44 insertions, 5 deletions
diff --git a/.changeset/neat-buttons-guess.md b/.changeset/neat-buttons-guess.md new file mode 100644 index 000000000..64098a927 --- /dev/null +++ b/.changeset/neat-buttons-guess.md @@ -0,0 +1,5 @@ +--- +'@astrojs/vue': patch +--- + +`@astrojs/vue` integration supports custom vue compiler options diff --git a/packages/astro/test/fixtures/vue-component/astro.config.mjs b/packages/astro/test/fixtures/vue-component/astro.config.mjs index 8a3a38574..0e870b2b4 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 7795d5ae0..90bf218b2 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 e26a3cdbe..d3870dc88 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); diff --git a/packages/integrations/vue/README.md b/packages/integrations/vue/README.md index e9a55d3da..3d5baa70d 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 diff --git a/packages/integrations/vue/src/index.ts b/packages/integrations/vue/src/index.ts index 20adf0f66..b56763504 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) }); }, }, }; |