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.

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.

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).

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.

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).

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:

  • Nuxt 3
  • Vue 3
  • Firebase
  • Pinia
  • VueUse
  • Vuetify 3

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.

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.

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.

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.

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.