Comment by gavinray

5 years ago

Solid is really cool, and I love the posts by it's author describing the journey to performance that is some years old now.

But what is unique about Vue is that it lets you arbitrarily mix ".vue" and ".jsx/.tsx" files in the same project.

So if you need to define say 50 really tiny helper components, like "Button", "Modal", etc. it's great.

I can write one TSX file and do:

   // UtilComponents.tsx
   export function Button() {}
   export function Modal() {}
   export function Icon() {}

And then in my .vue file I can do:

   <script setup lang="ts">
   import { Button, Modal, Icon } from "./UtilComponents"
   // ...
   </script>

This is not a popular approach, almost nobody uses Vue's JSX/TSX and I'm not sure if people even know you can mix and match arbitrarily like this.

But I've been doing this for a long time and it works great for me haha.

This is a really cool idea. This has always been my biggest beef with single file components. It never occurred to me that you could do this with Vue. Thanks for the tip