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

The State of Nuxt

By Sébastien Chopin

The State of Nuxt

Sébastien Chopin, creator of Nuxt.js will explain the current state of Nuxt for 2020, from version 2 to 3.

  • 16,014
Loading comments...

More from Sébastien Chopin