Vue jsx adaptor

Vue 2.0 runtime adaptor for React JSX

Version: 1.0.1 Updated: 09/09/2016

By: vuejs License: MIT

Downloads Last 30 Days: 20

Install

npm i vue-jsx-adaptor
yarn add vue-jsx-adaptor

Repository: https://github.com/vuejs/vue-jsx-adaptor

CDNs

bundle.run: https://bundle.run/vue-jsx-adaptor

jsDelivr: https://cdn.jsdelivr.net/npm/vue-jsx-adaptor

unpkg: https://unpkg.com/vue-jsx-adaptor

vue-jsx-adaptor

This is an alternative solution for using JSX with Vue 2.0. Instead of babel-plugin-transform-vue-jsx, you can use the normal React JSX transforms with this runtime plugin.

Note because this plugin translates React JSX props into Vue Virtual DOM data format at runtime, there will be a small performance loss. It is still recommended to use babel-plugin-transform-vue-jsx unless you have a particular reason that prevents you from doing so.

Usage

  1. Setup React JSX transpilation. The only different part is you need to specify the pragma to h. For example with Babel + babel-plugin-transform-react-jsx, you need the following .babelrc:

    {
     "presets": [
       "es2015"
     ],
     "plugins": [
       "syntax-jsx",
       ["transform-react-jsx", {"pragma": "h"}]
     ]
    }
  2. In your application code, install this library as a Vue plugin:

    npm install vue-jsx-adaptor --save
    import Vue from 'vue'
    import JSXAdaptor from 'vue-jsx-adaptor'
    
    Vue.use(JSXAdaptor) // tada!
Categories: Vue js
Tags: vuejsx