A Nuxt.js Introduction

VueJS Dublin - 29/11/18

About Me

Alexander Lichter

Nuxt.js Core Team Member

@TheAlexLichter

Nuxt.js

The Vue.js Framework

Why using a Framework...

...on top of a Framework?

To make things easier!

We Trust in Nuxt

Fichier 26

...and many more!

Benefits of Nuxt

⚡️ Batteries included

🚀 Optimized

🃏 Versatile

⚙️ Extensible & Configurable

⌨️ Developer-friendly

Batteries Included

Common libraries (vue-meta, vue-router, vuex) already included out of the box

Supercharged page components (asyncData, fetch)

Webpack and Babel configured out of the box

Predefined folder structure based on Best Practices and used for Routing

PostCSS (with Autoprefixer) by default

Optimized

Code splitting per page

Automatic loading of critical CSS

Minification out of the box for both: CSS and JS

Preloading of other pages

after important content

HTTP2 push support

GZIP compression (in SSR mode)

Modern mode

Versatile

Server-Side-Rendering (Universal)

"Typical" SPA

Static Generation

Programmatic usage

Extensible/Configurable

One config file: nuxt.config.js

Nuxt modules

Nuxt hooks

Nuxt plugins

Developer-Friendly

Useful stack traces

No footguns

Always improving Documentation

Elegant solutions

Server-side rendering

What? Why? Oh!

Traditional SSR

Backend

1. Request

4. HTML

DB

2. Query

3. Results

But: "Click and wait" for every page

SPA

CDN

1. Request

2. JS

3. Parsing

API

4. Request

5. Response

Advantage: No extra load for further pages

Problem: Parsing, no "instant" content

-> bad SEO and bad UX

Universal

Node.js

Server

1. Request

4. HTML

API

2. Request

3. JSON

Universal

5. Download and Execute JS

6. Client-side Hydration (now works as "normal SPA")

API

6. (optional) Request

7. (if 6.) JSON

Benefits

SEO boost

Faster Time to First Paint and Time to Content

Only one server call ("best of both worlds")

Easier Security (via CSP)

Disadvantages?

Small caveats

(like no `window` on server-side)

Prone to memory leaks

Needs a server running all time

Live DEMO + Core ConCEPTS

Installation

(requires Node.js >= 8 and NPM >= 5.2.0)

NPM

Yarn

npx create-nuxt-app MYPROJECT

yarn create nuxt-app MYPROJECT

CodeSandbox

FOLDEr structure

Configuration

Routing

  1. File-based (no more router files!)
  2. Supports dynamic and catch-all routes
  3. Error pages (i.e. 404) are supported
  4. Nested routes are also possible

Assets

Two ways to save assets:

  1. /assets
    • will be transformed by webpack
    • filename will be transformed (contenthash will be added)
    • usually for images, fonts, preprocessor files, ...
  2. /static
    • will be mapped to /
    • not touched by webpack (no name change, ...)
    • no automatic cache-busting
    • usually for robots.txt, sitemap, CNAME, ...

Nuxt PLUGINS

Nuxt Modules

VUEX

  1. Disabled by default (!)
  2. Create a index.js in your /store folder
  3. Two different modes for store creation
    • Classic
    • Modular (my preference)

Q&A TIme!

Final words and Links

Advent of Code - A nice coding challenge. One puzzle each December day

Nuxt.js Discord - If you have a question ;)

Nuxt Fundamentals - Free video course from VueSchool.io

blog.lichter.io - My own blog, most articles about Nuxt.js

Awesome Nuxt - List of awesome Nuxt.js modules, projects, open-source repos

Nuxt.js GitHub - There lies the core!

Nuxt.js Docs - Many questions answered

Made with Slides.com