Best stacks to build vue applications
Introduction
Vue is one of the most popular frontend frameworks for its easy of use, powerful reactivity and it modular nature what I mean by this is that you can start really small just the core or add router, state management, etc.
Here will discuss about 4 interesting stacks to build Vue applications.
Laravel + Inertia.js + Vue.
Laravel is one of the most complete backend frameworks to ever exist and the ecosystem is very dynamic and rich in terms of packages; from ORM to queues, notification systems, payments with integrations whatever thing you need to build a successful project Laravel has a official support or the community has build a package for it.
Inertia.js allows us to keep our controllers, validators on backend and send props and data to the frontend without the need of initial API calls, manage forms state in with a beautiful and clean API and even a SSR mode to improve the speed of your pages. Inertia serves as a glue between backend and frontend combining the best of Laravel apps and the best of SPA.
The Laravel team has make our job easier preparing starter kits and guess what, there is vite⚡support.
Pros
- Mature and battle-tested backend framework
- Let backend manage routing, validations and things like that
- Get the best of SPA and traditional MPA
- Top documentation
Cons
- Good hosting/deploy options cost more money than (JAM Stack for example).
- Needs to know two programming languages
Astro
When I first read about Astro I was amazed by the concepts and motivation of the project the concept of island was implemented nicely and ship just the JavaScript that is needed (or none at all) was a good contrast with the trend going on at that point and has inspired other frameworks to go in that direction.
Astro let you use any frontend framework among Vue, React, Svelte, Preact, Solid, Lit, Alpine to build components and build SSG it is a good option for documentations and personal sites, digital gardens and with great performance out of the box.
The framework is relatively new reaching the milestone of v1.0.0 beta in April new but its community is growing
Pros:
- Great performance out of the box.
- Support for the top frontend frameworks.
- Easy to deploy and free hosting options.
- Good documentation
Cons:
It is new, so the ecosystem is not large.
Dealing with state between pages can be tricky.
Nuxt
Single Page Applications are good but some projects by their nature require a SEO-friendly approach and additional improvements and app performance and developer experience. Nuxt comes to fill that GAP in the Vue ecosystem.
The hybrid Vue framework allow us to build production ready apps faster giving us abstractions on things like routing, state management, SSR on top of Vue. The version 3 add support for Vue 3, vite and a better server engine nitro
Pros
- Provide SSR, SSG perfect for SEO-friendly apps.
- Easy to deploy and free hosting options.
- Vue abstractions like Components auto-import, routing, store.
Cons
- By the time of this post Nuxt 3 is in RC.
Vue + BaaS (firebase, Supabase, Amplify, etc)
Something that I really like about this approach is that you need fewer dependencies and that means that when a big upgrade like Vue 3 happens you wouldn't have to wait compatibility from meta-frameworks to migrate, you’ll have more opinions and control of your code this a good option if you don't need SSR, you're app idea is not too complex.
There are good options for backend as a service like Firebase, Supabase, and others that can provide authentication, database, real-time, storage etc. with little code compared to the traditional approach. It is good for proof of concepts, small apps.
Pros:
- You can have functional apps with less backend code
- Easy to deploy good hosting options
- Good support for different auth providers.
Cons:
- Vendor Locking (unless is opensource like Supabase).
- Maybe not the best option for complex data, apps.
Final Thoughts
When it comes to development there is no silver bullet as every case is different and its own world the Vue ecosystem is not an exception, it is in our hands evaluate the trade offs of every case. If we set these stacks where the shine the most I am sure that any project will go in good direction.
Than you for reading, I hope the article can save you some time if you have any questions or want to share a stack the comments are open, as well as my Twitter and Github.