Since the release of Vue3 on Sep 18, 2020 the ecosystem of the framework have been in a transition period because even when the core library was ready for production the ecosystem was behind.
I build a production ready project back in february 2021 with Vue3 and the change to the composition API was kind of smooth and you can build strong components abstractions like headless components. The libraries, plugins components available were minimal and those available weren't stable which was normal at this point.
In 2022 the future looks bright and looks like we'll reach the stability, there's a lot of good reactivity libraries, components and ui frameworks that are production ready.
In this post we are going to take a look at
- The recommendations
- How the ecosystem looks like right now
- What are we missing for stability.
Recommendations
It is good to have multiple options to do tasks but sometimes when we got many options it can get chaotic and spent too much time selecting tools to start a new project, that's why official recommendations are good to set a standard, reduce cognitive load and spent less time in trivial things.
Here are some recommendations made by the Vue Core Team:
Toolchain
Vite. You are probably familiar with this one, Vite (pronounced /vit/) is a build tool that provides a fast developer experience to build apps, libraries, etc. The community has embrace it very well and has built awesome plugins, boilerplates and templates and has crossed the horizons of Vue itself and can work with react, svelte, preact and others with typescript support out of the box.
Volar and vue-tsc improves the experience of working with typescrypt and vue3. the first one is an editor extension built for Vue 3 and the latest is a wrapper to type-check Vue Single File coomponents and typescript and also generate definitions.
State Management:
One of the advantages of the composition API is that is reactivity works outside of components life cycle, and you can build what we know like stores just by wrapping an object in reactive over a year this is the approach I have followed personally; but for more advanced use cases Pinia is the recommended way to go.
Pinia is a state management library designed with the ideas of vuex-next so it is the spiritual succesor of Vuex some of the highlights of pinia are:
- Devtool integration
- SSR support
- type-safe stores
Others
Tooling cli: create-vue
Playgounds Are an important option to share code with others and very useful when reporting bugs as reproduction links now the recommended playgrounds by the Vue team are:
What we have
Here is a short selection of libraries that might be useful for common cases when building new apps with Vue3
UI Libraries.
UI libraries are a good way to speed up development and just focus in business logic.
Vueuse
Vueuse is a set of composables(hooks) for vue 3 that wrap many Browser API's, animation and other utilities to provide an easier and reactive way of use to us.
Vitesse
Vitesse is a template strongly opinionated built by Anthony Fu it provides the best SSR boilerplate we have currently in the ecosystem, you can fork and customize it as you like for your next app.
What is coming
New docs:
The official documentation has been rewritten more beautiful than ever, with best practices, extra topics and the detailed and comprehensive technical writing to teach you how to use Vue
You can take a look of what is coming here
Nuxt 3:
Nuxt is coming powered by Vue3 that means by default will be faster, lighter and with great support for typescript but in addition vite support, webpack 5, a Nuxt CLI and a Nuxt Kit for module development are part of the new Nuxt 3 currently it is in beta so if we use it and report bugs if we find them or even help to solve them with a PR would be awesome.
Make Vue 3 default
Currently Vue 3 is kind of hidden one could say, because if we run npm install vue or search for Vue in google Vue 2 is the one that is coming, this is by design of course, so the event that officially will mark the new era is the Final switch when Vue 3 will be the default Vue. And this is coming soon.
Wrapping up
I hope you find this walk around the current Vue ecosystem useful, if you have seen any other cool project or have information that I missed to mention here share it with us on the comment section and as always let me know about any questions you have here or on Twitter.
Thanks for reading and have a nice day.
Top comments (0)