[zamalek]

You're misinterpreting what an SFC is, it's just something like the following:

    <template>
      <!-- A mustache-like template -->
    </template>
    <script>
      // JS, TS, or whatever
    </script>
    <style scoped>
      /* CSS, LESS, SCSS or whatever */
    </style>

That components may use other components itself, no part of SFCs disallow that.

[ng12]

That's not what I'm saying. What if I have a child component I don't want to put in a separate file? What if I want a child component defined as a closure inside my parent component? What if I want one file that exports many components? React makes no judgements here -- it's completely up to me to decide what's best for my application.

[cooperadymas]

I don't think anything would stop you from creating multiple components in a file using 'Vue.Component' and a template string.

I've never remotely wanted anything similar to this in Vue, but I have seen what you're talking about used in React, mostly for component wrappers to encapsulate logic. It's not something I like using or seeing but that could easily be swayed by my preference for Vue.

See how it's done in the guide. It wouldn't be as natural as react allows but should suffice for tiny, contained sub components.

https://vuejs.org/v2/guide/index.html#Composing-with-Compone...

[adamwathan]

> I've never remotely wanted anything similar to this in Vue,

This was true of me as well until actually playing more with React. In practice, being able to very quickly extract a child component by just copying a chunk of code to a different spot in the same file is a very nice workflow benefit I now sorely miss when using Vue. In Vue my components tend to be larger and more complex than they are in React because I feel like some small extraction I want to make doesn't "deserve" it's own dedicated file, whereas in React I just quickly make a new function that returns some JSX and I'm done.

[ng12]

> 'Vue.Component' and a template string.

But the template string is just a string, right? Can you get the same IDE integration while avoiding SFCs?

[cooperadymas]

At that point it should probably be its own SFC. But You can also override the render function, and even use JSX.

https://vuejs.org/v2/guide/render-function.html#JSX

[zamalek]

You don't have to use SFCs (I don't in Vue 2 or Vue 3). However, you would be able to nest components in an SFC so long as you don't expect the <template> tag to work in the interior components (I can't imagine how that would even look and work).

The only thing that SFCs do is create a render function for you (as well as some CSS scoping magic). You can do that all yourself and that is all documented and supported behavior.

You have completely the wrong idea here and, honestly, this is all in the documentation.

> React makes no judgements here

Vue typically has fewer opinions than React (and FAR less than Angular) in my experience.

[ng12]

I'm explaining why I don't like SFCs because the above poster referenced them as a "pro" for Vue over React. Whether or not you _have_ to use them in Vue is immaterial.

[reubens]

You can do this within Vue if you like - you just increment the complexity of your exisiting component, rather than creating a new child