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
