How to use JSX?

Nuxt.js uses @nuxt/babel-preset-app, which is based on the official @vue/babel-preset-app for babel default configuration, so you can use JSX in your components.

You can now use JSX in the render method of your components:

<script>
export default {
  data () {
    return { name: 'World' }
  },
  render (h) {
    return <h1 class="red">{this.name}</h1>
  }
}
</script>

Aliasing createElement to h is a common convention you’ll see in the Vue ecosystem but is actually optional for JSX since it automatically injects const h = this.$createElement in any method and getter (not functions or arrow functions) declared in ES2015 syntax that has JSX so you can drop the (h) parameter.

You can learn more about how to use it in the JSX section of the Vue.js documentation.

← How to use pre-processors? How to add PostCSS plugins? →