Complete Nuxt.js Course (EXTRA React 18)

Course Curriculum

Chapter 1: Complimentary Section: Free React 18.3 Course

Lecture 1: React Introduction

Lecture 2: First Component

Lecture 3: Event Handler and State Setter

Lecture 4: JSX

Lecture 5: JSX Challenge: Creating a List from an Array or an Object

Lecture 6: Application: Creating a Clock

Lecture 7: Application: Clock Challenge

Lecture 8: Application: Creating a Stopwatch

Lecture 9: Application: Stopwatch Challenge

Lecture 10: Application: Countdown

Chapter 2: Create a Vue App using Vue-CLI 3

Lecture 1: Set up a Vue app using Vue-CLI 3

Lecture 2: Project root directory analysis

Lecture 3: App design

Lecture 4: Create the App Part 1

Lecture 5: Create the App Part 2

Lecture 6: Project wrap-up

Lecture 7: Get source code

Chapter 3: Nuxt fundamentals

Lecture 1: Set up Nuxt

Lecture 2: Project file structure analysis

Lecture 3: Layout

Lecture 4: Custom error page

Lecture 5: Mini practice: custom page layout

Chapter 4: Nuxt fundamentals: review and practice

Lecture 1: Reivew

Lecture 2: Create the header, main and footer

Lecture 3: Create the navi bar

Lecture 4: Create pages

Lecture 5: The error page and challenge

Chapter 5: Nuxt plugins

Lecture 1: Universal CSS and CDN

Lecture 2: Assets VS. static

Lecture 3: UI Module: bootstrap-vue

Lecture 4: Vue Meta in Nuxt

Lecture 5: VueX in Nuxt Part 1

Lecture 6: VueX in Nuxt Part 2

Chapter 6: Nuxt plugins: review and practice

Lecture 1: Review

Lecture 2: CDN, plugin and Nuxt module

Lecture 3: Custom head information

Lecture 4: Universal CSS and linkExactActiveClass

Lecture 5: VueX

Chapter 7: Nuxt routing system

Lecture 1: Nuxt Router Introduction

Lecture 2: Nested route

Lecture 3: nuxt-link

Lecture 4: active-link

Lecture 5: Create transition effects and animate.css

Lecture 6: Dynamic route Part 1

Lecture 7: Dynamic route Part 2

Lecture 8: Dynamic nested route

Lecture 9: Validate

Chapter 8: Nuxt routing system: review and practice

Lecture 1: Review

Lecture 2: Highlight the active button and unexpected problems

Lecture 3: Nested route

Lecture 4: Dynamic nested route

Lecture 5: The home page and the validate method

Chapter 9: Context and middleware

Lecture 1: Introduction to Context

Lecture 2: How to create and register middlewares

Lecture 3: Middleware and Nuxt router

Lecture 4: Middleware and VueX

Chapter 10: The four Nuxt context methods: review and practice

Lecture 1: Review

Lecture 2: The Express program we use

Lecture 3: Operating Cookie using Middleware

Lecture 4: Cookie-universal-nuxt

Lecture 5: Lock out unregistered users

Chapter 11: Retrieve data from the backend program

Lecture 1: Introduction to asyncData

Lecture 2: Return promise

Lecture 3: async await

Lecture 4: axios module

Lecture 5: The fetch method

Lecture 6: The nuxtServerInit Action Method

Lecture 7: Get Source Code

Chapter 12: Retrieve data from the backend program: review and practice

Lecture 1: Review

Lecture 2: Retrieve data for the homepage using nuxtServerInit

Lecture 3: Retrieve data for the gallery comp. using fetch

Lecture 4: Retrieve data for the introduction page using asyncData

Lecture 5: Final app source code