Nuxt 3 in Action

Sébastien Chopin

@Atinux

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

app.vue

The entry point of your Nuxt app

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

Routing

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

More

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

50K followers

12K contributors

400 donators

THANK YOU