Nuxt.js for Microsites

Picnic Skill Sharing @ lab.SNG

Philo van Kemenade
April 2019

so you want to make a microsite...

(micro) app

generous interface

YouTube playlist aggregator

...

Why I picked Nuxt.js

Vue.js

enjoyable dev XP

modular
& reactive

😏 zero config, intelligent defaults

➰ live reload

🚛 loaders for most preprocessors

🍼 native support from Laravel 5.3

👑 modular is king
📦 PatternLib

Data 💒 DOM

(for microsites at SNG)

Vue.js

Progressive

Modular; single file components (HTML, CSS, JS)

Reactive Data & DOM Linking

Nuxt.js

Inspired by Next.js
Giant shoulders

3 Rendering Modes

File Structure

Component Architecture

Vue.js

Webpack

Babel

Nuxt.js

Rendering Modes

Server Side Rendered (Universal)

 

Statically Generated (Pre-Rendering)

 

Single Page Application (SPA)

 

👇View Structure

👈 Directory Structure

Getting started

npx create-nuxt-app <project-name>

a Nuxt page

a Nuxt component

Questions?