Vue skills to master in 2023

As the front-end development world continues to evolve, the Vue.js framework and its team of sage core team members is at the leading edge of innovation. As a Vue developer, now more than ever there are new skills, tools and libraries you can add to your tool chest so you can be the best Vue developer you can be in 2023.

If you want to stay at the top of your game, you want to reach mastery and stay there. Mastery not only gives you confidence in your work, but it can guarantee job security, unlock the promise of promotions, and open up doors to expansive opportunities.

So what exactly should us Vue devs be focusing on for 2023? This article serves as your guide to the hot topics, tools and trends that you can stay on top of to elevate your code and level up your life.

Composing like a pro 🧑‍💻

When Vue 3 was released, we received the Composition API, which empowers us to build highly modular, reusable, and scalable Vue apps. The key to how we can achieve this is in the name: composition.

When we truly understand how to get the most out of the Composition API, we wield our wizard wand of wonder. 🧙‍♂️✨

The Composition API

If you’re still on Vue 2, or you’re only using the old Options API in your Vue 3 apps, it’s time to join the new frontier and learn the Composition API. In case you missed it, Vue 2 will officially retire two years from the time of this writing.

While the Options API still works and will likely remain relevant for years to come inside Vue 3 apps, it’s just one option for how to compose your components. And it’s certainly not the most powerful, flexible and readily reusable option.

In fact, since the release of Vue 3, the Composition API has even seen a revamp with the Script Setup, which is a syntactic sugar-coated version of the Composition API that gives Vue developers the freedom to create even more performant components with built-in readability, reusability, maintainability, modularity, and makes them more TypeScript-Friendly to boot.

There’s a reason the Script Setup syntax is the recommended way to compose components, according to Vue Creator Evan You. So if you’ve been waiting for a sign to start learning it, stop waiting. You can start with our Vue 3 Composition API course, taught by Gregg Pollack, and then grab your shovel and go on a Vue 3 Deep Dive, with the guidance of Evan You himself.

☝ The upcoming Vapor Mode that Evan You is working on will only work with Composition API.

Crafting Composables

One of the core powers the Composition API gives us is the ability to write and use composables. When composed carefully, these are neatly organized, transparent, and highly reusable pieces of reactive code that can be seamlessly shared across our components.

You can think of them as similar to React Hooks, or mixins from the Vue 2 days (without the drawbacks and gotchas of mixins). By now, you may have heard of or even used a composable from the popular VueUse library.

This year, we advise you to hone your ability to craft elegant composables. This will allow you to not only better understand and incorporate composables from existing libraries, but you’ll be able to create your own useful library of composables that are custom-crafted to excel across your app(s).

Check out our Coding Better Composables course to get going.

Join the Pinia Pioneers🍍

Last year, Pinia became the officially supported state management library for Vue.js, sending Vuex into the front-end history books.

Sure, like the Options API, Vuex is still very much in use in apps around the world, but it’s the old model of a tool that they aren’t making anymore because it’s been replaced by something thoughtfully reimagined (by Core Vue.js Team Member Eduardo San Martin Morote) to be more intuitive, lighter weight, more modular, freeingly flexible, and developer-friendly.

If you’re wondering (worrying?) if you should convert your app that relies on Vuex over to Pinia, the answer is the same as many development questions: it depends. It depends on how much overhead that adds to you/your team’s workload compared to the added benefits that this shiny new library will provide.

However, if you’re starting a new project, or just plain intend on staying in the Vue ecosystem for the foreseeable future, you’ll need to know how to work with Pinia sooner or later. And when it comes to reaching mastery and staying there, sooner is always better than later.

To join the Pinia pioneers paving the path of state management in 2023, you can start with the Pinia Fundamentals course, then use the From Vuex to Pinia course to map your Vuex knowledge over to the Pinia paradigm.

Our upcoming Proven Pinia Patterns course will teach you more advanced use cases and best practices when architecting your apps with Pinia.

Nuxt 3 is ready for liftoff 🚀

At the end of 2022, we finally received the much-anticipated Nuxt 3 official release. This is a big deal because the Nuxt framework has now been completely rewritten from the ground up to be faster, more performant, and easier to maintain.

This production-proven framework helps you build scalable Vue apps with best practices and time-savers built in, and it’s now future-proofed with an improved CLI, new tools (such as Nuxt Suspense, Nuxt Bridge, Nuxt DevTools) and an ecosystem of useful modules.

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. (Not using TS? It’s completely optional).

We have an expanding playlist of Nuxt 3 courses, which starts with the Nuxt 3 Essentials course, and includes a course where you can Build a Blog with Nuxt 3 using Nuxt Content module V2, taught by Nuxt Ambassador Ben Hong.

Behind the scenes, we’re currently producing a Fullstack Nuxt 3 course, which will be power-packed full of modern Vue-ecosystem tools so you can combine a number of libraries, including:

This will be one of our most comprehensive courses to date, so keep an eye out for its release!

VueFire for Firebase 🔥

Speaking of Firebase… until recently we didn’t have an elegantly opinionated way to sync up our Vue 3 apps with Firebase. Now, with the brand new VueFire library, we have a starter kit that simplifies using Firebase’s Cloud Firestore database and authentication-provider for your Vue 3 apps.

VueFire is the latest tool built by Eduardo San Martin Morote (creator of Vue Router, Pinia, and more).

If you’ve used Eduardo’s libraries, you know they’re thoughtfully designed and enable elegant implementations. In the case of VueFire, this is a collection of composables that allows us to create realtime bindings, making it straightforward to always keep your local data in sync with remote databases.

Our course Firebase with Vue 3 & VueFire is the best way to add this new tool to your arsenal.

It’s pronounced “Veet” not “Vite” ⚡

If you haven’t heard of Vite.js by now, allow me to pull you out from underneath that boulder and introduce you to one of the most popular and rapidly adopted tools of the web world.

“The next generation of front end tooling” — Evan You

Created by Evan You, Vite is a build tool that comes with a dev server and bundles your code for production. As it’s name suggests (Vite is French for “quick”) Vite is lightning-fast and highly flexible for build processes that require a 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.

As Vite has quickly reshaped the world of web dev, it has birthed offspring such as Vitest, a blazing-fast unit test framework that is Jest-compatible and comes with out-of the-box ESM, TypeScript and JSX support, and is powered by esbuild.

We’re working on a complete Vitest course, but in the meantime you can Get Started with Vitest here on our blog.

TypeScript for a better night’s rest

On the topic of rapidly adopted web dev tools, we round out this guide with the incredibly popular TypeScript.

It’s not by chance that all of the major frameworks have been written in TypeScript under the hood (Vue 3, Nuxt 3, Vite…). TypeScript gives us that added layer of type-checked safety, predictable, and bug-proofability that helps us sleep at night and increases our team’s collaborative productivity because we aren’t pulling our hair out wondering who thought it was a good idea to send strings into a parameter that should only ever be an object ( !?!🤦!?! ).

TypeScript is one of those tools whose value is self-explanatory as soon as you reach the point where its absence is dragging down your productivity. And with the Volar extension for VS Code, it’s that much easier to use.

If you’re ready to join the TypeScript gang, we’ve got you covered with our courses Intro to TypeScript + Vue 3 and TypeScript Friendly Vue 3.

What else should you master?

While this list isn’t exhaustive, it’s a great start to elevating your skills and future-proofing your career.

You can find all of these topics and more in our always growing library of 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 of 55% off, saving you $165 on a year’s access to all of our existing and upcoming courses. Use the discount now while it’s still active.

Originally published at https://www.vuemastery.com on January 6, 2023.

---