SoFunction
Updated on 2025-04-03

Common and simple introduction to TSX Vue3+Vite

1. Install tsx

1. Install the tsx plugin

npm install @vitejs/plugin-vue-jsx -D

Configuration in

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
 
 
// /config/
export default defineConfig({
  plugins: [vue(),vueJsx()],
})

Configuration in

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
  },
  "include": ["src/**/*.ts", "src/**/*.", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./" }]
}

These three are configuration items

    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",

2. Use TSX

The code in

<template>
  <renderDom title="I'm the title" @on-click="getNum"></renderDom>
</template>
 
<script setup lang="ts">
 
import renderDom from "./App";
import { provide, ref } from "vue";
 
const data = ref(false);
provide("flag", data);
const getNum = (num: number) => {
  ("I accepted it", num);
};
</script>
 
<style>
</style>

Code

import { ref } from "vue";
 
let v = ref<string>("");
let flag = ref(false);
let arr = ref([0, 1, 2, 3, 4, 5]);
// Tsx does not automatically structure so you should use .valuetype Props = {
  title: string;
};
const renderDom = (props: Props, ctx: any) => {
  return (
    <div>
        <button onClick={(this,ctx)}>Clickemit</button>
      <h1>{}</h1>
      <div>
        <input v-model={} type="text" />
        <div>
          <h1>{}</h1>
        </div>
      </div>
      <div>
        <div v-show={}>Correct</div>
        <div v-show={!}>Wrong</div>
      </div>
      {/* <div>
         <div v-if={}>Correct</div>
         <div v-if={!}>Error</div>
         </div> */}
      {/* does not support v-if, ternary expressions can be used instead */}
      &lt;div&gt;{ ? &lt;div&gt;Correct&lt;/div&gt; : &lt;div&gt;Wrong&lt;/div&gt;}&lt;/div&gt;
      {/* V-for is not supported, but map loop can be used instead */}
      {/*Do not support v-bind, you can directly bind the value */}
      &lt;div&gt;
        {((item, i: any) =&gt; {
          return (
            &lt;div data-inext={i} onClick={(this, i)}&gt;
              {item}
            &lt;/div&gt;
          );
        })}
      &lt;/div&gt;
    &lt;/div&gt;
  );
};
 
const clickIndex = (i: any) =&gt; {
  alert(i);
};
 
const clickEmit=(ctx:any)=&gt;{
    ('on-click',123)
}
export default renderDom;

Notice:

The tag content written in it will not be automatically deconstructed, so the .value in ref still needs to be added to the value to support v-show, v-model, but does not support v-bind, v-for, v-if, so when writing these, you need to change the writing method.

v-if uses ternary expressions

  &lt;div&gt;{ ? &lt;div&gt;Correct&lt;/div&gt; : &lt;div&gt;Wrong&lt;/div&gt;}&lt;/div&gt;

 v-for is implemented by traversing the array through map function

 <div>
        {((item, i: any) => {
          return (
            <div data-inext={i} onClick={(this, i)}>
              {item}
            </div>
          );
        })}
  </div>

v-bind can directly bind values

 <div data-inext={i} onClick={(this, i)}>

Props and emit use

&lt;renderDom title="I'm the title" @on-click="getNum"&gt;&lt;/renderDom&gt;

(Title of value)

type Props = {
  title: string;
};
const renderDom = (props: Props, ctx: any)

(It can be used after receiving it in renderDom, just like before)

const renderDom = (props: Props, ctx: any)

(Get the context)

 &lt;button onClick={(this,ctx)}&gt;Clickemit&lt;/button&gt;

(Binding method)

const clickEmit=(ctx:any)=>{
    ('on-click',123)
}

(Passing value through emit)

(The above is in the file)

  &lt;renderDom title="I'm the title" @on-click="getNum"&gt;&lt;/renderDom&gt;

(Binding custom events)

const getNum = (num: number) =&gt; {
  ("I received it", num);
};

(Get the value and use it)

(The above is received and used by the parent component)

Summarize

This is the article about Vue3+Vite, which is a common and simple introduction to TSX. This is all about this article. For more common usage content related to TSX, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!