vue-jsx-adaptor

Vue 2.0 runtime adaptor for React JSX


Keywords
vue, jsx
License
MIT
Install
npm install vue-jsx-adaptor@1.0.1

Documentation

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!