Nuxt.js に vue-tsx-support を利用して tsx コンポーネントを突っ込む

Next.js でブログを作ろうとしたで冒頭に書いた通り、Next.js で vue-tsx-support を用いて Next.js のために作ったコンポーネントを再利用しようと試みたのだが、下らないところで詰まって導入に数時間かかったので、知見として導入方法を書いておきたいと思う。今ももう覚えているか怪しいが…。

Nuxt.js + TypeScript プロジェクトを作ろう

npx create-nuxt-app <projectName> で生やせるのは皆さんご存知なので、これで適当に生やした後

yarn add @nuxt/typescript-runtime vue-tsx-support

yarn add -D @nuxt/typescript-build

nuxt.config.js -> nuxt.config.ts にして import { Configuration } from "@nuxt/types" の型をつける

src フォルダを作ってフォルダを全部その下に移動する

nuxt.config.ts に srcDir: './src' buildModules: ["@nuxt/typescript-build"]

これ重要で buildModules 書き忘れで数時間無駄にしました

src/types/shims ディレクトリ生やして shims-vue.d.ts 作ろう

Nuxt.js + TypeScript の導入マニュアルにも書いてあったはず

https://typescript.nuxtjs.org/ja/guide/setup.html#設定

全部書いてあるんだが…

上見てください　何のためにここまで詳しく書いたんだよ

buildModules もちゃんと書いてあるじゃんというかなんかの拍子で消えたんだよな

build に parallel 設定追加したら一緒に消えた気がする

単純な範囲選択ミスです

vue-tsx-support を追加してみよう

src/types/shims に shims-tsx.d.ts jsx.d.ts の2ファイルを追加します

components に pages でも作って index.tsx 作る

適当に書いてみよう

index.tsx

import Vue, { CreateElement, VNode } from "vue" 
import * as tsx from "vue-tsx-support" 
 
export const Index = tsx.component({ 
  name: "Index", 
  props: {}, 
  render(): VNode { 
    return <div>This is tsx element</div> 
  }, 
})

pages/index.vue から呼んでみよう

index.vue

<template> 
  <div class="container"> 
    <Index /> 
  </div> 
</template> 
 
<script lang="ts"> 
import Vue from "vue" 
import { Index } from "~/components/pages/index" 
 
export default Vue.extend({ 
  components: { Index }, 
}) 
</script>

これ lang="ts" 忘れて型補完効かないんだけど :anger: みたいなこともありがちなので

実際あった！感嘆符禁止週間

覚えてました。みんなもレッツ tsx in vue

tsx component のファイル開きながら yarn add したら TypeScript: Restart TS Server するまで型補完ブチ壊れることが多いよね

というか百発百中？

このメニューは .ts(x) ファイルでしか出ないはずなので .vue ファイルにいたら切り替えが必要になってだるい！感嘆符禁止