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
...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
- File-based (no more router files!)
- Supports dynamic and catch-all routes
- Error pages (i.e. 404) are supported
- Nested routes are also possible
Assets
Two ways to save assets:
- /assets
- will be transformed by webpack
- filename will be transformed (contenthash will be added)
- usually for images, fonts, preprocessor files, ...
- /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
- Disabled by default (!)
- Create a index.js in your /store folder
-
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