Being a web developer means consistently learning new skills to add to our arsenal of skills. 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?
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 right now to be the best Vue developer you can be.
New powers with Composition API
Vue 3 is well 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.
If you want to learn how to craft your own composables, check out our Coding Better Composables course, taught by Gregg Pollack.
Pinia - the next evolution beyond Vuex
One such development is Pinia, the new officially supported state management library for Vue.js.
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, but more developer friendly.
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
To start learning Pinia, head to our Pinia Fundamentals course.
Nuxt 3 on the horizon
The Nuxt framework is being completely rewritten from the ground up to be faster, more performant, and easier to maintain.
With an improved CLI, new tools such as Nuxt Suspense, Nuxt Bridge, and Nuxt DevTools, the Nuxt 3 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.
You can start learning Nuxt 3 in our Nuxt 3 Essentials course, or even Build a Blog with Nuxt 3 using Nuxt Content module V2, along with Nuxt Ambassador Ben Hong.
Script Setup Syntax
Similar to Nuxt 3, Vue 3 itself was also fully rewritten in TypeScript. 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.
Our course TypeScript Friendly Vue 3 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 popular build tool called Vite. Evan calls it “the next generation of front end tooling,” and 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, it’s a great start to elevating your Vue skills You can find all of these topics and more 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 40% off. Feel free to claim this discounted price to start upskilling with us.
