One of the recommended ways to organize Vue code is to use Single File Components, and I have to say, they are wonderful. Instead of the traditional separation of concerns into HTML, CSS and JS, Single File Components allow you to separate your project into chunks that are intuitive to you. You get to decide what you want to make into a “component”. The component is written as a single file with a “.vue” extension and all of the relevant bits get included. As a bonus, you get scope for the component, which you did not get when everything was dumped into the global namespace.

My hope is that using SFCs will also improve the maintainability of our library website. I am hoping that a librarian who is new to our codebase will more easily be able to make edits, because they can focus on a specific component that they want to modify, and they will not have to worry about what is going on with the rest of the page. SFCs provide a more modular approach, which I think is valuable.

So now I’m in the process of breaking down our page into SFCs. This will be fairly easy to do for the JavaScript, because there is not too much of it, but a bit more onerous for the CSS. The benefits of scoped CSS are obvious, however, and I am committed to getting us there.

This entry is licensed under a Creative Commons Attribution 4.0 International license.