How to use JSX?

Nuxt.js uses the official babel-preset-vue-app for babel default configuration, so you can use JSX in your components.

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

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

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 how to use it in the JSX section of the Vue.js documentation.

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!