Install @vitejs/plugin-vue-jsx
yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx
Configuration
...
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [vueJsx(), ...],
...
})Practical use
Create new or, please note that vue is no longer suffix
The first way to write this
I used this, I don't recommend it
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup(){
const str = ref<string>('Use of tsx');
const clickFunc1 = () => {
('No parameters');
}
const clickFunc2 = (msg: string = 'default value') => {
(msg);
}
return {
str,
clickFunc1,
clickFunc2
};
},
render(){
return (
<>
<div class='async'>{}</div>
<button onClick={this.clickFunc1}>Click without passing parameters</button>
<button onClick={() => this.clickFunc2('Extra parameters')}>Pass the parameters and click</button>
</>
);
}
})
The second way to write
The function body is equivalent to setup. This method cannot obtain props, emits, etc. (I may not understand it). It is not recommended to use it if there are strong interactive features, otherwise you can consider it.
import { defineComponent, ref } from 'vue';
export default defineComponent(() => {
const str = ref<string>('Use of tsx');
const clickFunc1 = () => {
('No parameters');
}
const clickFunc2 = (msg: string = 'default value') => {
(msg);
}
const render = (
<>
<div class='async'>{}</div>
<button onClick={clickFunc1}>Click without passing parameters</button>
<button onClick={() => clickFunc2('Extra parameters')}>Pass the parameters and click</button>
</>
);
return () => render;
})
The third way to write
Recommend this writing method
import { defineComponent, ref } from 'vue';
export default defineComponent({
props: {
params: {
type: Object,
default: () => {}
}
},
setup(props){
const str = ref<string>('Use of tsx');
const clickFunc1 = () => {
('No parameters');
}
const clickFunc2 = (msg: string = 'default value') => {
(msg);
(props);
}
return () => (
<>
<div class='async'>{}</div>
<button onClick={clickFunc1}>Click without passing parameters</button>
<button onClick={() => clickFunc2('Extra parameters')}>Pass the parameters and click</button>
</>
);
}
})This is the end of this article about the detailed use of vue3+vite with jsx and tsx. For more related vue3 jsx/tsx content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!