Comment utiliser JSX ?

Nuxt.js utilise @nuxt/babel-preset-app, basée sur @vue/babel-preset-app comme configuration par default, ce qui vous permet d'utiliser JSX dans vos composants.

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

<script>
export default {
  data () {
    return { name: 'Le Monde' }
  },
  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és 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 Vue.js.

Contributors

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

Platinum Sponsors

Storyblok Support Us