Advanced Vue.js Web Development

Build Vue.js 3 single-page (SPA) and universal (SSR) applications using Composition API

This is the code repository for Advanced Vue.js Web Development, published in March 2022, authored by Lau Tiam Kok.

Course Overview

A practical hands-on guide for creating single-page applications (SPAs), server-side rendering (SSR) applications, and universal applications using Composition API from Vue.js 3. In this course, you will learn to create routes, pages, layouts, components, composables, middleware, plugins, utils, and Pinia stores in your Vue applications. You will also learn to integrate your Vue.js projects with UnoCCSS, Windi CSS, and Less CSS preprocessor; handle static and dynamic assets such as images and fonts; create a data-persistent shopping cart system using Pinia; validate forms and handle errors in your Vue.js applications. And lastly, you will learn to migrate to Nuxt.js 3 with Composition API from Vue.js 3, as well as using Vue.js 3 for WordPress and Vite SSR for creating Vue.js 3 SSR applications.

Takeaway Skills

• Create Vue.js SPAs and SSR applications using Vite

• Create routes, pages, and layouts with Vue Router

• Create dynamic layouts with Vue Router, middleware, and dynamic components

• Create a data-persistent (client-only) shopping cart system with Pinia

• Create a data-persistent (client-server) shopping cart system with Redis

• Lazy-load components and images

• Auto-generate application routes from the file system

• Auto-import components, composables, utils, and APIs on-demand

• Use UnoCSS, Windi CSS, and Less in Vue.js applications

• Handle static and dynamic assets with composables and plugins

• Create custom form inputs with v-model

• Validate forms with Vuelidate

• Create Vue.js applications for WordPress

• Create Vue.js SSR applications with Vite SSR

• Use WordPress as a headless CMS

• Integrate Vue.js SPA and MPA (Multi-Page App) with WordPress

• Integrate Vite SSR and Vue SSR with WordPress

• Manage document head tags for SEO and Open Graph

• Handle errors in Vue.js SPAs and Vue.js SSR applications

• Learn basic Nuxt.js 3 and handle errors in Nuxt.js applications

Chapters and Lessons

• Chapter 1. Introducing Advanced Vue

  • Knowing the Course
  • Knowing Vue and Composition APIs
  • Getting Started with Vite

• Chapter 2. Managing Assets and Adding UI Frameworks

  • Serving Assets
  • Adding UI Frameworks
  • Adding CSS Preprocessors
  • Serving Dynamic Assets

• Chapter 3. Fetching Data and Creating Pages, Layouts, and Components

  • Creating Pages
  • Fetching Data
  • Creating Layouts
  • Creating Components

• Chapter 4. Managing Stores

  • Understanding Pinia
  • Creating a Shopping Cart with Pinia
  • Persisting Data in Pinia Stores

• Chapter 5. Working with Forms

  • Creating Custom Form Inputs with v-model
  • Validating Form Inputs
  • Validating Forms with Vuelidate

• Chapter 6. Introducing Nuxt

  • Getting Started with Nuxt
  • Adding Pages, Layouts, Components, and Composables
  • Adding Fetching Data and Handling Errors
  • Serving Assets, Adding Windi CSS, and Adding Less

• Chapter 7. Integrating Vue with WordPress

  • Creating a Vue SPA for WordPress
  • Creating a Vite MPA for WordPress

• Chapter 8. Introducing Vite & Vue SSR

  • Getting Started with Vite SSR
  • Creating Advanced Vue SSR

• Chapter 9. Going Further From Here

  • Knowing Your Options
  • Testing Your Knowledge

If you are interested in this course, please check out this page for how to purchase the course guide. Otherwise, feel free to sponsor this repository to keep it going and maintained through the following channels:

• Open Collective
• Ko-fi