Comment utiliser JSX ?

Nuxt.js utilise le babel-preset-vue-app officiel comme configuration par défaut afin de pouvoir utiliser JSX dans vos composants.

Vous pouvez utiliser JSX dans la méthode render de vos composants :

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

Créer un alias h pour createElement est une convention commune que vous rencontrerez dans l'écosystème Vue mais n'est pas nécessaire pour JSX depuis qu'il injecte automatiquement const h = this.$createElement dans toutes les méthodes et les accesseurs (ce n'est pas le cas pour les fonctions et les fonctions fléchées) déclarées avec la syntaxe ES2015 supportant JSX. Vous pouvez alors laisser tomber le paramètre h.

Vous pouvez en savoir plus dans la section JSX de la documentation de Vue.js.

Vous avez vu une erreur ou vous souhaitez contribuer à la documentation ? Éditez cette page sur GitHub !