vite で Vue3 + "JSX" + TypeScript のビルド環境 を構築する

June 10, 2021

背景

  • vite を使って
  • Vue3 + JSX + TypeScript で
    • vue ファイル内で
    • <script lang="tsx"> って書いて
    • setup(){ return ()=> <></> } する
  • ビルド (npx vite) したいんだけれど、

vite/create-app に jsx 用のテンプレートがない 😭

やること

ボイラープレート持ってきて

npm init @vitejs/app my-vue-app -- --template vue-ts

プラグインいれる

@vitejs/plugin-vue-jsx

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(), // <= を "追加" する
  ],
});

個人的ちょっとreadme が不親切かなと思うのが、plugin-vue-jsxのみを plugin に入れると、vue ファイルは扱えない環境になる(おそらく、jsx ファイルのみが扱える)。 script tag で defineComponent、style tag で css を書くなら、plugin-vueplugin-vue-jsx併用する

vue 界隈では普通なのかな…。vue-jsx って名前だし、まぁそうかも、、、。

JSX かく

  • lang を tsx にして
  • setup()の戻り値に JSX を書く
  • 画像ファイルのパスを src からの相対パスにする(SFC のときは vue ファイルからの相対パス)
<script lang="tsx">
// 略
export default defineComponent({
  // 略
  setup() {
    return () => (
      <>
        <img alt="Vue logo" src="src/assets/logo.png" />
        <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
      </>
    );
  },
});
</script>

<style>
/* 略 */
</style>
  • @click は onClick で中身に関数を書く
  • ref の値 (count) は、JSX 内では count.value で参照・更新をする
<script lang="tsx">
/* 略 */
export default defineComponent({
  /* 略 */
  setup(props) {
    const count = ref(0);
    return () => (
      <>
        // 略
        <button type="button" onClick={() => count.value++}>
          count is: {count.value}
        </button>
        // 略
      </>
    );
  },
});
</script>

<style scoped>
/* 略 */
</style>

これで 快適 vue vite ライフ!😊

Profile picture
LLer and programmer.
@T28_tatsuya