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.

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.

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...

> 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.

> '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?

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

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.

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.

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

It isn't? You don't have to define them in a single file.

I prefer having the template, styles, and code together, but it isn't required.

It largely is an implementation detail. The official guide starts you off without them. You ostensibly could develop an entire application without touching SFC or using the vue cli. But they're such a well implemented pattern that you'll find almost no one in the wild avoiding them, which is pretty telling.

A bit tangential - I've been messing around with vuejs and Django recently (I'm not a web developer in the slightest) and I haven't found a decent way to get webpack integrated. So I can't use SFC or cli and I wonder how people do this in the real world. Do people even use vue with Django?

They are generally deployed separately. Django is used to build a rest API and webpack / Vue are deployed on their own to consume the API. You can put something like nginx in front to route API requests to Django and everything else to an s3 bucket for your single page app.

Any tips on where to look or what to read to implement something like this? I put in an hour or two experimenting with how I could do it and there seem to be a lot of moving parts I’m not familiar with.

I don't know Django specifically and not sure exactly what you want to do but yes you can integrate Vue, webpack & all in anything.

In fact that's what I've encountered in most companies, and what I usually do for my side projects. Basically you output a <app>.js and <app>.css and integrate those in your app layouts / templates.

That's a problem with all these CLI and all those tutorial targeting SPA with a node backend. But IIRC vue-cli as options to help you achieve that, but the docs are not always the clearest for this.

Nothing exotic really. The problem has been how to figure out the process for writing the frontend with npm/webpack, building it and getting Django to serve js files on different pages. I simply couldn’t get it to work. I’ve resorted to just skipping the npm part and writing js scripts in Django's static directories without any libraries or other js tools except for those I could add to an html template with a script tag (which is quite limiting).

I'm going to try separating the frontend and serving it with nginx instead, and only use Django to provide an API for the DB. Maybe I’ll be able to figure that out. My biggest issue is that there are no decent guides for any of this, documentation is allaround terrible and even if there is some guide, it doesn’t work.

I've been hacking together a Webpack setup so I can include small Vue apps in a Django app instead of making it an SPA. Will Vue cli help me with that?

Correct me if I'm wrong but I imagine that's more for the tooling (e.g. syntax highlighting for my template and styles) than an actual preference for SFCs.

Shrug. Maybe? I think Vue is popular enough that if people actually disliked SFCs once they started using Vue they you would see blog posts about how to avoid them, complaining that's why they're leaving Vue, or tooling that makes it easier to bypass them. I don't really see this so my assumption is devs generally like them once they start using them. I could certainly be proved wrong.