Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuejs/jsx-vue2
monorepo for Babel / Vue JSX related packages
https://github.com/vuejs/jsx-vue2
Last synced: 27 days ago
JSON representation
monorepo for Babel / Vue JSX related packages
- Host: GitHub
- URL: https://github.com/vuejs/jsx-vue2
- Owner: vuejs
- Created: 2018-02-25T00:57:04.000Z (over 6 years ago)
- Default Branch: dev
- Last Pushed: 2023-07-04T11:21:26.000Z (over 1 year ago)
- Last Synced: 2024-04-13T21:44:21.852Z (7 months ago)
- Language: JavaScript
- Homepage: https://jsx-vue2-playground.netlify.app/
- Size: 1.71 MB
- Stars: 1,457
- Watchers: 22
- Forks: 97
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Babel Preset JSX
> [!CAUTION]
> Vue 2 has reached EOL, and this project is no longer actively maintained.
Configurable Babel preset to add Vue JSX support. See the [configuration options here](./packages/babel-preset-jsx).
## Compatibility
This repo is only compatible with:
- **Babel 7+**. For Babel 6 support, use [vuejs/babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
- **Vue 2+**. JSX is not supported for older versions. For Vue 3 support, please use [`@vue/babel-plugin-jsx`](https://github.com/vuejs/babel-plugin-jsx).
## Installation
Install the preset with:
```bash
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
```
Then add the preset to `babel.config.js`:
```js
module.exports = {
presets: ['@vue/babel-preset-jsx'],
}
```
## Syntax
### Content
```jsx
render() {
return
hello
}
```
with dynamic content:
```jsx
render() {
return
hello { this.message }
}
```
when self-closing:
```jsx
render() {
return
}
```
with a component:
```jsx
import MyComponent from './my-component'
export default {
render() {
return hello
},
}
```
### Attributes/Props
```jsx
render() {
return
}
```
with a dynamic binding:
```jsx
render() {
return
}
```
with the spread operator (object needs to be compatible with [Vue Data Object](https://v2.vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)):
```jsx
render() {
const inputAttrs = {
type: 'email',
placeholder: 'Enter your email'
}
return
}
```
### Slots
named slots:
```jsx
render() {
return (
header
footer
)
}
```
scoped slots:
```jsx
render() {
const scopedSlots = {
header: () => header,
footer: () => footer
}
return
}
```
### Directives
```jsx
```
with a modifier:
```jsx
```
with an argument:
```jsx
```
with an argument and modifiers:
```jsx
```
v-html:
```jsx
```
### Functional Components
Transpiles arrow functions that return JSX into functional components, when they are either default exports:
```jsx
export default ({ props }) =>
hello {props.message}
```
or PascalCase variable declarations:
```jsx
const HelloWorld = ({ props }) =>
hello {props.message}
```