Web Development · WDC-67

Advanced Vue.js 3

Advanced Vue.js 3 is a course in building Vue 3.5 applications with TypeScript and Vite, designing composables, and using VueUse, Pinia 4, Vuetify 4 and PrimeVue, Firebase and Vitest. It suits front-end developers who already write Vue 3, and you leave with an app deployed to production.

Updated 9 Oct 2026

From 8,550 THB / person 9,500 −10% excl. VAT 7% · group rates available

Corporate training quote Join the waiting list

PDFDownload the course outline

Duration24 hours · 4 days
FormatOnsite / live online
Next roundOn request
CertificateIncluded

Course overview

Once you can write Vue 3, real work in organisations usually needs more than the basics: clearly typed code, logic split into reusable composables, well-organised state, UI libraries that build screens quickly, a backend connection, tests and a path to production. Teams that lay these foundations well can grow their apps without rewriting code.

This course builds on Basic Vue.js 3 with Vue 3.5 and script setup, together with TypeScript and Vite. It goes deep into the Composition API and composable design, uses VueUse, Pinia 4, Vuetify 4 and PrimeVue, styles components with CSS Modules and Tailwind CSS, connects to Firebase Firestore and Authentication, adds a rich text editor with CKEditor 5 and tests with Vitest, and finishes with a project deployed to Netlify, Vercel or Firebase Hosting. (4 days, 6 hours per day, 24 hours in total, Advanced level.)

What you’ll gain

Use TypeScript with Vue 3 across props, emits, models, slots, provide/inject and generic components
Configure Vite in depth and migrate existing projects from Vue CLI
Understand reactivity in depth and design reusable composables
Use VueUse to solve common tasks quickly
Manage large-scale state with Pinia 4, including plugins and testing
Build screens with Vuetify 4 and PrimeVue and style them with current techniques
Connect Firebase and CKEditor 5 to a Vue app
Test, tune performance and deploy an app to production

Who this course is for

Front-end developers who already write Vue 3 and want to work on larger applications
People who have completed Basic Vue.js 3 and want to go further
Teams maintaining existing Vue apps who want to move to TypeScript, Vite and Pinia
Lecturers, trainers and IT staff who want current Vue development practice

Prerequisites

Able to write HTML, CSS and modern JavaScript, such as modules, async/await and array methods
Able to write Vue 3 with script setup, or have completed Basic Vue.js 3
Basic use of Vue Router and REST APIs
Comfortable with the terminal, npm and Git

Curriculum

Course Details

This course is the 2026 edition of Advanced Vue.JS 3. It runs for 4 days, 6 hours per day (24 hours in total, 09:00-16:00), as lectures with labs. Advanced level. It keeps the original core of Vue 3 with TypeScript, advanced Vite, the advanced Composition API, VueUse, Pinia, Vuetify, Firebase, styling, CKEditor 5 and deployment, updated to Vue 3.5 with script setup, Pinia 4,

Vuetify 4, the modular Firebase SDK and the current CKEditor 5. It replaces Ant Design Vue with PrimeVue and Styled Components with CSS Modules and Tailwind CSS, and adds testing with Vitest and performance work. The course builds on Basic Vue.js 3 and focuses on client-side Vue, unlike Nuxt Advanced, which focuses on SSR. Learners take home a lab guide and a Vue and TypeScript project template.

Day 1 Vue 3 with TypeScript and Vite

Section 1: Lab: Setting Up a Vue Project with TypeScript

Create a project with npm create vue@latest, including TypeScript, Router, Pinia and Vitest
Set up VS Code and the Vue (Official) extension, and type-check with vue-tsc
ESLint and Prettier for team code standards
Lab: the project skeleton used throughout the course

Section 2: Lab: TypeScript in Components

Type defineProps with defaults and reactive props destructure
Typed defineEmits and defineModel for v-model
defineSlots for typed slots
Lab: a fully typed data table component

Section 3: Advanced TypeScript with Vue

Types for ref, reactive, computed and event handlers
Template refs with useTemplateRef, and provide/inject with InjectionKey
Generic components with generic="T"
Extend global properties and refactor existing code with TypeScript

Section 4: Lab: Advanced Vite

Project structure and the vite.config.ts file
Environment variables with import.meta.env, and path aliases
Set up a dev server proxy to call APIs without CORS issues
Production builds, code splitting and bundle size analysis

Section 5: Lab: Migrating an Existing Project to Vite

Move settings from a Vue CLI vue.config.js
Convert the Options API to script setup step by step
An overview of Vue 3.6 and the upcoming Vapor Mode
Lab: migrate a sample app from Vue CLI to Vite with TypeScript

Day 2 The Composition API in Depth and VueUse

Section 6: Reactivity in Depth

How ref and reactive differ, and shallowRef for large data
toRef, toRefs, toValue and readonly
watch with once and depth levels, watchEffect and onWatcherCleanup
Lifecycle hooks and effectScope

Section 7: Lab: Designing Reusable Composables

Accept MaybeRefOrGetter inputs and read them with toValue
Handle loading, errors and request cancellation
Clean up events and timers when a component is destroyed
Lab: a usePosts composable with fetching, paging and search

Section 8: Lab: VueUse for the Browser and Sensors

useTitle, useClipboard, and themes with useDark and useColorMode
Keyboard, mouse and touch with useMagicKeys and usePointer
useScroll, useElementVisibility and useMediaQuery
Lab: a toolbar with keyboard shortcuts and dark mode

Section 9: Lab: VueUse for Animation, State and Utilities

useIntervalFn, useRafFn and useTransition
useRefHistory for undo and useStorage for persistent data
useFetch, computedAsync and refAutoReset
Lab: an edit form with undo and automatic draft saving

Section 10: Lab: Advanced Components

Renderless components and scoped slots
Custom directives for reusable behaviour
Teleport, KeepAlive and async components
Lab: a data list component with switchable display styles

Day 3 State, UI Libraries and Styling

Section 11: Advanced Pinia 4

Setup stores versus option stores, and storeToRefs
Stores that use other stores, and resetting state
Track changes with $subscribe and $onAction
Pinia plugins, HMR and the Vue DevTools timeline

Section 12: Lab: A Shopping Cart with Pinia

Product and cart stores with async actions
Getters and getters that take parameters
Keep the cart in local storage with a plugin
Lab: a cart that works with both script setup and the Options API

Section 13: Lab: Building Screens with Vuetify 4

Install Vuetify 4 in a Vite project
Layouts, the grid system and common components
Forms with validation, and data tables
Lab: an admin page for managing products

Section 14: Lab: PrimeVue and Choosing a UI Library

Install PrimeVue and choose a theme
Form, table, dialog and toast components
How to choose a UI library: maintenance, accessibility and size
Lab: a product search and filter page with PrimeVue

Section 15: Lab: Modern Styling in Vue

Scoped CSS, CSS Modules and :deep()
State-driven styles with v-bind() in CSS
Tailwind CSS with Vite and Vue components
Lab: buttons and cards that change colour through props

Day 4 Backend, Testing and Production

Section 16: Lab: Vue with Firebase

Create a Firebase project and install the modular Firebase SDK
Read, write and listen to real-time data in Firestore
Firebase Authentication and an auth store in Pinia
Security rules to protect data

Section 17: Lab: A Rich Text Editor with CKEditor 5

Install @ckeditor/ckeditor5-vue and the ckeditor5 package
Configure the licence key, plugins and toolbar
Use v-model, events and a Thai editor interface
Lab: an article editor that saves to Firestore

Section 18: Lab: Testing with Vitest

Test components with Vitest and Vue Test Utils
Test composables and stores with createTestingPinia
Mock APIs, and an overview of end-to-end testing
Lab: a test suite for the shopping cart

Section 19: Performance and Production Builds

Lazy loading of routes and components
Large lists with shallowRef and v-memo
Check with Vue DevTools, the Performance panel and Lighthouse
Production environment settings

Section 20: Workshop: Final Project and Deployment

Combine TypeScript, Pinia, a UI library and Firebase in one app
Deploy to Netlify, Vercel or Firebase Hosting
Run linting and automated tests with GitHub Actions
Workshop: present your work and next steps

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

Join the waiting list Ask about rounds

For organisations — in-house / private

Tailor the content to your team’s tools and projects
Your dates, at your office or live online
Quotation with tax ID for procurement

Corporate training quote

Instructors

Samit KoyomFounder & CEO, IT Genius Engineering

Frequently asked questions

How do ref and reactive differ in Vue 3, and when should you use each?

ref works with any value, is read and changed through .value in scripts, and can be passed around or destructured without losing reactivity. reactive works only with objects, arrays, Maps and Sets and gives direct property access, but loses reactivity if you destructure it or replace the whole object. The Vue team recommends ref as the main choice, with shallowRef for large data that you replace as a whole.

What is a composable in Vue 3, and how do you build one?

A composable is a function that uses the Composition API to package stateful logic for reuse across components. It is named with a use prefix, such as useCart or usePosts, declares refs, computed values and watchers inside, and returns them. It should accept MaybeRefOrGetter inputs and read them with toValue, so it works with plain values, refs and getters, and clean up events or timers when a component is destroyed. VueUse is a ready-made collection of composables.

How do you type props and events with TypeScript in Vue 3?

In script setup with lang="ts", pass a type straight to defineProps and set defaults with reactive props destructure. For events, use defineEmits with event names and payload types. For v-model on a component, use a typed defineModel, and use defineSlots and generic components when a component must handle several data types. Then type-check the whole project with vue-tsc.

Who is the Advanced Vue.js 3 course for, and what should I know beforehand?

It suits front-end developers who already write Vue 3, teams maintaining Vue apps who want to move to TypeScript, Vite and Pinia, and lecturers and IT staff who want current development practice. You should know modern JavaScript and Vue 3 with script setup, and have basic experience with Vue Router and APIs. If you are new to Vue, start with Basic Vue.js 3.

What can I do after completing Advanced Vue.js 3?

You can set up Vue projects with TypeScript and Vite for your team, write reusable composables, manage state with Pinia 4, build screens with Vuetify 4 or PrimeVue, connect Firebase and CKEditor 5, write tests with Vitest, tune performance and deploy apps to Netlify, Vercel or Firebase Hosting. Participants who complete the training receive a Certificate of Completion.

Can the Advanced Vue.js 3 course be run in-house for our team?

Yes. It can be run in-house for your team, with examples adapted to your own work, such as moving your organisation's existing Vue app to TypeScript and Pinia. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.