Using JSX With Vue

Master JSX syntax in Vue 3 for flexible, programmatic component rendering. Learn setup, patterns, and best practices.

Introduction

Vue.js is renowned for its intuitive template-based syntax, which works exceptionally well for most application scenarios. However, there are moments when developers need the full programmatic power of JavaScript to create dynamic, complex user interfaces. This is where JSX comes in--a syntax extension that allows you to write HTML-like code directly in JavaScript, bridging the gap between declarative templates and imperative logic.

JSX with Vue provides a compelling alternative to traditional templates, offering greater flexibility for scenarios involving complex logic, dynamic component composition, or when migrating from React backgrounds. Understanding when and how to use JSX effectively can significantly enhance your Vue development toolkit, enabling you to build more sophisticated interfaces while maintaining Vue's reactivity system.

Understanding Render Functions and Virtual DOM

Before diving into JSX, it's essential to understand the foundation upon which it operates: render functions and the virtual DOM. Vue's template compiler converts template syntax into render functions under the hood, which then create virtual DOM nodes (vnodes) that describe how the actual DOM should be structured.

The virtual DOM is a lightweight representation of the actual DOM maintained in memory. When state changes occur, Vue compares the new virtual DOM with the previous version (a process called diffing) and updates only the necessary parts of the real DOM. This approach ensures optimal performance by minimizing expensive DOM operations.

Render functions return vnodes describing what should be rendered. Vue provides the h() function (short for "hyperscript") as the primary method for creating these vnodes. This function is named after a convention shared by many virtual DOM implementations, where "hyperscript" refers to JavaScript that produces HTML-like syntax.

The h() function is remarkably flexible and accepts various argument combinations to accommodate different rendering scenarios:

The h() Function for Creating Vnodes

import { h } from 'vue'

// Basic usage - element type with optional props and children
h('div', { id: 'foo', class: 'bar' }, 'Hello')

// Children can be strings, arrays, or nested vnodes
h('div', { class: 'container' }, [
 h('span', 'Message: '),
 h('strong', message.value)
])

// Event listeners use onXxx naming convention
h('button', { onClick: handleClick }, 'Click Me')

// Class and style support template-like object/array syntax
h('div', {
 class: ['active', { disabled: isDisabled }],
 style: { color: 'red', fontSize: '14px' }
})

Understanding the relationship between templates, render functions, and JSX helps you make informed decisions about which approach best fits your use case. Templates excel at readability and separation of concerns for standard UI patterns, while render functions and JSX provide the flexibility needed for complex, dynamic scenarios.

For teams working across multiple frontend frameworks, understanding these patterns also helps with frontend architecture decisions and component design principles that translate across Vue, React, and other frameworks.

Setting Up JSX Support in Vue 3

To use JSX in your Vue 3 project, you need to configure your build tooling to transform JSX syntax into JavaScript that Vue can understand. Both create-vue (the official Vue scaffolding tool) and Vue CLI offer options for scaffolding projects with pre-configured JSX support. For manual configuration, you'll need to set up the appropriate Babel plugin.

Vite Configuration

For Vite-based projects (recommended for Vue 3), install the JSX plugin:

npm install @vitejs/plugin-vue-jsx -D

Then configure it in your vite.config.js:

Vite Configuration for Vue JSX

import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
 plugins: [vueJsx()]
})

For projects using Babel directly, install the official Vue JSX Babel plugin:

npm install @vue/babel-plugin-jsx -D

And add it to your Babel configuration.

Our web development team often recommends Vite for new Vue 3 projects due to its superior development experience and faster build times, especially when working with JSX and modern frontend tooling.

TypeScript Configuration

TypeScript projects require additional configuration to properly handle JSX. In your tsconfig.json, specify the JSX preservation mode and import source:

This configuration instructs TypeScript to leave JSX syntax intact for Vue's JSX transform to process, rather than transforming it for React. Starting in Vue 3.4, Vue no longer implicitly registers the global JSX namespace, so explicitly specifying the import source is necessary for proper type inference.

TypeScript Configuration for JSX with Vue

{
 "compilerOptions": {
 "jsx": "preserve",
 "jsxImportSource": "vue"
 }
}

Writing Components with JSX

Once configured, you can write Vue components using JSX syntax, which closely resembles HTML but operates within JavaScript's expression context. JSX allows you to embed dynamic values using curly braces, creating a natural flow between logic and presentation.

Here's a basic Vue component written with JSX using the Composition API:

Basic Vue Component with JSX

import { ref, computed } from 'vue'

export default {
 setup() {
 const count = ref(0)
 const doubled = computed(() => count.value * 2)

 const increment = () => {
 count.value++
 }

 // Return the render function
 return () => (
 <div class="counter">
 <h2>Count: {count.value}</h2>
 <p>Doubled: {doubled.value}</p>
 <button onClick={increment}>Increment</button>
 </div>
 )
 }
}

Notice how JSX allows you to express component structures in a familiar HTML-like syntax while maintaining full access to JavaScript expressions and Vue's reactivity system. Event handlers are attached directly using React-like syntax (onClick), and dynamic values are interpolated using curly braces.

This approach to component architecture provides flexibility while maintaining Vue's reactivity model, making it easier to build maintainable applications that scale effectively.

Slots in Vue JSX

One important distinction between Vue JSX and React JSX is how Vue handles component slots. In Vue JSX, slots are passed as properties rather than as child elements, reflecting Vue's slot-based composition pattern:

This approach maintains consistency with Vue's slot system while providing the JSX syntax for component composition.

Using Slots in Vue JSX

// In a parent component using JSX
return () => (
 <CardWrapper>
 {/* Named slots in JSX are passed as props */}
 <template #header>
 <h3>Card Title</h3>
 </template>

 {/* Default slot content */}
 <p>This is the main content area.</p>

 <template #footer>
 <button>Action</button>
 </template>
 </CardWrapper>
)

Conditional Rendering and Lists

Translating Vue's template directives like v-if, v-else, and v-for to JSX requires using standard JavaScript control structures. This shift from declarative directives to imperative logic gives you more flexibility but requires a different mindset.

For conditional rendering, use JavaScript's logical operators and ternary expressions:

Conditional Rendering in JSX

// v-if equivalent
return () => isVisible.value && <div>Content</div>

// v-else equivalent using ternary
return () => (
 <div>
 {isLoggedIn
 ? <UserDashboard />
 : <LoginForm />
 }
 </div>
)

// v-else-if chain
return () => (
 <div>
 {status.value === 'loading' && <Spinner /> ||
 status.value === 'error' && <ErrorMessage /> ||
 status.value === 'success' && <SuccessDisplay />}
 </div>
)

List Rendering

List rendering uses JavaScript's map method to transform arrays into sequences of elements. The key attribute is essential for list rendering in JSX, just as it is with Vue's v-for. This key helps Vue's virtual DOM algorithm efficiently update lists by tracking which items have changed, been added, or been removed.

Proper list rendering is crucial for application performance, especially when dealing with large datasets or frequently updating lists.

List Rendering in JSX

// v-for equivalent for arrays
return () => (
 <ul>
 {items.value.map(item => (
 <li key={item.id}>{item.name}</li>
 ))}
 </ul>
)

// With index (useful when no unique key exists)
return () => (
 <div>
 {items.value.map((item, index) => (
 <div key={index}>{item.text}</div>
 ))}
 </div>
)

Handling Events and Form Inputs

Event handling in Vue JSX follows a similar pattern to React, where event handler names use camelCase and are passed as props. Vue's event system adapts these handlers to work with the native DOM events appropriately.

Event Handling Pattern

Form inputs in JSX work similarly to templates, but you'll need to manage the modelValue binding explicitly since v-model is a template-specific directive:

Event Handling in Vue JSX

return () => (
 <div class="event-demo">
 <button onClick={handleClick}>Click Me</button>
 <input
 onInput={handleInput}
 onFocus={handleFocus}
 onBlur={handleBlur}
 />
 <form onSubmit={handleSubmit}>
 {/* Form content */}
 </form>
 </div>
)

// Form inputs require explicit value binding
const username = ref('')

return () => (
 <input
 value={username.value}
 onInput={(e) => username.value = e.target.value}
 placeholder="Username"
 />
)

For components using v-model, the pattern adapts to use the modelValue prop and update:modelValue event:

const searchQuery = ref('')

return () => (
 <SearchInput
 modelValue={searchQuery.value}
 onUpdate:modelValue={(value) => searchQuery.value = value}
 placeholder="Search..."
 />
)

Understanding these patterns is essential for building interactive web applications with proper form handling and user input management.

Performance Considerations When Using JSX

While JSX provides tremendous flexibility, understanding its performance characteristics helps you make informed decisions about when to use it. The performance difference between templates and JSX is typically negligible for most applications, but certain patterns can impact rendering efficiency.

Vue's template compilation is highly optimized, able to pre-analyze template syntax and generate efficient render functions. Templates also enable Vue to perform static analysis at compile time, identifying elements that won't change between renders and optimizing them out of the diffing process. JSX, being pure JavaScript, doesn't benefit from these compile-time optimizations as directly.

However, the practical impact of these considerations is usually minimal for typical applications. Modern JavaScript engines are exceptionally fast at executing the code generated from JSX, and the difference is often imperceptible. In most cases, the developer experience and code maintainability benefits of JSX outweigh minor performance considerations.

Best Practices for Performance

Performance Best Practices

// Less optimal - creates new function on each render
return () => (
 <button onClick={() => doSomething(id.value)}>Click</button>
)

// Better - use stable function reference
const handleClick = () => doSomething(id.value)
return () => (
 <button onClick={handleClick}>Click</button>
)

// Memoize computed values for expensive operations
const expensiveResult = computed(() => {
 return processLargeDataset(largeArray.value)
})

return () => (
 <div>{expensiveResult.value}</div>
)

These patterns become more important as applications grow in complexity and size. Following performance best practices ensures your Vue applications remain responsive even as they scale. In most cases, the developer experience and code maintainability benefits of JSX outweigh minor performance considerations.

When to Use JSX Versus Templates

Choosing between JSX and templates involves understanding the strengths of each approach and matching them to your specific use case. Vue's templates excel at expressing declarative UI patterns with clear, readable syntax that separates template logic from component logic. JSX shines when you need the full expressive power of JavaScript within your component rendering.

Consider Using JSX When:

You need to programmatically generate complex DOM structures based on runtime conditions
Your template would require multiple nested v-if, v-else-if, and v-for directives that become hard to read
You're migrating from React and want to leverage existing knowledge and patterns
You're building higher-order components or component factories that need to dynamically compose components

Consider Using Templates When:

Your component's UI structure is relatively static and predictable
You want excellent readability for common patterns like lists, conditional sections, and form layouts
Team familiarity with Vue's template syntax is important
For most standard Vue applications, templates remain the recommended default. JSX serves as a powerful complement for specialized scenarios where templates would become cumbersome.

Advanced Patterns and Best Practices

As you become more comfortable with JSX in Vue, several advanced patterns can help you write more maintainable and expressive code. These patterns leverage JavaScript's capabilities while respecting Vue's reactivity and component composition model.

Functional Components

Simple components without internal state can be defined as pure functions, reducing boilerplate:

Using Refs with JSX

Template refs work differently in JSX, requiring explicit ref binding:

TypeScript with JSX

Leverage TypeScript's type system for better IDE support and error detection. Vue provides specific type definitions for JSX that enable type inference and compile-time checking:

Advanced JSX Patterns

// Functional component
const Icon = (props, { slots }) => (
 <span class={`icon icon-${props.name}`}>
 {slots.default?.()}
 </span>
)

Icon.props = {
 name: String
}

// Using Refs with JSX
import { ref, onMounted } from 'vue'

export default {
 setup() {
 const inputRef = ref(null)

 onMounted(() => {
 inputRef.value?.focus()
 })

 return () => <input ref={inputRef} type="text" />
 }
}

// TypeScript with JSX
import { DefineComponent } from 'vue'

interface MyComponentProps {
 title: string
 count: number
 onIncrement: () => void
}

const MyComponent: DefineComponent<MyComponentProps> = {
 props: {
 title: String,
 count: Number
 },
 emits: ['increment'],
 setup(props) {
 return () => (
 <div>
 <h1>{props.title}</h1>
 <button onClick={() => emit('increment')}>
 Count: {props.count}
 </button>
 </div>
 )
 }
}

Dynamic Components

Render dynamic components by treating them as JavaScript expressions:

const components = {
 Alert: AlertComponent,
 Warning: WarningComponent,
 Info: InfoComponent
}

return () => (
 <div>
 {components[variant.value]
 ? h(components[variant.value], { props })
 : <DefaultComponent />
 }
 </div>
)

These advanced techniques enable sophisticated component architectures that scale with application complexity.

Conclusion

Using JSX with Vue provides a powerful extension to your development toolkit, enabling more programmatic control over component rendering when templates become limiting. The combination of Vue's reactive system with JSX's expressive syntax creates opportunities for building complex, dynamic interfaces while maintaining the developer experience that Vue is known for.

Remember that JSX is a tool in your arsenal, not a replacement for templates. The best Vue applications often use both approaches strategically--templates for straightforward UI declarations and JSX for complex programmatic rendering needs. By understanding when each approach shines, you can make informed decisions that improve both code quality and development velocity.

As you explore JSX further, you'll discover patterns that work best for your team and projects. The official Vue.js documentation and community resources provide additional depth on specific topics like functional components, render function recipes, and TypeScript integration. Embrace the flexibility JSX offers while maintaining the principles that make Vue development enjoyable and productive.

Contact our team to learn how we can help you build sophisticated Vue applications that leverage the best of both template and JSX approaches.

Key Benefits of Vue JSX

Why choose JSX for your Vue projects

Full JavaScript Power

Use JavaScript's complete expressive power directly in your render logic, including loops, conditions, and complex transformations.

React Migration Path

Easier migration for teams coming from React, leveraging existing knowledge and patterns while adopting Vue.

Dynamic Components

Programmatically compose and render components based on runtime conditions and configurations.

TypeScript Integration

Strong TypeScript support with proper type inference for JSX elements and component props.

Frequently Asked Questions

Build Modern Vue Applications

Our team creates high-performance web applications using Vue.js and modern development practices. From component architecture to full-stack implementation, we deliver scalable solutions.

Using JSX With Vue

Introduction

Understanding Render Functions and Virtual DOM

Setting Up JSX Support in Vue 3

Vite Configuration

TypeScript Configuration

Writing Components with JSX

Slots in Vue JSX

Conditional Rendering and Lists

List Rendering

Handling Events and Form Inputs

Event Handling Pattern

Performance Considerations When Using JSX

Best Practices for Performance

When to Use JSX Versus Templates

Consider Using JSX When:

Consider Using Templates When:

Advanced Patterns and Best Practices

Functional Components

Using Refs with JSX

TypeScript with JSX

Dynamic Components

Conclusion

Full JavaScript Power

React Migration Path

Dynamic Components

TypeScript Integration

Frequently Asked Questions

Is JSX slower than Vue templates?

Can I mix templates and JSX in the same component?

How do I use v-model with JSX?

What's the difference between Vue JSX and React JSX?

Build Modern Vue Applications

Sources