Static GitHub Issues

[131] How to use JSX from vue plugin?

prev: roadmap?
next: render issue on mobile safari

Hello. I'm trying to use vue-tables-2 plugin, it uses JSX in your own templates.

packages.json

{
  //...
  "dependencies": {
    "babel-helper-vue-jsx-merge-props": "^2.0.2",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.3.0",
    "nuxt": "latest",
    "vue-tables-2": "^0.2.77"
  },
  //...
}

nuxt.config.js

module.exports = {
  build: {
    vendor: ['vue-tables-2'],
    babel: {
      plugins: ['transform-vue-jsx']
    }
  },
  plugins: ['~plugins/vue-tables-2'],
  //...
}

plugins/vue-tables-2.js

import Vue from 'vue'
import VueTables from 'vue-tables-2'

Vue.use(VueTables.server, {}, true)

But I get the following error:

ERROR in ./~/vue-tables-2/lib/template.jsx
Module parse failed: app_root/node_modules/vue-tables-2/lib/template.jsx Unexpected token (15:7)
You may need an appropriate loader to handle this file type.

Please tell me what am I doing wrong?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c111">#c111</a>)</em></sub></div>