VueJS Question about architecture and distribution of files in VueJS project

Question

I am starting to learn VueJS and I realize that the typical .vue files are defined with a three different parts like <template> other part like <script> and other part like <style>.

My question is regarding how it is handle this three parts in a real professional project in VueJs. From my understanding shall be separated in three different parts.

For example I will tend to separate to those folders:

under folder src I will create those subfolders

src
 ->script (javascript functions will be defined here)
    index.js 
 ->style (style content will defined here)
    index.css
 ->pages (template content will be defined here)
    index.vue  

It is handle like that in a real world middle-big VueJS projects? If not, why? what are the cons/pros about this approach?

Thank you in advance!

Best Regards,

Paul

Answer 1

Good Hint, about reading the documentation. I didn't found it. According with https://vuejs.org/guide/scaling-up/sfc.html#what-about-separation-of-concerns :

Some users coming from a traditional web development background may have the concern that SFCs are mixing different concerns in the same place - which HTML/CSS/JS were supposed to separate!

To answer this question, it is important for us to agree that separation of concerns is not equal to the separation of file types. The ultimate goal of engineering principles is to improve the maintainability of codebases. Separation of concerns, when applied dogmatically as separation of file types, does not help us reach that goal in the context of increasingly complex frontend applications.

In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic, and styles are inherently coupled, and colocating them actually makes the component more cohesive and maintainable.

Note even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files using Src Imports.