Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Let’s start with pure JSX. A quick search on Vue 2 docs brings the following results: There’s certainly not a lot of it, but potentially that’s all we need? The link redirects us to a GitHub README, detailing the installation of the required Babel plugin and the general usage of JSX with other Vue features.
In a nutshell, you once again have to add jsx: “preserve” to your tsconfig.json and do some changes in your Babel config (it’s a plugin this time):
Again, the configuration shouldn’t be much of a problem with all the available tools out there. Vite is a noteworthy newcomer, straight from the Vue core team. It sports a super-fast ESM workflow and supports TypeScript, JSX, and TSX with little to no configuration.
The reason I’ve just walked you through the generic Vue 2 TSX setup isn’t really to showcase “how to” do it. It’s to show you “how flawed” the whole process is. Sure, it might be useful when converting an existing project or boilerplate, but most of the time, you’ll do just fine with Vue CLI and a proper set of plugins or a no-config bundler like Parcel or Poi. However, this won’t fix the plethora of potential setup issues or lack of in-depth documentation. More than that, none of these ways will grant you proper TSX experience, as you might know it from React.