View profile

Vue Templates - Same File or Separate File?

Vue Templates - Same File or Separate File?
By Mastering JS Weekly • Issue #74 • View online
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?

Rethinking Separate HTML Files
Recently, I’ve found myself switching to separating out Vue templates into separate HTML files, and bundling them using Webpack’s html-loader.
New syntax for our custom Vue toggle
New syntax for our custom Vue toggle
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:
  1. Delegating pure HTML and CSS work is much easier and much cheaper. Now that we’re working for ourselves, we love the ability to hire someone on Fiverr to take care of layout work. Much easier to hire someone to do a quick bit of layout in HTML and CSS for 10 USD than it is to find someone that knows Vue.
  2. Less tooling setup required for syntax highlighting and linting. Linting .html files is easy. And most code editors support syntax highlighting for HTML out of the box. Linting HTML in ES6 template strings is harder, and syntax highlighting is even harder. When you delegate more layout work, linting and syntax highlighting makes code review much faster.
  3. Better code colocation. Sounds weird that splitting code up helps keep similar code together, but hear me out. Vue syntax does have a small issue in that `data`, `methods`, `computed` and `template` are all separate properties, which means you have to search and scroll for method definitions when reading HTML. Separate HTML file means you can put `component.js` and `component.template.html` side-by-side in a code editor to reduce searching, without having to make your components tiny.
On Code Colocation
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`.
Most Recent Tutorials
How to Use JavaScript's `Promise.allSettled()` Function - Mastering JS
How to Sort an Array by Date in JavaScript - Mastering JS
How to Use Vue Router's router-view Component - Mastering JS
What We're Reading
Creating configuration files in Node.js using node-config - LogRocket Blog
GitHub - fingerprintjs/fingerprintjs: Browser fingerprinting library with the highest accuracy and stability.
Gramma - command-line grammar checker
Did you enjoy this issue?
Mastering JS Weekly

Pragmatic web development. No bloatware allowed!

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue