Sébastien Chopin
Co-founder and CTO of NuxtLabs.
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
THANK YOU
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.
Loading comments...
