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

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

1 Like
#7

@Akayy thanks so much!