The one thing that bugs me tremendously with Vue template syntax is slots. They are so annoying to use and hardly visible in code completion. Passing template/HTML fragments as props is so much nicer in JSX. This is the only reason, why I even consider using JSX instead of Vue's template syntax. Thus, I'm very much interested in your experiences with Vue+JSX. Especially in regards of (third-party) tooling support. While JSX is officially supported by Vue, it does not seem to be encouraged and may have subpar support in the ecosystem. But that is only something I'm afraid of, I do not have any experience with it, yet.
> Passing template/HTML fragments as props is so much nicer in JSX.
Ha, I do this in places but I'm not sure if this approach is encouraged? Compared to slots, I like this too, it's a lot less verbose and the syntax is simple and easy to remember.
> While JSX is officially supported by Vue, it does not seem to be encouraged and may have subpar support in the ecosystem. But that is only something I'm afraid of, I do not have any experience with it, yet.
Worst case, you can switch to Vue HTML templates in some files and use JSX in others. I've not found issues mixing them together like this.
Does this also allow you to write multiple components in one file? I guess there wouldn’t be a problem with it if you use the primitive inside of a normal JS file.
I’ve seen the third party package for the compiler that has popped up to try and handle this, but I don’t like the limitations.
I’m hoping with Vue 4 they will find a way to support multiple components in one SFC file (which kinda violates the naming but hey…)
> Does this also allow you to write multiple components in one file? I guess there wouldn’t be a problem with it if you use the primitive inside of a normal JS file.
Yes, as in a component would be a regular JavaScript function that takes some parameters and gives you back some JSX to render. It's really concise and there's no need to muck around with plugins or anything special, it's just regular JavaScript.
When I'm working on projects that use Vue HTML templates, I've often got pages that have some small HTML snippet that appears two or three times, and just don't want to go through the effort of having to break the snippet out into its own component file because its so verbose. JSX makes this really low friction so you do it more often.
