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

45K followers

10K contributors

387 donators

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.

  • 3,387
Loading comments...

More from Sébastien Chopin