0
# @vue/babel-preset-jsx
1

2
@vue/babel-preset-jsx is a configurable Babel preset that enables JSX syntax support for Vue.js applications. It serves as a meta-package that orchestrates multiple specialized Babel plugins to transform JSX syntax into Vue-compatible render functions, supporting advanced Vue.js features including component props, slots, scoped slots, directives (v-model, v-on), functional components, and composition API integration.
3

4
## Package Information
5

6
- **Package Name**: @vue/babel-preset-jsx
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props`
10

11
## Core Imports
12

13
```javascript
14
// babel.config.js or .babelrc.js
15
module.exports = {
16
  presets: ['@vue/babel-preset-jsx']
17
}
18
```
19

20
For programmatic use:
21

22
```javascript
23
const babelPresetJsx = require('@vue/babel-preset-jsx');
24
```
25

26
## Basic Usage
27

28
### Simple Configuration
29

30
```javascript
31
// babel.config.js
32
module.exports = {
33
  presets: ['@vue/babel-preset-jsx']
34
}
35
```
36

37
### With Options
38

39
```javascript
40
// babel.config.js
41
module.exports = {
42
  presets: [
43
    [
44
      '@vue/babel-preset-jsx',
45
      {
46
        functional: true,
47
        injectH: true,
48
        vModel: true,
49
        vOn: true,
50
        compositionAPI: false
51
      }
52
    ]
53
  ]
54
}
55
```
56

57
### Composition API Integration
58

59
```javascript
60
// babel.config.js - Auto-detect Vue version
61
module.exports = {
62
  presets: [
63
    [
64
      '@vue/babel-preset-jsx',
65
      {
66
        compositionAPI: 'auto'
67
      }
68
    ]
69
  ]
70
}
71

72
// For Vue 3
73
module.exports = {
74
  presets: [
75
    [
76
      '@vue/babel-preset-jsx',
77
      {
78
        compositionAPI: 'native'
79
      }
80
    ]
81
  ]
82
}
83
```
84

85
## Capabilities
86

87
### Babel Preset Factory Function
88

89
The main export that creates a Babel preset configuration with selectable Vue JSX transformation plugins.
90

91
```javascript { .api }
92
/**
93
 * Creates a Babel preset configuration for Vue JSX transformation
94
 * @param {Object} babel - The Babel instance (unused but required by Babel preset API)
95
 * @param {PresetOptions} options - Configuration options for the preset
96
 * @returns {PresetConfiguration} Babel preset configuration object
97
 */
98
function babelPresetJsx(babel, options = {}) {
99
  // Returns { plugins: Array<Plugin|[Plugin, Options]> }
100
}
101
```
102

103
## Types
104

105
```javascript { .api }
106
/**
107
 * Configuration options for the Vue JSX Babel preset
108
 */
109
interface PresetOptions {
110
  /** Enable functional components syntactic sugar (default: true) */
111
  functional?: boolean;
112
  
113
  /** Enable automatic h injection syntactic sugar (default: true) */
114
  injectH?: boolean;
115
  
116
  /** Enable vModel syntactic sugar (default: true) */
117
  vModel?: boolean;
118
  
119
  /** Enable vOn syntactic sugar (default: true) */
120
  vOn?: boolean;
121
  
122
  /** 
123
   * Enable composition API support (default: false)
124
   * - false: Disabled
125
   * - true | 'auto': Auto-detect Vue version for import source
126
   * - 'native' | 'naruto': Import from 'vue'
127
   * - 'vue-demi': Import from 'vue-demi'
128
   * - { importSource: string }: Custom import source
129
   */
130
  compositionAPI?: boolean | string | CompositionAPIConfig;
131
}
132

133
/**
134
 * Custom composition API configuration
135
 */
136
interface CompositionAPIConfig {
137
  /** Custom import source for composition API utilities */
138
  importSource: string;
139
}
140

141
/**
142
 * Babel preset configuration returned by the factory function
143
 */
144
interface PresetConfiguration {
145
  /** Array of Babel plugins with their configurations */
146
  plugins: Array<Plugin | [Plugin, PluginOptions]>;
147
}
148
```
149

150
## Plugin Orchestration
151

152
The preset conditionally includes these plugins based on configuration:
153

154
1. **@vue/babel-plugin-transform-vue-jsx** - Core JSX transformation (always included)
155
2. **@vue/babel-sugar-functional-vue** - Functional components sugar (when `functional: true`)
156
3. **@vue/babel-sugar-inject-h** - Automatic h injection (when `injectH: true`)
157
4. **@vue/babel-sugar-composition-api-inject-h** - Composition API h injection (when `compositionAPI` enabled)
158
5. **@vue/babel-sugar-composition-api-render-instance** - Composition API render instance (when `compositionAPI` enabled)
159
6. **@vue/babel-sugar-v-model** - v-model directive sugar (when `vModel: true`)
160
7. **@vue/babel-sugar-v-on** - v-on directive sugar (when `vOn: true`)
161

162
## Configuration Examples
163

164
### Minimal Configuration
165

166
```javascript
167
// Only enable core JSX transformation
168
module.exports = {
169
  presets: [
170
    [
171
      '@vue/babel-preset-jsx',
172
      {
173
        functional: false,
174
        injectH: false,
175
        vModel: false,
176
        vOn: false,
177
        compositionAPI: false
178
      }
179
    ]
180
  ]
181
}
182
```
183

184
### Vue 3 with Composition API
185

186
```javascript
187
// Vue 3 with native composition API support
188
module.exports = {
189
  presets: [
190
    [
191
      '@vue/babel-preset-jsx',
192
      {
193
        compositionAPI: 'native'
194
      }
195
    ]
196
  ]
197
}
198
```
199

200
### Custom Import Source
201

202
```javascript
203
// Custom composition API import source
204
module.exports = {
205
  presets: [
206
    [
207
      '@vue/babel-preset-jsx',
208
      {
209
        compositionAPI: {
210
          importSource: 'my-vue-composition-library'
211
        }
212
      }
213
    ]
214
  ]
215
}
216
```
217

218
### Vue 2.7 Compatibility
219

220
```javascript
221
// Automatic detection for Vue 2.7
222
module.exports = {
223
  presets: [
224
    [
225
      '@vue/babel-preset-jsx',
226
      {
227
        compositionAPI: 'auto'
228
      }
229
    ]
230
  ]
231
}
232
```
233

234
## Error Handling
235

236
The preset includes automatic Vue version detection when `compositionAPI` is set to `'auto'` or `true`. If Vue package cannot be found or read, it falls back to the default `@vue/composition-api` import source without throwing an error.
237

238
```javascript
239
// Automatic fallback behavior
240
try {
241
  const vueVersion = require('vue/package.json').version;
242
  if (vueVersion.startsWith('2.7')) {
243
    importSource = 'vue';
244
  }
245
} catch (e) {
246
  // Falls back to '@vue/composition-api'
247
}
248
```