Sébastien Chopin
Co-founder and CTO of NuxtLabs.
The State of Nuxt
November edition
Sébastien Chopin
@Atinux
Co-author of Nuxt.js
Nuxt v2.14
Full Static
Full Static
// nuxt.config.js
export default {
target: 'static'
}nuxt generate- Mock asyncData & fetch
- Crawler to generate dynamic pages
- Offline support with PWA
Smart Generate
Smart Generate
Skip webpack build step when no code has been changed
- Faster re-deploy ⚡️
- Platform agnostic (works on Vercel, Netlify and any CI)
- Works with @nuxt/content and any CMS
3.6x times faster re-deploy 🚀
Nuxt Modules
Nuxt Modules
Nuxt Stats
Nuxt Stats
- 1,2M downloads on NPM
- 1,5M pageviews on nuxtjs.org
- 80K pageviews on nuxt modules docs
October 2020
- 45K followers on Twitter
- 31K stars on GitHub
Global
Vue Telemetry
Vue Telemetry
Discover websites made with Vue.js
- 2,5K users on Chrome extension
- 100K pageviews
- 15 pull requests merged
- 17K websites analysed
2 months later
- Made by Nuxt for the Vue community
- Analyser and Extension are open source
- 100% free
Nuxt v3
Nuxt v3
- Webpack 5
- PostCSS 8
- ESBuild
- Rewritten in TypeScript
- vue-bundle-renderer for Vue 3
- Modules utils
Internal changes
Vue 3
app.vue
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
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
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
useFetch
useFetch
import { useFetch } from '@nuxt/composables'
export default {
async setup() {
const $fetch = useFetch()
// Make an API call
const { data: mountains } = await $fetch('https://api.nuxtjs.dev/mountains')
return { mountains }
}
}useFetch
// Signature
$fetch(request, options)
// Watch a param
$fetch(() => `https://api.nuxtjs.dev/mountains/${props.slug}`)
// Use a custom fetcher
$fetch(() => $prismic.api.getByUID('page', props.uid))
// Don't block client-side navigation
$fetch('https://api.nuxtjs.dev/mountains', { defer: true })
// Fetch only on client
$fetch('https://api.nuxtjs.dev/mountains', { server: false })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?
As soon as it becomes usable. 🤷🏻♂️
Nuxt Community
Nuxt Community
Mastering Nuxt
Mastering Nuxt
Learn Nuxt.js Through a Real World App
- The Nuxt Masterclass in partnership with VueSchool
- Josh Deltener as teacher (Nuxt Ambassador)
- Support Nuxt development 💚
- Early bird discount: nuxtbird
THANK YOU
The State of Nuxt (November Edition)
By Sébastien Chopin
The State of Nuxt (November Edition)
Sébastien Chopin, creator of Nuxt.js will explain the current state of Nuxt 2, the roadmap for Nuxt 3 and what to expect.
Loading comments...
