Breaking vue files into separate js, html and css files

,
#1

Hi,
I was asked at work about separating the vue files into separate folders for js, html and css so it would be easier for other developers I guess to debug/ easily view the different components.

I’m wondering what the the vue community’s thoughts are about this?
Is it good practice to split it up? And how likely is it for the app to break this way?

If I did split it up I’d probably want a bunch of different folders in the components folder, eg. HelloWorld folder that contains HelloWorld.js, HelloWorld.css etc.

Any thoughts would be greatly appreciated, thanks so much!

2 Likes
#2

It is possible but the official documentation is pretty clear that this is not encouraged:

https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns

If you have a technical reason why you need to split them up then fair enough but if the motivation is maintainability then it is usually best not to split them up.

2 Likes
#3

Thanks so much!

#4

@skirtle is spot on. Unless you have good technical reason, it goes against the point of using SFCs.

1 Like
#5

@JamesThomson Thank you!

#6

I found this vue-loader section helpful - for your reference. Cheers!

https://vue-loader.vuejs.org/spec.html#src-imports

3 Likes
#7

@Akayy thanks so much!

#8

Isn’t that kind of the point that he’s asking though? That he doesn’t want an SFC? Rather distinct files to separate JS from HTML and CSS?

To me separation of concerns is a pretty valid technical reason.

1 Like
#9

I completely agree with this, also with the statement in the article that “separation of concerns is not necessarily equal to separation of file types”. But I also think that it can be. This is something that is somewhat a matter of preference.

I would suggest that there are a lot of factors that play into this decision. I for one, find maintaining 3 separate files preferable, because that is how I like to organize my code. I don’t see a technical advantage in keeping the files together. So wouldn’t it come down to preference?

1 Like