• Stars
    star
    1,668
  • Rank 26,860 (Top 0.6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

JSX for Vue 3

Babel Plugin JSX for Vue 3

npm package issues-helper

To add Vue JSX support.

English | ็ฎ€ไฝ“ไธญๆ–‡

Installation

Install the plugin with:

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

Then add the plugin to your babel config:

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

Usage

options

transformOn

Type: boolean

Default: false

transform on: { click: xx } to onClick: xxx

optimize

Type: boolean

Default: false

enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.

isCustomElement

Type: (tag: string) => boolean

Default: undefined

configuring custom elements

mergeProps

Type: boolean

Default: true

merge static and dynamic class / style attributes / onXXX handlers

enableObjectSlots

Type: boolean

Default: true

Whether to enable object slots (mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of _isSlot condition expressions which increase your bundle size. And v-slots is still available even if enableObjectSlots is turned off.

pragma

Type: string

Default: createVNode

Replace the function used when compiling JSX expressions.

Syntax

Content

functional component

const App = () => <div>Vue 3.0</div>;

with render

const App = {
  render() {
    return <div>Vue 3.0</div>;
  },
};
import { withModifiers, defineComponent } from 'vue';

const App = defineComponent({
  setup() {
    const count = ref(0);

    const inc = () => {
      count.value++;
    };

    return () => (
      <div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
    );
  },
});

Fragment

const App = () => (
  <>
    <span>I'm</span>
    <span>Fragment</span>
  </>
);

Attributes / Props

const App = () => <input type="email" />;

with a dynamic binding:

const placeholderText = 'email';
const App = () => <input type="email" placeholder={placeholderText} />;

Directives

v-show

const App = {
  data() {
    return { visible: true };
  },
  render() {
    return <input v-show={this.visible} />;
  },
};

v-model

Note: You should pass the second param as string for using arg.

<input v-model={val} />
<input v-model:argument={val} />
<input v-model={[val, ['modifier']]} />
<A v-model={[val, 'argument', ['modifier']]} />

Will compile to:

h(A, {
  argument: val,
  argumentModifiers: {
    modifier: true,
  },
  'onUpdate:argument': ($event) => (val = $event),
});

v-models (Not recommended since v1.1.0)

Note: You should pass a Two-dimensional Arrays to v-models.

<A v-models={[[foo], [bar, 'bar']]} />
<A
  v-models={[
    [foo, 'foo'],
    [bar, 'bar'],
  ]}
/>
<A
  v-models={[
    [foo, ['modifier']],
    [bar, 'bar', ['modifier']],
  ]}
/>

Will compile to:

h(A, {
  modelValue: foo,
  modelModifiers: {
    modifier: true,
  },
  'onUpdate:modelValue': ($event) => (foo = $event),
  bar: bar,
  barModifiers: {
    modifier: true,
  },
  'onUpdate:bar': ($event) => (bar = $event),
});

custom directive

Recommended when using string arguments

const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom:arg={val} />;
  },
};
const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom={[val, 'arg', ['a', 'b']]} />;
  },
};

Slot

Note: In jsx, v-slot should be replaced with v-slots

const A = (props, { slots }) => (
  <>
    <h1>{slots.default ? slots.default() : 'foo'}</h1>
    <h2>{slots.bar?.()}</h2>
  </>
);

const App = {
  setup() {
    const slots = {
      bar: () => <span>B</span>,
    };
    return () => (
      <A v-slots={slots}>
        <div>A</div>
      </A>
    );
  },
};

// or

const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    };
    return () => <A v-slots={slots} />;
  },
};

// or you can use object slots when `enableObjectSlots` is not false.
const App = {
  setup() {
    return () => (
      <>
        <A>
          {{
            default: () => <div>A</div>,
            bar: () => <span>B</span>,
          }}
        </A>
        <B>{() => 'foo'}</B>
      </>
    );
  },
};

In TypeScript

tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

Who is using


Ant Design Vue

Vant

Element Plus

Vue Json Pretty

Compatibility

This repo is only compatible with:

  • Babel 7+
  • Vue 3+

More Repositories

1

vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
TypeScript
206,615
star
2

awesome-vue

๐ŸŽ‰ A curated list of awesome things related to Vue.js
70,860
star
3

core

๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript
43,920
star
4

vue-cli

๐Ÿ› ๏ธ webpack-based tooling for Vue.js Development
JavaScript
29,747
star
5

vuex

๐Ÿ—ƒ๏ธ Centralized State Management for Vue.js.
JavaScript
28,336
star
6

devtools

โš™๏ธ Browser devtools extension for debugging Vue.js applications.
TypeScript
24,243
star
7

vuepress

๐Ÿ“ Minimalistic Vue-powered static site generator
JavaScript
22,293
star
8

vue-router

๐Ÿšฆ The official router for Vue 2
JavaScript
19,008
star
9

pinia

๐Ÿ Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
TypeScript
12,284
star
10

vitepress

Vite & Vue powered static site generator.
TypeScript
10,982
star
11

vue-hackernews-2.0

HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
JavaScript
10,964
star
12

petite-vue

6kb subset of Vue optimized for progressive enhancement
TypeScript
8,689
star
13

apollo

๐Ÿš€ Apollo/GraphQL integration for VueJS
TypeScript
5,980
star
14

vue-class-component

ES / TypeScript decorator for class-style Vue components.
TypeScript
5,812
star
15

vetur

Vue tooling for VS Code.
TypeScript
5,721
star
16

language-tools

โšก High-performance Vue language tooling based-on Volar.js
TypeScript
5,403
star
17

v2.vuejs.org

๐Ÿ“„ Documentation for Vue 2
JavaScript
5,051
star
18

vue-loader

๐Ÿ“ฆ Webpack loader for Vue.js components
TypeScript
4,970
star
19

rfcs

RFCs for substantial changes / feature additions to Vue core
4,822
star
20

eslint-plugin-vue

Official ESLint plugin for Vue.js
JavaScript
4,365
star
21

composition-api

Composition API plugin for Vue 2
TypeScript
4,176
star
22

vuefire

๐Ÿ”ฅ Firebase bindings for Vue.js
TypeScript
3,784
star
23

router

๐Ÿšฆ The official router for Vue.js
TypeScript
3,588
star
24

vue-test-utils

Component Test Utils for Vue 2
JavaScript
3,569
star
25

vue-rx

๐Ÿ‘๏ธ RxJS integration for Vue.js.
JavaScript
3,343
star
26

create-vue

๐Ÿ› ๏ธ The recommended way to start a Vite-powered Vue project
Vue
3,297
star
27

docs

๐Ÿ“„ Documentation for Vue 3
Vue
2,788
star
28

vue-touch

Hammer.js wrapper for Vue.js
JavaScript
2,728
star
29

vuex-router-sync

Effortlessly keep vue-router and vuex store in sync.
JavaScript
2,523
star
30

vue-hackernews

HackerNews clone with Vue.js
Vue
2,514
star
31

v2.cn.vuejs.org

๐Ÿ‡จ๐Ÿ‡ณ Chinese translation for v2.vuejs.org
JavaScript
1,865
star
32

babel-plugin-transform-vue-jsx

babel plugin for vue 2.0 jsx
JavaScript
1,844
star
33

vue-syntax-highlight

๐Ÿ’ก Sublime Text syntax highlighting for single-file Vue components
1,481
star
34

jsx-vue2

monorepo for Babel / Vue JSX related packages
JavaScript
1,450
star
35

ui

๐Ÿ’ป UI components for official Vue organization apps
Vue
1,331
star
36

vue-docs-zh-cn

่ฏฅ้กน็›ฎๅทฒไธๅ†็ปดๆŠค๏ผŒๆœ‰ๅŠณ้€š่ฟ‡ Vue ๅฎ˜็ฝ‘ๆŸฅ้˜…ๆœ€ๆ–ฐ็š„ๆ–‡ๆกฃ
1,330
star
37

core-vapor

Vue Vapor is a variant of Vue that offers rendering without the Virtual DOM.
TypeScript
1,205
star
38

vueify

Browserify transform for single-file Vue components
JavaScript
1,172
star
39

vue-web-component-wrapper

(Vue 2 only) Wrap a Vue component as a web component / custom element.
JavaScript
1,036
star
40

docs-next-zh-cn

๐Ÿ‡จ๐Ÿ‡ณ Chinese translation for v3.vuejs.org
Vue
959
star
41

test-utils

Vue Test Utils for Vue 3
TypeScript
957
star
42

devtools-next

The next iteration of Vue DevTools
TypeScript
882
star
43

roadmap

๐Ÿ—บ๏ธ Roadmap for the Vue.js project (archive)
851
star
44

rollup-plugin-vue

Roll .vue files
TypeScript
846
star
45

repl

Vue SFC REPL as a Vue 3 component
TypeScript
799
star
46

vue-jest

Jest Vue transformer
JavaScript
741
star
47

vue-migration-helper

CLI tool to aid in migration from Vue 1.x to 2.0
JavaScript
595
star
48

vue-dev-server

A POC dev server that allows you to import `*.vue` files via native ES modules imports.
TypeScript
572
star
49

vue2-ssr-docs

Vue.js Server-Side Rendering Guide (for Vue 2)
559
star
50

vue-hot-reload-api

๐ŸŒถ๏ธ Hot reload API for Vue components
JavaScript
465
star
51

vue-animated-list

A Vue.js plugin for easily animating `v-for` rendered lists.
JavaScript
462
star
52

vue-next-webpack-preview

JavaScript
427
star
53

vue-eslint-parser

The ESLint custom parser for `.vue` files.
TypeScript
422
star
54

vue-async-data

Async data loading plugin
JavaScript
417
star
55

vue-component-compiler

Compile a single file Vue component into a CommonJS module.
TypeScript
341
star
56

vue-cli-plugin-vue-next

A Vue CLI plugin for trying out vue-next (experimental)
JavaScript
339
star
57

eslint-config-vue

JavaScript
326
star
58

component-compiler-utils

Lower level utilities for compiling Vue single file components
TypeScript
318
star
59

blog

๐Ÿ“ The official Vue.js blog
Vue
296
star
60

vue-test-utils-jest-example

Example project using Jest + vue-test-utils together
JavaScript
296
star
61

tsconfig

Base tsconfig for Vue 3 projects.
280
star
62

vue-template-explorer

Vue template compilation explorer
Vue
263
star
63

events

Source code for the new Vue.js Events page
Vue
252
star
64

vue-codemod

Vue.js codemod scripts
TypeScript
250
star
65

jp.vuejs.org

๐Ÿ‡ฏ๐Ÿ‡ต Japanese translation for vuejs.org
JavaScript
246
star
66

theme

VitePress theme for vuejs.org.
Vue
217
star
67

v3-migration-guide

Vue 2 -> Vue 3 migration guide
JavaScript
211
star
68

vue-element

register a custom element with Vue.js.
JavaScript
208
star
69

vue-curated

๐Ÿ–ผ๏ธ The curated Vue packages list
177
star
70

Discussion

Vue.js discussion
166
star
71

vuex-observable

Consume Vuex actions as Observables using RxJS 5
JavaScript
155
star
72

vue-issue-helper

Vue
145
star
73

composition-api-converter

Automatically migrate components to the Function API
JavaScript
145
star
74

babel-preset-vue-app

Babel preset for Vue app.
JavaScript
125
star
75

art

๐ŸŽจ Artworks
121
star
76

laravel-elixir-vue-2

Laravel Elixir Vue 2.0 support plugin
JavaScript
106
star
77

composition-api-rfc

Vuepress render for the Composition API RFC
JavaScript
106
star
78

vue-router-demos

Live demos for vue-router
Vue
106
star
79

eslint-plugin-vue-libs

Eslint plugin for Vue internal development
JavaScript
105
star
80

vue-test-utils-mocha-webpack-example

Example project using mocha-webpack and vue-test-utils
JavaScript
104
star
81

eslint-config-typescript

eslint-config-typescript for vue projects
JavaScript
103
star
82

babel-preset-vue

Babel preset for transforming Vue JSX.
JavaScript
87
star
83

ecosystem-ci

Vue Ecosystem CI
TypeScript
81
star
84

vue-test-utils-getting-started

Demo project for `vue-test-utils`
JavaScript
81
star
85

vue-webpack-meteor-example

Example using Vue with Meteor, while leveraging the normal Webpack + NPM workflow for your front-end.
Vue
78
star
86

vue-requests

Need a Vue.js module or looking for ideas?
70
star
87

eslint-config-airbnb

ESLint Shareable Configs for Airbnb JavaScript Style Guide in Vue.js Projects
JavaScript
67
star
88

news.vuejs.org

Vue.js News Portal
Vue
66
star
89

vue-curated-client

Official curation list client
Vue
65
star
90

eslint-config-prettier

eslint-config-prettier for vue-cli
JavaScript
61
star
91

vue-template-es2015-compiler

Support a subset of handy ES2015 features in Vue 2.0 templates.
JavaScript
60
star
92

vue-test-utils-typescript-example

Example project using TypeScript, Jest + vue-test-utils together
Vue
59
star
93

create-eslint-config

Utility to setup ESLint in Vue.js projects.
JavaScript
41
star
94

vue-ssr-html-stream

Transform stream to simplify Vue SSR streaming
HTML
40
star
95

eslint-config-standard

ESLint Shareable Configs for JavaScript Standard Style in Vue.js Projects
JavaScript
39
star
96

create-vue-templates

Snapshots of the generated templates of `npm create vue@latest`
Vue
39
star
97

it.vuejs.org

Italian translation for vuejs.org ๐Ÿ‡ฎ๐Ÿ‡น
JavaScript
35
star
98

systemjs-plugin-vue

SystemJS plugin for Vue single file components
JavaScript
34
star
99

test-utils-docs

Docs for vue-test-utils-next
JavaScript
32
star
100

vue-curated-server

JavaScript
31
star