This page is translated by Google Cloud Translation API

Switch to Chinese

JSX/TSX support

uniapp supports JSX development, please refer to [Vue.js JSX/TSX support](https://cn.vuejs.org/guide/extras/render-function. html#jsx-tsx) instructions.

Platform Difference Description

App-vue3	H5-vue3	MiniApp platform
√	√	x

Support methods

Install the plugin

npm install @vitejs/plugin-vue-jsx --save-dev

Configure vite.config.js

• Projects created by HBuilderX

Add a vite.config.js file to the root directory of the project, and add the following configuration:

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    uni(),
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ],
});

• project created by cli

Add the following configuration to the vite.config.js file in the root directory of the project:

import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    }),
  ],
}