Multi-component Files

[matthewbecker1990]

Hi All,

Lately I have been seeing a lot of discussion online, in particular from those coming from React, about how its difficult or not optimal in their situation to have to put smaller components into their own files. The discussion is that if its a small component that is only ever going to be used in one component, then it makes no sense to clutter the file system with tiny repeatable components.

I wanted to get some input whether the following is a good idea, if the solution already exists, or if I'm just being stupid.

My idea is adding the ability to define multiple <template> & <script> tags in a document and tag them to which component they belong to, and then during build time, in the background these are extracted into their own files so the developer never has to see them.

Example

// Component.vue

<template> // or <template !default>
    <div>
         <Title />
     </div>
</template>

<template !Title>
     <p> Hello World! </p>
</template>

<script setup> // or <script setup !default>
   ....
</script>

<script setup !Title>
   ....
</script>

And this file would compile to:

1. Component.vue
2. Component_Title.vue

Would love to hear your thoughts!

Thanks,
Matt B

[byronferguson]

You may want to checkout this project.

https://vue-vine.dev/

[matthewbecker1990]

You may want to checkout this project.

https://vue-vine.dev/

Thank you for your response @byronferguson! I have checked out vue-vine before and it does solve the problem. I personally just don't like JSX, and feel like there could be a better Vue way of solving the problem.