JSX in Vue 3 with Vite
@vitejs/plugin-vue-jsx, JSX pragma, functional components, JSX vs template trade-offs.
JSX in Vue 3 with Vite is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
JSX in Vue 3
JSX lets you write markup-like syntax inside JavaScript that compiles to h calls. Vue 3 supports JSX through a dedicated Babel plugin wired into Vite.
Installing the Plugin
The official package is @vitejs/plugin-vue-jsx. Install it as a dev dependency alongside the regular Vue plugin.
npm install -D @vitejs/plugin-vue-jsxConfiguring vite.config.ts
Add vueJsx() to the plugins array in vite.config.ts. It must be listed so Vite transforms JSX files.
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
plugins: [vue(), vueJsx()]
});The .tsx File Extension
Components written in JSX use the .tsx (or .jsx) extension. The plugin only processes files with these extensions.
// Greeting.tsx
export default () => <div>Hello</div>;A Functional Component
The simplest component is an arrow function returning a JSX element. The class and text appear just like HTML.
const Comp = () => <div class="box">text</div>;
export default Comp;class Not className
Unlike React, Vue JSX uses class, not className. The same applies to for on labels.
const Card = () => (
<div class="card">
<label for="name">Name</label>
</div>
);Dynamic Values
Embed expressions in curly braces. Reactive refs are read with .value inside the render body.
import { ref } from "vue";
export default () => {
const count = ref(0);
return () => <span>Count: {count.value}</span>;
};Event Handlers with camelCase
Listeners use the on prefix in camelCase: onClick, onInput, onMouseenter. The handler is a function.
const Button = () => (
<button onClick={() => alert("hi")}>
Click
</button>
);Conditional Rendering
JSX has no v-if. Use ternaries or logical expressions to conditionally produce elements.
const View = (props) => (
<div>
{props.loading ? <p>Loading...</p> : <p>Done</p>}
</div>
);Rendering Lists
Replace v-for with map. Provide a key on each element just as in templates.
const List = (props) => (
<ul>
{props.items.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);Using defineComponent for Props
For typed props and lifecycle, wrap your logic in defineComponent. The setup function returns a render function returning JSX.
import { defineComponent } from "vue";
export default defineComponent({
props: { title: String },
setup(props) {
return () => <h1>{props.title}</h1>;
}
});Quick Check
Which plugin enables JSX in a Vue 3 Vite project, and where does it go?
Recap
Vue 3 JSX is enabled by adding vueJsx() from @vitejs/plugin-vue-jsx to the Vite plugins array, and writing components in .tsx files. Use class not className, camelCase onClick handlers, and defineComponent when you need typed props.
Frequently asked questions
Is the “JSX in Vue 3 with Vite” lesson free?
Yes — the full text of “JSX in Vue 3 with Vite” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “JSX in Vue 3 with Vite”?
@vitejs/plugin-vue-jsx, JSX pragma, functional components, JSX vs template trade-offs. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “JSX in Vue 3 with Vite” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.