From my point of Vue: Vue 3 Ecosystem

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:

• Vue SFC Playground
• stackBlitz

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.

• naive ui
• element plus

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.

Resources

• awesome vue
• The New Vue by Evan You