What Vue skills you need for 2022

Beginning a new year is a great opportunity to get clear on the goals we’d like to set for the future. For Vue developers, that means learning new skills to add to your arsenal. With new skills, we can fortify our existing projects, build exciting new features, and stay competitive as we seek promotions and greater opportunities. So you might be wondering: What skills can I start learning now to level up as a Vue developer in 2022?

We’ve thought about this quite a lot as a team here at Vue Mastery, and this article serves as our suggestions for what to focus on if becoming the best Vue developer you can be is a goal for your new year.


New powers with Composition API

Vue 3 is now over a year old, and the Composition API has shown itself to be an enhanced and modernized library for composing highly modular, reusable, and scalable Vue apps. Once you’re adept at using its newfound powers, the Composition API gives you the freedom and control that experienced developers can truly appreciate and take advantage of.

Due to the nature of how it was designed, the Composition API helps you accomplish certain tasks more efficiently than with the Options API, and makes architecting complex features more flexible and bullet-proof as well. You can get a deeper understanding of how it works under the hood by watching Evan You tour the source code in his Vue 3 Deep Dive.

One example of how the Composition API elevates our coding toolset is composables.

Composables

By using the Composition API, Vue developers can craft well organized, transparent, and highly reusable pieces of reactive code, called composables, which can be seamlessly shared across our components. You can think of them as similar to React’s Hooks, or Vue 2’s Mixins, but without the drawbacks and gotchas of mixins.

While the Composition API gives us an empowered approach to component composition and app architecture, it has also led to new developments by the core team that Vue developers who want to stay ahead of the curve should pay attention to.


Pinia - A Vuex Alternative?

One such development is Pinia, a new state management paradigm that could ultimately end up being a viable, simplified (1kb) alternative to Vuex. You may have noticed an open RFC for Vuex 5 with an API very similar to the one used by Pinia.

Pinia began as an experiment by Core Vue.js Team Member Eduardo San Martin Morote, reimagining what a Global Store for Vue could look like with the Composition API. It has since evolved into a package that builds upon the principles of Vuex, while forming the foundation for a more intuitive and lightweight solution that is just as powerful as Vuex.

It comes with:

  • Devtools support
    • A timeline to track actions, mutations
    • Stores appear in components where they are used
    • Time travel and easier debugging
  • Hot module replacement
    • Modify your stores without reloading your page
    • Keep any existing state while developing
  • Extensible via plugins
  • Proper TypeScript support or autocompletion for JS users
  • Server Side Rendering Support

Because of how exciting this new library is, we’re working on a course that demonstrates how to take an app relying on Vuex and translate it over to Pinia. You can expect new tutorials from this course to be released at the beginning of 2022, taught by Ben Hong, Core Vue.js Team Member and Member of the Nuxt.js team.

Speaking of Nuxt, let’s talk about Nuxt 3.


Nuxt 3 on the horizon

We recently released an article about Nuxt 3 and what that means for you. In short: the framework was completely rewritten from the ground up and is faster, more performant, and easier to maintain.

With an improved CLI, new tools such as Nuxt Suspense, Nuxt Bridge, and Nuxt DevTools, the developer experience has been vastly improved and expanded.

Due to the rewrite being done in TypeScript, this means we get the option of type checking with TypeScript support built into our Nuxt apps. Don’t want to use TS? That’s okay; it’s completely optional.

However, if TypeScript support is highly important to you, you’ll also be interested in learning how to take advantage of the next item on our list.


Script Setup Syntax

Similar to Nuxt 3, Vue 3 itself was a full rewrite done in TypeScript as well. This means we get first-class TypeScript support in our Vue 3 apps. But how do we take full advantage of Vue 3 + TypeScript?

The short answer is: script setup syntax. Although it’s essentially just syntactic sugar for the Composition API, it gives us highly useful features to use when working with props and emits in TypeScript.

Over the next several weeks, we’ll continue to release tutorials from our full course that shows how to leverage the script setup to make your Vue code much more TypeScript-friendly.


Speeding things up with Vite

By now, you’ve probably heard of Evan You’s new build tool called Vite. Evan calls it “the next generation of front end tooling,” and honestly we agree.

Vite.js is a build tool that comes with a dev server and bundles your code for production. It’s similar to the Vue CLI in terms of how much it can speed up your development process, but it’s significantly faster (hence the name Vite — French for “quick”) and much more flexible for build processes that require a more DIY configuration.

If you want to learn Vite from the man who wrote it, check out our full Lightning Fast Builds with Vite workshop taught by Evan You.


Querying with GraphQL

If you’ve been in the web dev world for any significant amount of time, you’ve heard of GraphQL. It’s a query language, similar to SQL, for reading and mutating data in APIs. By supplying back end developers with a type system to describe a data schema, front end developers can request exactly what they need, nothing more and nothing less. This solves the inherent problems of under- or over-fetching in a traditional REST setup.

It’s the kind of tool that can enhance developer collaboration, code clarity, and team communication, while providing an element of code elegance. If you’re interested in exploring it, check out our Querying with GraphQL course, taught by Marina Mosti and Core Vue Team Member Natalia Tepluhina.


What else can you conquer?

While this list isn’t exhaustive, this is a great start to leveling up your skills in 2022. All of these topics and more are already or soon will be covered in our growing library of 30+ premium courses taught by the same people building the tech and working with it daily.

If you aren’t yet a member of the Vue Mastery community, we invite you to join us at a deeply discounted price. We’re currently offering our year-long subscriptions for the price of less than 6 months. Feel free to claim this discounted price to start your year of upskilling with us.

Download the cheatsheets

Our new Vue 3 Migration guide, Composition API, Vue.js essentials, Pinia, and Nuxt.js cheat sheets save you time and energy by giving you essential syntax at your fingertips.