The Building Blocks of a Greenfield Vue Application in 2024
Starting a project from scratch without any legacy restrictions can be exciting but also extremely overwhelming. The freedom to architect an application without constraints can lead to wasting a lot of time researching and evaluating tools which in the end can distract from doing the actual work. Even if the best choice is made there will always be second thoughts about alternatives (Paradox of choice).
Let me help by listing all the industry-standard tools in the Vue ecosystem.
Package Manager
There are three popular tools for handling external packages: npm, yarn, and pnpm. NPM is old and slow. Yarn is faster and can be a solid option. But overall pnpm is the best. It is extremely fast and space-efficient. It uses each piece of code in many places without needing extra copies. Additionally, it natively supports a monorepo setup with minimal configuration.
Recommendation: PNPM.
Build Tool
Vite recommendation should not be a surprise here. It uses native ES Modules to allow for lightning-fast server starts. Has built-in Hot Module Replacement support but also optimizes for production with Rollup, ensuring small and fast-loading bundles. Moreover, Vite configuration is much easier compared to alternatives. And lastly, it gets a bonus point for being framework agnostic.
Recommendation: Vite.
Vue Version
Vue 2 documentation still ranks high in search engines and Stackoverflow and this might be confusing if you have to pick between versions. But keep in mind that version 2 is no longer maintained and Vue 3 is the long-term supported one. It comes with all the good parts of the previous version but with a different syntax leveraging composition API.
Recommendation: Use Vue 3.
Single File Components
Keeping all the building blocks of a component in the same place is one of the great features of Vue. If you think a component is getting too long it’s a good sign to split it into subcomponents. It is still possible to use a different file for each part, but please don’t.
Recommendation: Use Single File Components.
Router
Vue has an official router package. It deeply integrates with Vue core and makes building single-page applications a breeze.
Some of the powerful features are nested and dynamic routes, modular component-based configuration, route params, transition effects, links with automatic active CSS classes, HTML5 history mode or hash mode, and customizable scroll behavior.
The lack of alternatives prevents Vue Router from getting the hype and the credits it deserves but it truly is an extremely powerful and feature-complete library.
Recommendation: Vue router.
State Management
This might be a bit confusing since Vuex was the official recommendation for many years before Pinia took its place. Pinia is written from scratch and integrates seamlessly with the composition API architecture of Vue 3. It is now the official recommendation for state management.
The only real alternative to Pinia is to use a custom composable to hold our state. This might be a good solution for a tiny application but since Pinia is following the same architecture with a tiny footprint, enhanced performance, and dev tools support it is considered the strong recommendation for this section.
Recommendation: Pinia.
Data Fetching
Native fetch has reached significant browser support to be considered an alternative to the popular axios library. VueUse also provides a useFetch hook with more advanced configuration options.
But my strong recommendation is vue-query. It simplifies data fetching with a declarative syntax and treats many repetitive tasks such as loading and error states, pagination, filtering, sorting, and caching with elegance.
Recommendation: Vue Query.
Component Showcase
I’m sure there are alternatives, but Storybook is so dominant that everything else is not even on my radar. The real question is if storybook worth the hype.
Personally, I do like developing components in isolation using it. It is faster and makes me aware of each dependency of the component. Additionally, it can be a good form of documentation.
Recommendation: Storybook.
Testing
This can be an article by itself. I will focus on the types of testing I consider essential for any application unit, e2e, and Visual Tests.
Unit Tests
All of the recommendations so far are from my personal experience. So jest is what I'm supposed to recommend in this section. It's a powerful and reliable runner and I'm very happy with it.
But there is a tool on my radar that I didn't have the chance to test yet. (pun intended) Vittest is a vite-powered test runner with a jest-compatible syntax and everyone I know stands by it. So I have to pick it as a recommendation for a greenfield project.
Recommendation: Vittest.
End-to-end Tests
Use Cypress. It's not only the most popular option but the latest versions put a lot of effort into stability and eliminating flakiness. This on top of being the most developer-friendly tool makes it the best option for e2e tests.
The alternative is Playwright, which might be a bit faster overall, but for me, adoption and the ecosystem are not big enough to be trusted in my pipeline. (Yet!)
Recommendation: Cypress.
Visual Tests
This one is tough. I'm currently using Applitools and I’m extremely passionate about the importance of a good visual test suite. However, conflict resolution in a multi-user environment is extremely painful and can definitely be improved.
My recommendation is definitely to have a visual test suite and I promise I will come back with a specific tool when my workflow stops giving me headaches.
Recommendation: -
UI Framework
I don't even remember my last pleasant experience with a UI framework. And possibly it wasn't in the Vue world. The options are many but so are the problems. Configuration hell, bloated implementations, bad performance, and memory leaks only to name a few. This is why a custom implementation on top of a headless component library is my current recommendation. In the vue world, this means shadcn-vue built on top of radix-vue. This is not a library that you install and start using immediately. You need to make the effort to adapt it to your styleguide and for me, this is a good thing.
For the record, if a batteries-included UI library is what you want, some popular options are Vuetify, Element UI, Quasar Framework, Bootstrap-Vue, and PrimeVue.
Recommendation: shadcn-vue & radix-vue.
Static Typing
Apparently, this topic is more controversial than I expected. I understand that TypeScript can easily be abused and take the fun out of programming but I think when used correctly it can enhance our primary role as programmers which is reading code. Critical thinking and TSLint are highly recommended.
Recommendation: Typescript.
IDE
Two popular and equally good options. IntelliJ and vscode. IntelliJ is not free but Vue is supported out of the box, vscode on the other hand is free and open source but additional configuration is needed. In case you prefer vscode make sure you install Volar and TypeScript Vue Plugin (Volar) for an enhanced developer experience.
API Documentation
Swagger is by far the most popular choice. It is based on the OpenAPI Specification and makes it easy to share API documentation with other developers. It is a mature and well-supported project with a large community behind it.
Recommendation: Swagger.
CDN
Any professional website should use a CDN for improved performance and protection against DDoS attacks. Akamai, Cloudfront, and Cloudflare are all good options with the last one being my personal favorite.
Recommendation: Cloudflare.
Observability
Observability is also essential. It helps find and fix problems quickly and gives invaluable insights into how users interact with our application. This understanding is key for making improvements in the future.
Out of the many tools I have used I find Datadog the most user-friendly and powerful. But it is not free. A good free alternative is Prometheus.
Recommendation: Datadog or Prometheus.
Deployment
I currently work with many different applications hosted in Netlify, Vercel, AWS, Heroku, and Digital Ocean, and if you exclude AWS for the unpleasant UI and ridiculous pricing I’m happy with all the rest. They all integrate nicely with GitHub or GitLab and offer a progressive pricing model to match your needs.
Conclusion
These are all my personal recommendations for building a scalable application in 2024 using Vue. As you might have noticed I like to stick with the industry standard most of the time. I think this enables synergies with other tools and their popularity makes bug hunting on stack overflow easier. Deviating from standards like implementing your own lightweight router for example might seem a good idea at first but in the long term, it will definitely cause more problems than it will solve.
Do you have any feedback or a favorite tool that didn't make the list? Let’s discuss it below.
