Getting started with Nuxt

What is Nuxt?

Universal Javascript Framework?

Isomorphic Javascript?

Universal Application?

The VueJS Framework?

.

.

.

tldr: framework that runs javascript on both client and serverside, good for SSR 😉

Build Target 🎯 

1. Single Page Application (SPA)

2. Server Side Render (SSR)

3. Static (JAM Stack)

3 options?

Build Target 🎯 === SPA

Single Page App

❓

• Typical SPA, content gets populated on client during run time
   
• HTML before JS kick in can be a single <div> tag
   
• Server is optional

Build Target 🎯 == SSR

Server Side Render

• similar to traditional MVC application, think ASP.NET MVC or express app with pug!
   
• Everytime a client arrive at the webpage, it would serve up an HTML content
   
• Server is required to be running!!!

Build Target 🎯 == Static

Static,  think JAM Stack 🤔

• On Build time, Every single rout-able page is generated
   
• Server is optional
   
• If you change underlying content, Static HTML won't be update until next Build

>Bash

❓

Convention over configuration 🧙‍♂️

1. Routing

2. Layouts

3. Vuex (optional)

4. Middleware (optional)

5. Plugins (optional)

6. Server (optional)

7. Test (optional??? 😅)

8. Modules (optional)

Routing

• Convention inspired by PHP
• Every .vue is a rout-able page!
• ex: login.vue would be equivalent to /login
• folder would create subdir
• You can supply query Param with _{paramName}
• ex: Create/ChapterList?Id=123
   
• this is the place we can use asyncData and fetch

 

asyncData + fetch is Fundamental for static and SSR

Part of NuxtJS life cycle hook that enables server side rendering!!!

vuejs render

• Called every time before loading the page:
  1. Server side rendering
  2. Client side navigation to page
   
• asyncData: a function that return the object and merge with componentData
• fetch: similar as asyncData, can be used to update vuex store

 

Layout

Resuable layout to be shared among multiple pages.

 

Error page is the template that get display when client side run into an unhanded exception.

Middleware

Resuable layout to be shared among multiple pages.

 

Error page is the template that get display when client side run into an unhanded exception.

Plugins 

Extend vue js

Example vue-rx 

Middleware

Middleware

Modules

Example: Auth Module

modules: [
  '@nuxtjs/auth'
],

nuxt.config.js

your vue page that needs to put behind auth

by putting auth middleware, the page will check if user is logged in first before rendering!

there are more modules!

https://github.com/topics/nuxt-module

Thank you 🙇‍♂️