How to do it...

JSX needs a Babel plugin to work. For this recipe, I will assume that you are working within the webpack template.

To install the babel plugin, you can run the following command:

npm install  babel-plugin-syntax-jsx  babel-plugin-transform-vue-jsx  babel-helper-vue-jsx-merge-props  --save-dev

Inside the .babelrc file, add the following in the plugins array:

"plugins": [  ...  "transform-vue-jsx"]

Run npm install as usual to actually install all the dependencies.

Now, open the main.js and delete everything inside. Replace it with the following code:

import Vue from 'vue'/* eslint-disable no-new */new Vue({  el: '#app',  render (h) {    return <div>{this.msg}</div>  },  data: {    msg: 'Hello World'  }})

The highlighted line is the weird ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.