⚠️ You are looking at the english version of the page. Help us translate it here.

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.

Contributors

Jumpa kesalahan atau ingin berkontribusi pada dokumentasi ini? Sunting halaman ini di GitHub!

Platinum Sponsors

Storyblok Support Us