Nuxt 3 in Action

Sébastien Chopin


Co-creator of Nuxt

Nuxt v3

Nuxt v3

  • Webpack 5 and Vite support
  • PostCSS 8
  • ESBuild
  • Rewritten in TypeScript
  • vue-bundle-renderer for Vue 3
  • Modules utils
  • New rendering engine: Nitro (see Daniel Roe talk)
  • See Pooya Parsa talk for more details

Internal changes


The entry point of your Nuxt app

  <h1>Hello Nuxt 3</h1>  
  • Optional if using pages/ directory
  • Perfect for global data fetching
  • Great for landing pages or app without router
  • Produces 20.68KB gzipped JS


A powerful routing system based on Vue Router 4

  • pages/_slug.vue becomes pages/[slug].vue
  • Catch sub paths with pages/blog/[...all].vue
  • Support pages/404.vue and pages/_error.vue
  • Ignore prefix is now underscore: pages/_ignored.vue
  • Add routes at runtime with plugins
  • <nuxt/> and <nuxt-child/> become <nuxt-page/>

Data Fetching

How to fetch data with Nuxt 3

  • Brainstormed with Evan You
  • Based on the composition API
  • Can pause the page navigation until fetched
  • Support server-side rendering and hydration
  • Works at the component level == everywhere
  • Will support caching (SWR like)
  • Support custom data fetcher


What are the other changes

  • Auto import of plugins/
  • static/ becomes public/
  • app.html becomes document.html
  • Hooks on the app side: app:created, page:finish, etc.
  • Support for multi apps (theming)
  • New functions/ directory for server-only execution
  • First class Serverless support

When will it be open source?

Alpha version for Q1 2021

Beta version for Q2 2021

Nuxt Community

Nuxt Community


12K contributors

400 donators


Nuxt 3 in Action

By Sébastien Chopin

Nuxt 3 in Action

Sébastien Chopin, creator of Nuxt.js will demo Nuxt 3 pre-alpha version.

  • 24,410
Loading comments...

More from Sébastien Chopin