Advanced Vue.js Web Development

A practical hands-on guide for creating single-page applications (SPAs) and server-side rendering (SSR) applications using Composition API from Vue.js 3. The code repository of this course can be downloaded from github.com/lautiamkok/Advanced-Vue.js-Web-Development. If you are interested in this course, please contact me for the course guide, which is written in Markdown documents (PDFs are also provided). The course guide is £15 GBP/ $20 USD/ €18 EUR. You also can purchase this course guide through Payhip (note that the cost is slightly higher on Payhip).

Course Overview

In this course, you will learn to create routes, pages, layouts, components, composables, middleware, and Vuex stores in your Vue applications. You will also learn to mock data using Markdown documents and a REST API for your Vue.js applications; integrate your Vue.js projects with Windi CSS and Less CSS preprocessor; handle static and dynamic assets such as images and fonts; create a shopping cart system using Vuex; handle and validate forms. And lastly, you will learn to migrate to Nuxt 3 with Composition API from Vue.js 3, as well as using Vue.js 3 for WordPress and Vite for creating Vue.js 3 SSR and universal applications.

Takeaway Skills

• Create Vue.js applications using Vue CLI and Vite

• Create routes, pages, and layouts with Vue Router

• Create dynamic layouts with Vue Router, Mitt, and Vuex

• Create a shopping cart system with Vuex

• Lazy-load components and images

• Auto-generate application routes from the file system

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

• Mock data and a REST API with Markdown documents

• Use Windi CSS and Less in Vue.js applications

• Handle static and dynamic assets

• Create Vue.js applications for WordPress

• Create Vue.js SSR applications with Vite SSR

• Use WordPress as a headless CMS

• Integrate Vite SSR with WordPress

• Manage document head tags for SEO and Open Graph

• Handle errors in Vue.js SPA and Vue.js SSR

• 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
  • Getting Started with Vue CLI
  • 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 States

  • Understanding Vuex
  • Creating a Shopping Cart with Vuex
  • Persisting and Modularizing Vuex Stores
  • Leveraging Vuex Helpers and Vue Slots

• 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, Fetching Data, and Handling Errors
  • Adding Layouts, Components, and Composables
  • 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
  • Using vite-ssr Plugin

• Chapter 9. Going Further From Here

  • Knowing Your Options
  • Testing Your Knowledge