Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesYes—Vue supports JSX and TSX as ways to write render functions. To use them, configure a Vue-specific JSX transform; JSX is not parsed automatically by a plain JavaScript file, and Vue does not use React’s JSX transform. This guide focuses on Vue 3 with Vite and TypeScript, and distinguishes the separate tooling needed by Vue 2.
What JSX does in Vue
JSX is an XML-like syntax for describing virtual nodes inside JavaScript. Vue compiles JSX into render output, so you can use JavaScript expressions and control flow to build a component’s output. For example, values go inside braces:
<div id={dynamicId}>hello, {userName}</div>Imported Vue components can be used directly in JSX. The syntax may look familiar if you have used React, but the transform and some conventions differ. In Vue JSX, HTML-style class and for props are accepted, and a component’s children are its slots—not a React-style children prop. See the Vue render functions guide for the Vue-specific syntax and behavior.
Set up JSX in a Vue 3 Vite project
For a Vue 3 application using Vite, add the Vue JSX plugin alongside the Vue single-file component plugin. The dedicated Vite Vue JSX plugin provides the Vue 3 JSX/TSX transform; the Vue plugin documentation also notes that JSX support requires this additional plugin.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
-
Install
@vitejs/plugin-vue-jsxin the project using its package manager. Confirm that the package is appropriate for the project’s Vue major version. -
Register the JSX plugin in
vite.config.jsorvite.config.tsalong with the Vue plugin. For example:import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' export default defineConfig({ plugins: [vue(), vueJsx()], }) -
If the project uses TypeScript, set the JSX options in
tsconfig.json:{ "compilerOptions": { "jsx": "preserve", "jsxImportSource": "vue" } }preserveleaves JSX for the Vue-aware build transform, whilejsxImportSourceidentifies Vue as the JSX source for TypeScript. The Vue TypeScript guide also documents a per-file opt-in using/* @jsxImportSource vue */.What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
In Vue 3.4 and later, configure Vue’s JSX types explicitly: Vue no longer implicitly registers a global JSX namespace. Check the TypeScript section of the Vue TypeScript guide for the supported type setup.
Check the Vue, TypeScript, and Vite versions already in the project before copying configuration into an older codebase; plugin compatibility and JSX type setup depend on the toolchain.
Use Vue slots for component children
In JSX, Vue component children express slots. A default slot can be supplied as a function child, and named slots can be passed as an object whose values are functions:
<MyComponent>{{
default: () => <div>Default content</div>,
footer: () => <small>Footer</small>
}}</MyComponent>The functions let the child invoke a slot when needed, so dependencies can be tracked by the child. When moving between React and Vue, do not assume that children, class names, or JSX runtime configuration work the same way.
Choose templates or JSX based on the rendering need
Vue recommends templates for most application rendering. Templates are easier for the compiler to analyze statically; JSX is more dynamic and does not receive as comprehensive optimization as template-compiled output. That is qualitative guidance, not a universal speed comparison: the official sources do not establish a numeric performance advantage for either approach.
| Consideration | Templates | JSX/TSX |
|---|---|---|
| Typical fit | Ordinary application interfaces and most rendering cases | Components whose output benefits from programmatic JavaScript control |
| Static analysis | Easier for Vue to analyze statically | More dynamic, with less comprehensive optimization |
| Tooling | Vue’s standard template tooling | Requires Vue-specific JSX transformation and, for TypeScript, JSX configuration |
Choose JSX when conditional or otherwise programmatic rendering is clearer in JavaScript than in a template, and when the team is comfortable maintaining the extra transform and type configuration. If the component’s markup is straightforward, a template usually keeps the rendering path simpler. Vue’s recommendation and tradeoffs are described in its render functions guide and JSX plugin documentation.
Keep Vue 2 and Vue 3 instructions separate
JSX support exists for both major Vue versions, but their transforms and setup are not interchangeable. Vue 3 projects use the Vue 3 JSX transform and, with Vite, @vitejs/plugin-vue-jsx. Vue 2’s render-function guide documents older Babel JSX tooling and conventions. For Vue 2.7 with Vite, migration guidance identifies the separate @vitejs/plugin-vue2-jsx package. Follow the documentation for the project’s Vue version rather than mixing Vue 2 examples with Vue 3 configuration; see the Vue 2.7 migration guide.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
