About me

Alexander Lichter

Nuxt.js Core Maintainer

@TheAlexLichter

https://lichter.io

Web Dev Consultant

@TheAlexLichter

2

+ vue router +                      (+ vuex)

Wait.

Why using a framework...

...on top of another framework?

To make

developer's life easier

easier

How?

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

⚡️ Batteries included

@TheAlexLichter

  • Includes common libraries (vue router, vuex, vue-meta)
  • Configured build tools out of the box (PostCSS, Babel, Webpack)
  • Basic but flexible folder structure
  • File-system-based routing
  • Supercharged components
    • layout concept
    • easy transition between pages
    • component functions to make data fetching a breeze

@TheAlexLichter

There can be many folders

Minimal structure

Folder structure

FS Routing explained

@TheAlexLichter

🚀 Optimized

@TheAlexLichter

  • 58kb minified + gzipped
  • Code-splitting by default
  • Sensible default webpack config
  • 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

Composition API

@TheAlexLichter

Composition API

@TheAlexLichter

  • A new API concept for writing Vue components
  • Available in Vue 3
  • "Backported" via plugin in Vue 2
  • Nuxt module to combine CAPI with Nuxt features

Let's build our frontend now!

@TheAlexLichter

Made with Slides.com