Home / Blog / What’s Coming in Nuxt 3?
What’s Coming in Nuxt 3?

What’s Coming in Nuxt 3?

Daniel Kelly
Daniel Kelly
September 27th 2021

With the conclusion of the first Nuxt Nation Conference, a lot of us have Nuxt 3 on the brain. So what did the conference yield about the future of Nuxt? Here's quick overview of what we learned!

Beta Release

Most exciting of all, we now have a date set for the beta release! Mark your calendars for October 12, 2021!

october 12 calendar image

Vue 3

If you've been on the fence about using Nuxt due to it's lack of support for Vue 3 your wait is almost over! Nuxt 3 is built with the latest version of Vue and therefore will reap all the benefits of the Vue 3 framework including:

Nitro

Nuxt 3 will be built on a brand new server engine called Nitro. Due to this re-write of the server engine, Nuxt will now benefit from:

  • optimized cold starts with dynamic server code-splitting (from 250ms in Nuxt 2 to 5 ms in Nuxt 3)
  • incremental static generation (the ability to have a mix of SSR and SSG)
  • the possibility for deployment to any system supporting JavaScript (including Node.js, Serverless, Workers, Edge-side rendering or purely static)
  • deployments to serverless platforms like Netlify, Vercel, Azure, AWS, and CloudFlare Workers (platform auto detected, no config required)
  • API Routes, like pages but for API endpoints

Bundlers

Nuxt 3 will support bundling with both the latest version of Webpack (version 5) as well as Vite for both development and production builds. Whichever one you choose, you'll be sure to experience a faster development experience and decreased production build times.

PS. If you want to use Vite in development for Nuxt 2 you can now with the Nuxt Vite module. Just be aware it's still experimental and might not work with many modules but I've had some good success with it so far.

Nuxt Bridge

Worried about migrating from Nuxt 2 to Nuxt 3? The awesome team at Nuxt Labs knows the real world concern of such a migration and has endeavored to make the transition as easy as possible. That's where Nuxt Bridge comes in. Nuxt Bridge provides:

  • backwards compatibility for Nuxt 2 nuxt.config.js
  • and backwards compatibility for Nuxt 2 modules and plugins

Alternately, Nuxt bridge also allows you to incrementally update to Nuxt 3 by backporting several Nuxt 3 features to Nuxt 2 including:

  • Nitro server
  • CLI and Devtool Support
  • Nuxt 3 Composition API with auto imports
  • Nuxt Kit
  • Built in Typescript Support
  • and more!

Other New Features!

  • UnJS Organization - Nuxt core split into Node and Deno compatible packages
  • Optional Page Support - only use Vue Router if you need it
  • Nuxt CLI - for easily scaffolding new projects and integrating modules
  • Nuxt Devtools - Debug Nuxt with specialized tooling right from the browser
  • Native ESM Support - use export default pretty much everywhere
  • Auto global imports - use <script setup> without having to import ref, computed, etc
  • Suspense - data fetching in any component, before or after navigation.
  • Typescript - Built with Typescript and supports Typescript out of the box
  • Nuxt Kit - module development tooling with support for Typescript and cross version compatibility

I don't know about you, but I'm extremely excited for this upcoming release! Go checkout the official coming soon page for more info: https://nuxtjs.org/v3

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Latest Vue School Articles

Automatic File-Based Routing in Vue.js with TypeScript Support

Automatic File-Based Routing in Vue.js with TypeScript Support

This article introduces you to the exciting world of Automatic File-Based Routing in Vue.js 3 using unplugin-vue-router. Say goodbye to verbose router configuration files and embrace a more intuitive, maintainable, and developer-friendly way to define your application's routes.
Mostafa Said
Mostafa Said
Enhanced Routing with UnPlugin Vue Router

Enhanced Routing with UnPlugin Vue Router

Are you ready to take enhance your experience with Vue Router? Look no further than our latest course Enhanced Routing with UnPlugin Vue Router. During the course, we cover how to do everything you already know with vanilla Vue Router but in a type-safe manner and with file-based routing.
Daniel Kelly
Daniel Kelly

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 120.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.