The State of Nuxt

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 Stats

Nuxt Stats

  • 1,1M downloads on NPM
  • 200K unique visitors on nuxtjs.org
  • 1M project created (Nuxt Telemetry)

August 2020

  • 43K followers on Twitter
  • 30K stars on GitHub

Global

Vue Telemetry

Vue Telemetry

Discover websites made with Vue.js

  • 1K users on Chrome extension
  • 8K unique visitor
  • 4 pull requests merged
  • 3K websites analysed

7 days after launching

  • Made by Nuxt for the Vue community
  • Analyser and Extension are open source
  • 100% free

vuetelemetry.com

Nuxt v3

Nuxt v3

  • Webpack 5
  • PostCSS 8
  • ESBuild
  • TypeScript
  • vue-bundle-renderer for Vue 3
  • ...
  • 👉 Watch Pooya Parsa's talk

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() {
    // Make an API call
    const { data: mountains } = await useFetch('https://api.nuxtjs.dev/mountains')
    
    return { mountains }
  }
}

useFetch

// Signature
useFetch(request, options)

// Watch a param
useFetch(() => `https://api.nuxtjs.dev/mountains/${props.slug}`)

// Use a custom fetcher
useFetch(() => $prismic.api.getByUID('page', params.uid))

// Don't block client-side navigation
useFetch('https://api.nuxtjs.dev/mountains', { defer: true })

// Fetch only on client
useFetch('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

11K members

discord.nuxtjs.org

43K followers

twitter.nuxtjs.org

10K contributors

github.nuxtjs.org

392 donators

oc.nuxtjs.org

THANK YOU