When working with JSX in Vue, it requires creating a dedicated file, whereas in React, we can use it inline within JavaScript. Is there a way to achieve this in Vue?
Contents of .babelrc :
{
"presets": [
"@babel/preset-react"
]
}
Contents of vite.config.js:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
I attempted the default configuration using this Vue file:
<template>
t
</template>
<script setup>
import {ref} from 'vue'
let t = <div>test</div>
</script>
However, I encountered this error: [plugin:vite:vue] [vue/compiler-sfc] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (3:8)