Support Vue JSX (#4897)

Co-authored-by: Dan Jutan <danjutan@gmail.com>

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