tsx in Nuxt.js (Composition API 先取り)

Vue Composition API の発表が先日ありましたが、 Nuxt v2.9.2 でそれを使って tsx を書く環境の構築に中々ハマったので、備忘録も兼ねてまとめておきます。

はじめに

公式を参考に、 TypeScript 環境を構築しておいてください。また、邪悪な JavaScript の駆逐のためにも、 @nuxt/typescript-runtime は忘れずにインストールしましょう。

セットアップ

まず、必要なものをインストールします。

$ yarn add @vue/composition-api
$ yarn add -D babel-preset-vca-jsx

次に plugin を登録します。これは公式の通りなので、コピペさせていただきます。

// @/plugins/compositionAPI.ts
import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

// nuxt.config.ts
const config: Configuration = {
  ...
  pliugins: ['@/plugins/compositionAPI.ts'],
  ...
}

最後に、babel の設定を拡張します。 tsx で書くためには、 createComponent を h にマッピングしてもらわないとできないので、 babel-preset-vca-jsx の力を借ります。自分はここに気づくのにハマってしまいました。

// nuxt.config.ts
const config: Configuration = {
  ...
  build: {
    babel: {
      presets({ isServer }) {
        return [
          [require.resolve('babel-preset-vca-jsx')],
          [
            require.resolve('@nuxt/babel-preset-app'),
            {
              targets: isServer ? { node: 'current' } : { ie: '9' },
            },
          ],
        ]
      },
    },
  },
  ...
}

サンプル

// hoge.tsx
import { createComponent } from '@vue/composition-api'

export default createComponent({
  setup() {
    return () => (
      <div>
        <p>hogehoge</p>
      </div>
    )
  },
})

終わりに

以上で tsx で書けるようセットアップができました。あとは、Composition APIや、React hooks との比較等を参考にして、型安全で幸せな tsx ライフを送っていきましょう。