Why I Like Vue

I've been in the web development space for a long time. I got an early start in my late teens interning at a marketing company where my first ever web related task was recreating a Photoshop file in a plain index.html file that I opened directly in my web browser. No node version management, no package installs, no editor setup... web development distilled to its core.

As you can imagine, this ended up with many many frustrating hours of work. Googling how even the most basic HTML tags worked, using <table> for layouts (sheesh), and of course a classic "make change reload page" workflow that to this day depending on the project can still be a mild pain in the neck.

It feels like some developers are almost nostalgic for this era, the perceived simplicity of it. Tear away the complexity of all these tools and layers around what we're trying to create and get back to basics. I won't lie, I can understand the desire. When you are spending half your day trying to enable auto-fix on save for ESLint issues, or digging into a third party library's source code to try to track down why a supposedly non-breaking minor version update is causing type errors, you do feel a sense of desire for the "simpler" times.

But this feeling, while certainly valid, also often glosses over the reasons why these tools exist and why the ecosystem at large created them in the first place. For a lot of people, when they were first getting started they were working on problems that were a lot simpler in scope. Complicated to be sure, especially when first starting out, but not at the level that employers and end users expect in this era of the web. We expect fast performance, quick load times, the latest features, minimal bugs... and I truly believe achieving these goals at their highest levels requires things like code splitting, minification, transpilation, etc. We need these tools. Even the biggest pushes to "just use the web" still require some level of tooling to achieve it.

This concept though... this desire for simplicity inside of a maze of complication, is one of the biggest reasons why I have gravitated to using Vue for as many web based projects as I am able to. I'd like to explain why!

Vue Scales With You

Simplicity is hard. This is a very common phrase in this industry that I admit I parrot quite often. But I think that's because it is so very relevant. Truly achieving simplicity goes beyond keeping your idea and project scope focused... it demands making technical choices that line up with that scope. The truth is there is no way to completely eliminate complexity. You can spend all the developer hours in the world writing and obsessing over every line of code to make things as descriptive and concise as possible, but the problems we are solving day to day are inherently complex. It doesn't go away. So in my mind, the goal is less about removing complexity entirely and more about managing it.

So how do you manage it? I think one of the most important aspects is finding solutions that scale. Sounds obvious, right? However, I find that when people talk about solutions that scale these days it's most often from a viewpoint of scaling up. What if I get a huge influx of users? What if my project now requires sending system emails, dynamically generating PDFs, role based user permissions, creating share links with dynamic open graph metadata... how will my technical choices handle these requirements?

These are all important to consider, but I find that the true mark of a scalable solution is how it handles scaling down. Every project starts small, no matter how big the end goal is. It's all about working towards the goal taking manageable steps, and in my opinion, starting with the smallest step you are able to is critical.

With Vue, your project can scale across the entire spectrum of complexity. It is one of (if not the only) front-end framework that can go from adding a script from a CDN in an HTML file directly, to a full stack node backed server with server rendered HTML. And the code you write, in large part, can translate all across this spectrum will little to no need for rewrite.

Is this me suggesting that you start all your development projects with a script tag in an HTML file? Of course not. But it enables a whole category of options in existing projects and codebases. The ability to throw a script tag on a single page of a monolithic application to get some advanced functionality without requiring all the tooling that typically comes along with a front-end framework can be critical depending on the project.

Even what I see as the end-game solution in the Vue ecosystem, Nuxt, itself scales so beautifully across this spectrum. The default Nuxt app can go from a single app.vue file that your entire application logic and styling can exist in, all the way to file based page routing, server endpoints with database connections, and more.

I see this as giving Vue a huge advantage when deciding on a solution for a greenfield project. At any size it will be there to handle the problems you face, as closely matching the level of complexity around it as possible.

The Right Level of Choice

Making choices is hard. Decision fatigue is a very real problem faced by developers that I experience myself relatively often. While I haven't gotten to the point where it's so bad that I limit my wardrobe options, I still desire solutions that limit the amount of choice and give me confidence that the options available are of high quality.

The most popular front-end solution right now, React, is a common example of a library/framework that overwhelms developers with choice. For those unfamiliar, React itself is a relatively minimal set of functionality that almost exclusively deals with templating and how to structure your code. It's usually discussed in a way that makes it synonymous with the react-dom package that integrates this templating structure with the DOM and other web based rendering needs.

While there is a recent push for offering more useful web specific features into the core like a <ViewTransition /> component, in large part when it comes to styling, animation, page routing, global state management, data fetching, etc, you're in for a dizzying array of choice, and the choice in each problem category has their own set of longer term consequences and factors to consider in addition to deciding on React itself. It's enough not just to write its own article about, but you could argue each individual category demands its own article and deep dive.

On the opposite end of this spectrum is Angular, which in large part comes with its own solutions to these problems and more as part of the framework itself. I admit my experience with Angular is minimal so I can't speak with as much confidence, but what I have gathered is that it is quite uncommon to stray from what is provided out of the box if your project needs require. This makes it an excellent option when you need to eliminate as much choice as possible, but I feel this can limit your ability to scale down by a not insignificant amount.

This is something I see as another huge strength of Vue. I think it strikes the perfect balance of not having so many options available to overwhelm, while still giving you the flexibility of selecting alternative or completely eliminating solutions when required. Vue has included a baked in <Transition /> component for powerful animations for years, has built-in options for styling components using Single File Components and a <style> tag, and has powerful official core team developed solutions to routing and global state management. Even more recently, there is a promising data fetching solution that models after the wonderful TanStack Query for data fetching needs.

The best part in my mind is literally every single one of these solutions are optional. Even the <Transition /> component, while a baked in core feature, will be code split from your bundle when using a capable bundler if it is unused in your project. Should you desire, you can seek out and use other available options. But there is beauty in the fact that you don't have to. These solutions are battle tested and proven to handle even the largest application's needs.

Vue Is For The Web

Depending on your needs, this can be a pro, a con, or mostly inconsequential. But Vue is in large part rooted in the web and the needs of web development. This doesn't mean it's impossible to write native applications using Vue syntax, but it is a much less common use case than the popular, powerful, and mature ecosystem around React Native. I'll be blunt; if your project requires a true native application (and not even a PWA can meet requirements), I am not even close to recommending a Vue based solution. React Native with Expo is a wonderful developer experience that I can personally attest to and is absolutely worth using.

But for people in my case who, outside of fringe projects, live and breathe the web, Vue is the most natural and comfortable fit. This feeling is not accidental either; Vue's template syntax was designed to be fully compliant HTML. From the Vue docs:

All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

This is a point that I feel often gets glossed over in discussions around Vue's template syntax. It's easy to knee jerk looking at a div with a v-if attribute inside it and feel a little disturbed at how far it strays from a more JavaScript-like syntax using JSX. But this decision was not made on a whim or purely for stylistic reasons. It is this way because it still remains entirely valid HTML. In theory, if you copy Vue template code that does not rely on data binding directly from a component to an HTML file it will render without issues. No className or htmlFor attributes to rename, no stripping of {#if value} {/if} logic a-la Svelte, it is (and always will be) HTML compliant.

You can argue that trade-off doesn't matter, and honestly in most cases I think you're right! But going back to solutions that scale, if you're looking at a project that is intended to be maintained and running decades into the future; a future where the existence of individual frameworks like React/Vue/Svelte/Solid are uncertain, how far do you really want to stray from web standards? It may not matter to most, but it could be absolutely critical to some. Vue is full of solutions with this mindset. It feels like a framework built to be resilient to the test of time. It's not perfect, the migration from Vue 2 and Vue 3 a prime example of its own hurdles and challenges, but core fundamental choices have been made that shape the framework around the web and that is something I personally see value in and align with.

Conclusion

I could write much more about reasons I have made Vue my front-end framework of choice, but at the end of the day so much of it is personal preference and the needs of your team, your company, your project, your customer, etc. Vue is not always the best choice for me and the projects I work on day to day either. Sometimes it doesn't have a mature enough component library (or a community maintained component library at all) for the design system being used. Sometimes it's not even an option at all like when authoring a web extension for an existing application like the Jira Marketplace (shameless plug for an extension I help work on called Clear Path for Jira 😅).

Also, as much as I love Vue, I also love React despite its issues, and have given Svelte a passing glance and approving look from time to time even though I have yet to use it beyond a playground. Svelte Runes are an excellent example of the framework evolving in a direction I can align with, making extracting reusable logic outside of Svelte components much more straightforward and closer to the mindset of React's hooks and Vue's composition API.

This is not me trying to sell you on Vue. I have nothing to gain from that anyway outside of the possibility of being able to use it on more projects in the future. It's more to explain my own reasons for enjoying it and maybe give you some food for thought the next time you're starting a web project. I also have this feeling when consuming content in the wider web development ecosystem that Vue and Nuxt are mostly glossed over in framework discussions and seemingly only mentioned as afterthoughts if mentioned at all. I would personally like to see this shift, and more firmly place Vue up with the greats and give it the recognition that I believe it deserves. Thanks for reading!