What are your opinions of single file components in Vue? Will it actually help maintainability down the road for our codebase? Or do you think it’s better to separate the .js, .sass, and .vue?

"Let's mix all these concerns and when anyone points it out we'll just show them our bootcamp certificate and say 'money printer go brrrr'"

- JSX fans using vue

Separation of concerns > spaghetti mess

I don't get the mindset behind JS devs anymore.

2000's: no one gives a shit!!
2010's: don't mix your HTML / css / ha
2020's: mix it all, mix it all into little itty bitty pieces!!!!
2030's: the world ended before we got here anyway!

I mean, this is highly dependent on how complex each component becomes. Probably to start, I would keep everything together and only start separating out once it begins to be harder to maintain, this would allow simple components to not get overkilled by being relocated to abstractville while allowing more complex components to take advantage of that abstraction.

I always use .vue components, but I also always write CSS into separate file. JS + HTML makes a lot of sense to write them into a single file, just try to make every component as small as possible. If you feel like it is growing big and some part of it can be extracted, do it.

@TestInProd423 this.

I use single file components most of the time and I try to keep them as short as possible, once they start getting big I split the files.

@TestInProd423 great advice

It Depends™.

Generally I try to keep the css as simple and minimal as possible. If the map link is the only element in the entire app that has an icon for a button I prefer to bundle it into the MapButton or IconButton component.

I'll follow whatever is already used.

I like the single file approach for html and he because they're so tied together anyway that they belong together imho.
For CSS, I like the scoping feature, since it makes it easy to style things quickly without worrying too much about possible collisions.
But then again, I'm not a web dev, so I can't speak for proper big projects

@neeno Like others have mentioned, in here the CSS part is probably the only thing that can be extracted right away, unless of course the component you're writing needs a tailored style that the scoped CSS can be justified.