What is changing for vuejs developers in 2023

2022 saw some major changes in the Vue.js ecosystem from Vue 3 becoming the new default Vue version, to development environments pivoting to Vite, to a stable release of Nuxt 3. What do all these changes, and others, mean for Vue.js devs in 2023?

Let’s consider what the next year might hold.

Vue 3

Early in the year, Vue version 3 became the new official default. This marks the end of an era for Vue 2, and means most of the existing Vue projects out there need to consider an upgrade soon, if they haven’t already. While many teams were hindered from upgrading due to community packages lagging behind in Vue 3 support, many popular packages are now compatible.

Some of these popular packages that now support Vue 3 include: Vuetify, VueFire, and Vee-Validate.

Composition API

With Vue 3 as the new default, it’s becoming more and more normal for developers to go all in with the Composition API. By that, I mean using the Composition API not just for shareable composables and/or for large components for better organization, but also in everyday component development.

This is reflected in the official docs, as well as in numerous blog posts, video tutorials, library docs, and more. I expect to see this trend continue. Script setup makes using the Compositon API everywhere feasible and even delightful. Plus, it makes integrating 3rd party composables easier and makes extracting your own composables more intuitive.

On this same note, definitely expect 3rd party libraries to expose functionality primarily via composables (with options API interfaces or functional components given second priority, if included at all). VueUse is a great example of how powerful plug-and-play composables can be!

TypeScript

Another trend I see growing in 2023, is the use of TypeScript to build large scale (and even some small scale) apps. After all Vue 3 itself is built with TS. The official scaffolding for Vue 3 (npm init vue) provides a simple prompt for TS setup and Nuxt 3 supports it by default. This low barrier for entry will mean more developers giving it a spin.

Furthermore, if you want to publish a quality plugin in 2023 you’ll definitely want to do so in TypeScript. This makes it easier for the package consumers to interact with your code, due to improved autocompletion/intellisense and error detection.

State Management with Pinia

In preparation for a new version of Vuex, Eduardo San Martin Morote and Kia King Ishii experimented with a new state management library called Pinia. Now Pinia replaces Vuex as the official state management solution for Vue. This change is certainly an upgrade. Pinia lacks some of the more verbose and confusing abstractions from Vuex (ie. mutations, root store vs modules, etc), is more intuitive to use (it feels much like plain ol’ JavaScript), and supports TypeScript out-of-the-box.

While Vuex is not going anywhere anytime soon, I definitely predict many projects will make migrating from the old to the new a priority, for the sake of developer experience. If you need help with the process, we have an article dedicated to the migration topic on the Vue School blog and there’s also a page in the official Pinia docs to help with the process.

Lightning Fast Development with Vite

In my opinion, Vite is arguably one of the technologies with the biggest impact on Vue development this year. It’s lightning fast dev server start times and HMR definitely mean faster feedback loops, improved DX, and increased productivity. For those projects that are still running on Vue-CLI/webpack, I imagine teams will spend a bit of time in 2023 migrating to Vite.

While the process looks a little different per project (and definitely a bit more involved when custom webpack configs are concerned), we have a helpful article on the Vue School blog that walks you through the general process step by step. For most projects, it should be a pretty quick process but even for those more complex setups that take a bit more time, the payoff is well worth the effort.

Also, besides the core solution, Vite has spawned a number of complimentary solutions such as Vitest (a zero-config testing solution for Vite) and Vite PWA.

Nuxt 3

Sébastien Chopin announced the release of a stable Nuxt 3 at Nuxt Nation just last week. The latest version comes with some amazing upgrades like hybrid rendering, Vue 3 support, api routes, and more! With the rise of the composition API, I see Nuxt being further adopted even in projects that don’t require server side rendering. Why? Because the auto-imported components, composables, and utilities alone make for cleaner component files and improved DX.

For projects that do require server side rendering, I see Nuxt being adopted more often as an all-in-one solution, since it now includes server API routes and can be run almost anywhere (yes, even in serverless function on platforms like Netlify and Vercel!).

Besides traditional universal rendering, where full pages are hydrated in the client, also be on the lookout for ways to minimize the amount of JS downloaded in Nuxt 3. The move to minimal JS and frameworks like Remix with the call to #useThePlatform will definitely have their influence.

More to Keep an Eye On

These predictions and observations are only a few of the things to look forward to. There are still plenty more that are worth briefly mentioning.

  • Keep an eye on Nuxt Studio for managing your site content in the browser
  • The Nuxt 3 extends option is a promising feature that just might revolutionize the way we share components, composables, themes, etc across projects.
  • pnpm is becoming ever more popular for package management and has built-in support for mono-repos. Consider subsitituing it for npm or yarn in your next project.
  • The UnJS organization on Github is building many very promising softwares to help you build JS projects that can run anywhere. It powers a good deal of the Nuxt 3 framework.
  • Packages that are built from the ground up for Vue 3 are providing some competitve advantages over similar solutions that you might already be comfortable with from using in Vue 2. In my opinion, some examples of these include: FormKit, Histoire, and VueUse.

Bring on 2023

The changes brought about in 2022 have poised 2023 to be a great year for the modern Vue.js developer. At Vue School, we are well aware of these evolutions in the ecosystem and are actively producing video and written content to empower you for what’s to come

!We already have courses dedicated to teaching you

Vite, VueUse, Pinia, TypeScript for Vue.js, the Composition API, FormKit, Vitest, and even Nuxt 3! Rest assured we’ll continue tracking the trends and the solutions best fit for your Vue.js apps and schedule our content accordingly.

Thus, I say, bring on 2023! And I wish a productive year for you and your Vue.js applications.