Modern Web Development with

Nuxt3

WeAreDevelopers - 25.11.2021

Nuxt3

About me

Alexander Lichter

Nuxt.js Core Maintainer

@TheAlexLichter

Web Dev Consultant

@TheAlexLichter

The Intuitive

Vue Framework

Vue

2

@TheAlexLichter

2

+ vue router +                      (+ vuex)

2

4

@TheAlexLichter

Why Nuxt?

Why not "just use Vue"...

@TheAlexLichter

Using Nuxt will make your life as a developer easier

@TheAlexLichter

How?

  • ⚡️ Batteries included
  • 🚀 Optimized
  • 🃏 Versatile
  • 🧩 Modular
  • 🤗 Developer-friendly

@TheAlexLichter

The Intuitive

Vue Framework

Vue

3

@TheAlexLichter

3

Why?

@TheAlexLichter

  • Dependencies came out with major (internal) changes
    • Vue 3
    • Webpack 5
  • Vite had been released as "next generation" tooling
    • Nuxt module for Nuxt 2 available
    • but deeper intergration desirable
  • Internal refactorings that would cause breaking changes
  • Improve support for deployment (serverless + workers)
  • Make vue-router optional (for very simple sites)

@TheAlexLichter

3

5

unjs

  • Decoupled modules
  • Powering the Nuxt core
  • Can be used in any JS/TS project
  • Easier to test than the full core
  • Helpful for other projects too

@TheAlexLichter

How will it help developers?

  • ⚡️ Batteries included
  • 🚀 Optimized
  • 🃏 Versatile
  • 🧩 Modular
  • 🤗 Developer-friendly

⚡️ Batteries included

@TheAlexLichter

  • Includes common libraries if necessary (e.g. vue router)
  • Easy manipulation of the document head (useMeta)
  • Configured build tools out of the box (PostCSS, ESBuild, Webpack5/Vite)
  • Basic but flexible folder structure
  • File-system-based routing
  • Supercharged components
    • layout concept
    • create easy transition between pages
    • composables to make data fetching a breeze

@TheAlexLichter

There can be many folders

But you only need an app.vue to get started

Folder structure

FS Routing explained

@TheAlexLichter

🚀 Optimized

@TheAlexLichter

  • Code-splitting by default
  • Sensible default configs
  • Asset fingerprinting (& cache busting)
  • Modern mode
  • Smart prefetching

🃏 Versatile

@TheAlexLichter

SPA

Dynamic SSR

SSG

Build classic Single Page Applications - just one HTML files and lots of static assets

Render HTML on the fly through a running Node.js server

Generate your site at build time (Jamstack!) and provide a fallback for dynamic sites

🤝

SPA

@TheAlexLichter

CDN

1. Request

2. Return "empty" HTML file + JavaScript

3. Parsing

API

4. Request

5. Response

Dynamic SSR

@TheAlexLichter

Node.js

Server

1. Request

4. HTML + JS

API

2. Request

3. JSON

3. Hydration after

JS download

Static Site Generation

@TheAlexLichter

Node.js

Server

3. HTML + JS as static files

API

1. Request

2. JSON

Generation Step

Static Site Generation

@TheAlexLichter

Client Step

CDN

1. Request

3. Hydration after JS download

🧩 Modular

@TheAlexLichter

☸️ No need to "reinvent the wheel"

✅ Easy to integrate 3rd party libs

🎣 Hook into workflows of the frameworks on demand

👐🏻 Great to share and open source

🧩 Modular

@TheAlexLichter

☸️ No need to "reinvent the wheel"

✅ Easy to integrate 3rd party libs

🎣 Hook into workflows of the frameworks on demand

👐🏻 Great to share and open source

https://modules.nuxtjs.org

🤗 Developer-friendly

@TheAlexLichter

🤗 Developer-friendly

@TheAlexLichter

  • Meaningful error messages
  • Thorough documentation
  • Discord for help, suggestions and chit-chatting https://discord.nuxtjs.org

Important!

@TheAlexLichter

Nuxt3 is still in beta.

Feel free to give it a spin and tell us:

  • What you enjoyed
  • If there are any hiccups
  • Or any severe problems

Live Coding!

@TheAlexLichter

  1. Initialize our NuxtJS (3) app
  2. FS Routing
  3. Data Fetching
  4. Server Side Rendering

Results

@TheAlexLichter

Thank you!

Alexander Lichter

Nuxt.js Core Maintainer

@TheAlexLichter

Web Dev Consultant

Modern Web Development with Nuxt3 (WeAreDevelopers 2021)

By Alexander Lichter

Modern Web Development with Nuxt3 (WeAreDevelopers 2021)

  • 1,251