Multiple Vue Components in one File? Vue Vine makes it possible

Once again, I'm not kidding 👀

---
Links and Resources:

📺 @DejaVueFm #E035 - Error Handling in Vue

---
Chaptermarks:

00:00 Intro
00:16 What's the problem?
02:04 The solution?
02:40 Demo App
04:30 Vue Vine VS Code Extension
05:26 How it works under the hood?
06:27 Building a simple component
07:17 How to handle Props, Events and Slots
09:40 Multiple components in one file
10:53 Why not JSX?
11:45 Another way to write components?
13:00 My opinion
13:27 Wrapping up - what do you think?

[moatazabdulbaqi]

This will be helpful when implementing the "Compound Pattern, " where there's a parent-child relationship and the child must be rendered within the parent context. When both components exist in the same file, it emphasizes how tightly coupled the relationship is. Another option is to not export the child components at all and just export the big boss!

[fmoessle]

There are a lot of cases where you need to create a small component and writing it in the same file would be great

[cndr]

Another way of writing components further increases fragmentation...

By the way, regarding optimization when using JSX.
In the slides from the "Vue Vapor: Reinvention" talk by Kevin Deng (sxzz) at Vue Fes Japan 2024, there's a mention of using JSX, where Vapor also works with JSX (the unplugin-vue-jsx-vapor package by zhiyuanzmj)

[muratozalp]

after I had developed with Lit for some years, I was looking for a feature like this in Vue too. it looks on the way

[relhage]

This destroys the idea of SFC, hence the name single file component. I would stick to SFC, it's the best experience no matter how big the app becomes.

[intchst]

Very nice. Just helped TODAY in a current project. How fun is that.

[HikaruAkitsuki]

It's doable in React but usually you just prepare sub parts of the components until you assemble it for the default export return. If you put two unrelated component in single file, is that you just break the best practice?

[alimaher]

Great Episode! Tbh I see nothing wrong with this at all! Just a new tool / an way of doing this, that has its pros and cons like other way. It's all about deciding when to use it!

[nikjee]

You could just use
const Comp = defineComponent(
(props) => {

const count = ref(0)

return () => {

return h('div', count.value)
}
},
// extra options, e.g. declare props and emits
{
props: {
/* ... */
}
}
)

and use it in template like regular sfc component

[realfranciscohermida]

I wish this was merged into core. There are too many sacred cows in Vue holding it back

[AndresSaaN]

It could be useful for "state-management" components which would simply be used as parents to manage the state and events

[ojvribeiro]

What if we had component templates? :3

<template>
<MyComponent />
</template>

<template component="MyComponent">
My stuff
</template>

[Exotelis-skydive]

Ideal for new developers on the project who will never find what they’re looking for (keep components in folder we are used to). Instead, they’ll face yet another package and dependency in the endless npm dependency hell. You could simply use defineComponent or leverage your IDE's feature to open the component with a single click. But no, it’s apparently easier to install even more stuff that you’ll have to maintain later.

[kuhaniresti]

can you make different variants out of the same SFC? lets say a button component with different skin or looks

[Gaijin]

wait what. this is cool. kinda like jsx bit

[MladenMihajlovic]

You can write child components in general vue if you just use render functions. Just FYI.

[codingwithmartin]

There is a good reason why you can't write multiple components in one file. It violates the Single Responsibility principle (SRP) and breaks separation of concerns. It's also harder to test each unit. It leads to less readable, dirty code. Each file should ideally represent a single unit of functionality or concern.

Having one component per file ensures that the logic, template, and styling for that component are self-contained and easy to understand.

Mixing multiple components in one file blurs the boundaries between them, making it harder to determine what each component is responsible for.

[kreatur_]

We're becoming more and more like React, idk if that's a good thing or a bad thing

[TechBitz-dn]

I thought this was a joke. this just makes code harder to understand especially if you have a lot of components in one file. I think React is the only framework that allows this. Angular, Svelte, Vue all agree that you should have SFC - SINGLE file components.

[VaazoApp-fx]

This is an anti-pattern. The component always starts out small and eventually you end up with 10 different components in one file as your app grows. Please don't do this.