Opinions & Insights
Why Vue is a great fit for modular software architecture
Having trouble deciding what frontend framework to invest in? You’re not alone. After all, decisions like this have big implications for teams that will likely be working with a technology for years to come. Fortunately, this question is a lot easier to answer than most people realize when investing in modular software architecture. And for those new to the composable / modular software architecture trend, be sure to this blog post from my teammate Phil!
In this post, we’ll be talking about why Vue should be one of your top contenders when choosing a frontend framework to invest in for the long haul.
Why Vue?
As one of the top three JavaScript frameworks, Vue has a vibrant community that helps to drive it forward in terms of innovating on new ideas. Examples of companies using Vue include GitLab, REI, Louis Vutton, Upwork and many more.
Plus, if you're planning to build software for the long haul, it's a lot easier to find Vue developers. Why? Because Vue leans heavily on web standards, anyone with a solid understanding of HTML, CSS, and JavaScript can get onboarded much faster. In fact, in my experience, the approachability of Vue codebases often make it easier for less JavaScript oriented team members to jump into the codebase as well. This often results in shipping features faster and making it easier for the team to maintain the codebase in the long run.
It works for apps of all sizes
When it comes to modular software architecture patterns, flexibility is one of the top priorities for the tech stack. If teams are required to onboard to new technology every time they switch to a new project, that can cost significant time and effort. However, Vue is an incredibly adaptable framework and can suit projects both large and small, which is a huge plus for long term maintenance.
Just drop it in as a library
When most people think of frontend frameworks, the first thing that comes to mind are big toolchains. And for those who have worked on legacy apps before, sometimes projects don’t allow you to rewrite the entire toolchain just to use the latest and greatest framework. However, with just one line on any HTML page, you can leverage Vue to progressively enhance your apps to have dynamic interactions and render dynamic data!
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>You can learn more about the CDN approach in the official Vue docs.
But if you have control of how your build toolchain works, Vue has got you covered.
Use it as a traditional single page application
While there have been a lot of recent discussions around the single page application (SPA) approach of building apps, SPAs continue to have value for projects that are not beholden to typical criticisms of SPAs (e.g., SEO, heavy dependency on client side JavaScript, etc). As you can expect from any framework, Vue looks after you with the create-vue CLI tool makes it easy for you to scaffold a new Vue SPA project with the Vite!
But what about projects that don’t need any significant JavaScript to be run on the client-side? Is there a way to use Vue to build a static site?
Don’t need an app, but want to leverage it for site theming and maintenance?
When you don’t need all the JavaScript that Vue provides for interactivity, but you want to build a site that’s content-focused, you can leverage some of the popular meta-frameworks in the ecosystem such as VitePress, Nuxt 3 + Nuxt Content, and Astro.
But wait, what if you want interactivity and content without the downsides of front loading all the JavaScript to the user’s browser which could lead to performance and SEO effects?
Switch it up and use it for server side rendering as well
For those who want to use the tried and tested approach of server side rendering (SSR), Vue provides vite-plugin-ssr and meta-frameworks like Nuxt 3 which empower you to deploy your app using SSR to your desired deployent platform.
But wait a second, what if you want it all?
What if you need a little bit of this and a little bit of that?
While many sites only need a single approach (i.e., CDN, SPA, SSR, etc.) to provide the best experience possible to their users, the complexity of sites continues to grow and people recognize that one size does not always fit everything. So, as expected of the web community, recent innovations to let people choose the right approach to different parts of a site is becoming more common.
Interested in this hybrid approach? Vue can help you there too, with Nuxt 3’s Route Rules which enables you to define specific rendering strategies for different routes!
Next Steps
As you can see, Vue can be adapted to whatever size you need it to be so that it fits in your desired software architecture. And the great thing about having that decision made is you can focus on what really matters, building and shipping apps that have real world impact on users.
And if you’d like to learn more about Vue, check out the following resources:
And if you’d like to learn more about deploying with Vue on Netlify, be sure to checkout how Netlify makes it easy to work with Vue.
