Vue Templates - Same File or Separate File?

One of Vue’s biggest selling points is the ability to define the entire Vue component in a single file, using either vanilla JavaScript or Single File Component syntax. Using tools like the composition API and provide/inject, you can build a decently sized app with one file per component and zero transpilers.

One file per component generally offers less context switching and more readable code. Or, at least, much more readable than having to follow a button click through separate action, effect, and reducer files like in Angular 2+ with NgRx. However, recently I’ve started thinking that maybe the pendulum has swung too far: maybe there’s a good reason to splitting out some of the component, without going overboard on repetitive reducer files?

Recently, I’ve found myself switching to separating out Vue templates into separate HTML files, and bundling them using Webpack’s html-loader.

Why is this worth the headache of adding extra lines to our minimum viable Webpack config, and cutting into our strict limit on time spent tinkering with build systems? Here’s a couple of reasons:

In my experience, code should generally be more closely organized by function (this code used for the user dashboard’s analytics tab) rather than form (this code is a Vue component method). Colocation makes it much easier to walk through what happens when the user takes some action.

Colocation is a direct antithesis of React/NgRx-style breaking up of logic into monolithic action, effect, and reducer files: long switch statements in reducer files tend to group disparate functionality into one file because they share the same form.

Does separating out templates into HTML files violate code colocation? Not necessarily, because you aren’t grouping HTML from multiple components in one HTML file. Keeping a separate `component.template.html` file as a sibling of `component.js` is fine so long as the `.template.html` file contains all the HTML for `component.js`, just the HTML for `component.js`, and nothing but the HTML for `component.js`.