diff options
Diffstat (limited to 'packages/integrations/vue/README.md')
-rw-r--r-- | packages/integrations/vue/README.md | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/packages/integrations/vue/README.md b/packages/integrations/vue/README.md index 2a1f94c6f..75c861ce3 100644 --- a/packages/integrations/vue/README.md +++ b/packages/integrations/vue/README.md @@ -94,3 +94,40 @@ export default { })], } ``` + +### jsx + +You can use Vue JSX by setting `jsx: true`. + +__`astro.config.mjs`__ + +```js +import { defineConfig } from 'astro/config'; +import vue from '@astrojs/vue'; + +export default defineConfig({ + integrations: [ + vue({ jsx: true }) + ], +}); +``` + +This will enable rendering for both Vue and Vue JSX components. To customize the Vue JSX compiler, pass an options object instead of a boolean. See the `@vitejs/plugin-vue-jsx` [docs](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) for more details. + +__`astro.config.mjs`__ + +```js +import { defineConfig } from 'astro/config'; +import vue from '@astrojs/vue'; + +export default defineConfig({ + integrations: [ + vue({ + jsx: { + // treat any tag that starts with ion- as custom elements + isCustomElement: tag => tag.startsWith('ion-') + } + }) + ], +}); +``` |