JSX を使うには?

Nuxt.js は babel のデフォルトの設定のために公式の babel-preset-vue-app を使用しています。そのため、コンポーネントに JSX を使うことができます。

コンポーネントの render メソッド内で JSX が使えます:

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

createElementh にエイリアスすることは、Vue エコシステムで見られる共通の慣例ですが、実は JSX 向けのオプションです。JSX を持つ ES2015 の構文で宣言された(関数またはアロー関数ではない)メソッドやゲッターに const h = this.$createElement自動的にインェジクトするため、(h) パラメータを削除することができます。

JSX の使い方をより深く理解するには Vue.js ドキュメントの JSX のセクション を参照してください。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する