mardi 24 septembre 2019

Should i enforce the splitting of single file components in Vue.js 2?

As far as i know, the Way to go using Vue are the single file components. I literally use them every time as a single file. Someone now wants me to apply the separation of concerns (S in SOLID) and use the single file components as described on the official page on every single file component. This means, that a file like this becomes three:

<!-- my-component.vue -->
<template>
  <!-- HTML here -->
</template>

<script>
export default {}
</script>

<style>
.my-class {}
#id {}
</style>

Will become this:

<!-- my-component.vue -->
<template>
  <!-- HTML here -->
</template>
<script src="script.js"></script
<style src="style.css"></style>
// script.js
export default {}
/* style.css */
.my-class {}
id {}

In my opinion is this just a bloated way to apply a pattern that will cause more confusion. There are 3 Files instead of one for every single component.

Now my question is: Am i right, assuming that Single File Compoents are still the way to go and the splitting of them is only a good way to go if there are many lines of code (then you've done something wrong anyway..)? I also need to know if this way is scalable or does it get annoying, crawling through many files for one component? Or do I take something completely wrong?

I really need facts, so please don't (only) argue on opinions. Thank you in advance.

Aucun commentaire:

Enregistrer un commentaire