Tel. 02-570-8449 Mobile 088-807-9770 Payment
Mon–Fri 9:00–17:00 @itgenius
IT Genius Institute
IT Genius Institute
CoursesWorkshopSchedule
For business
In-house trainingAI Transformation (TH)Government training (TH)Development servicesTraining room rental
Articles
About us
About IT GeniusInstructorsPortfolioOur clientsPayment methods
Contact usOnline
Theme
Language
THENLA
Ask about a coursePick whichever channel suits you
LINE @itgeniusFastest reply · Mon–Fri 9:00–17:00
Call us
02-570-8449Office088-807-9770Mobile
Email & social
contact@itgenius.co.thFor quotations and documentsFacebookitgeniusonlineYouTubeitgeniusengPlan training for your team
Home / Courses / Web Development / Detail
Web Development · WDC-41

Basic Vue.js 3

Basic Vue.js 3 is a foundation course in building single-page applications with Vue 3, from creating a project with Vite, reactivity, forms and components to routing with Vue Router, calling REST APIs and managing state with Pinia. It suits students, teachers and IT staff with some HTML, CSS and JavaScript, and you leave able to build and deploy your own web app.

Updated
Basic Vue.js 3
From 5,400 THB / person 6,000 −10% excl. VAT 7% · group rates available
Corporate training quote Join the waiting list
PDFDownload the course outline
  • Duration18 hours · 3 days
  • FormatOnsite / live online
  • Next roundOn request
  • CertificateIncluded

Course overview

Most modern web apps run as single-page applications (SPAs) that respond instantly without reloading the page. Vue.js is a popular JavaScript framework because it is easy to start with, quick to read and scales from a small screen to a large system. Yet many examples and articles online still use Vue 2 or older tooling, so beginners are often unsure which style matches current practice.

This course lays the Vue 3 foundations the way the Vue team recommends today. Learners create a project with create-vue on Vite, write components with script setup and the Composition API, understand reactivity through ref, reactive, computed and watch, and use directives, events and forms. They then split screens into components that communicate through props, emits and defineModel, extract reusable logic into composables, build an SPA with Vue Router, call REST APIs and manage state with Pinia. The course closes with testing, building and deploying their own web app online. (3 days, 6 hours per day, 18 hours in total, Beginner level.)

What you’ll gain

  • Create and structure a Vue 3 project with create-vue and Vite
  • Understand reactivity and use ref, reactive, computed and watch in the right places
  • Use directives, event handling, and class and style binding fluently
  • Build forms with v-model and validate input before submitting
  • Design components that communicate through props, emits, defineModel and slots
  • Extract reusable logic into composables
  • Build a single-page application with Vue Router and route guards
  • Call REST APIs and manage shared state with Pinia

Who this course is for

  • Students and beginners who want to build modern web apps with Vue.js
  • Teachers, lecturers and trainers who want to bring their front-end knowledge up to date
  • IT staff and system administrators who build internal screens or dashboards
  • Developers coming from Vue 2 or jQuery who want to move to Vue 3
  • Anyone with basic HTML, CSS and JavaScript

Prerequisites

  • Basic HTML and CSS
  • Basic JavaScript such as variables, functions, arrays and objects; knowing ES modules and async/await is a plus
  • Comfortable using Windows or macOS and a basic command line
  • A laptop that can run Node.js and VS Code, with permission to install software

Curriculum

Course Details

This course is the 2026 edition, rewritten from scratch from the earlier Vue.js course and updated for Vue 3.5 and current tooling. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures with labs that build one online store project throughout. Beginner level. It uses script setup and the Composition API throughout, creates projects with create-vue on Vite 8, and uses Vue Router 5 and Pinia 4 in place of the older Vue CLI, Vuex, mixins and event bus. Every lab runs on the learner's own machine with free, open source tools. Learners take home a lab guide and sample code for every lab.

Day 1 Vue 3 Basics and Reactivity

Section 1: Lab: Getting Started with Vue 3 and Vite

  • What Vue.js is, the progressive framework idea and single-page applications
  • Install Node.js and create a project with npm create vue@latest
  • The Vite project structure, single-file components and script setup
  • Use Vue DevTools and the Vue (Official) extension for VS Code
  • Lab: Hello Vue, then build the production files

Section 2: Template Syntax and Reactivity

  • Text interpolation, v-bind and binding shorthands
  • Declare state with ref() and reactive(), and how proxies make it work
  • computed() for values derived from state, and watch() with watchEffect()
  • The Options API compared with the Composition API, and why the course uses script setup
  • Lab: a counter and a simple shopping cart

Section 3: Lab: Directives and Events

  • Conditional rendering with v-if, v-else and v-show
  • Looping with v-for and key over arrays, objects and number ranges
  • Handle events with v-on, event modifiers and key modifiers
  • Class and style binding with objects and arrays
  • Lab: a todo list app that adds, removes and filters items

Section 4: Lab: Forms and v-model

  • v-model with text inputs, textareas, checkboxes, radio buttons and selects
  • The .trim, .number and .lazy modifiers
  • Validate form input with computed values and show warning messages
  • Submit a form, prevent double submits and reset the fields
  • Lab: a registration form that validates input before sending

Section 5: Lifecycle, Template Refs and a First Look at TypeScript

  • Lifecycle hooks: onMounted, onUpdated and onUnmounted
  • Access the DOM with useTemplateRef() and use nextTick()
  • Start using TypeScript with script setup lang="ts"
  • Read error messages and debug with Vue DevTools
  • Lab: a search box that focuses itself and clears when you leave the page
Day 2 Components and Reusable Logic

Section 6: Components and Props

  • Split screens into components, naming rules and folder layout
  • Pass data with defineProps, including types and default values
  • Reactive props destructure in Vue 3.5 and one-way data flow
  • Scoped styles, CSS modules and global styles
  • Lab: a reusable product card for the product list

Section 7: Lab: Emits, defineModel and provide/inject

  • Emit events from child components with defineEmits
  • Add v-model support to your own components with defineModel()
  • Pass data through many levels with provide and inject instead of an event bus
  • Lab: a quantity input bound two ways to the shopping cart

Section 8: Slots, Dynamic Components and Teleport

  • Default, named and scoped slots
  • Dynamic components with component :is, keeping state with KeepAlive
  • Teleport for modals and notifications
  • Async components with defineAsyncComponent
  • Lab: reusable modal and tab components

Section 9: Lab: Composables

  • The composable idea and why it replaces mixins in Vue 3
  • Write composables that take inputs and return reactive values
  • A data-fetching composable with loading and error states
  • Use VueUse for common tasks such as local storage and screen size
  • Lab: useCart and useFetch shared across several components

Section 10: Transitions and Animation

  • Single-element transitions and the CSS classes for each stage
  • Transition modes and transitions between components
  • TransitionGroup for lists that add, remove and reorder items
  • JavaScript hooks and custom CSS animations
  • Lab: animate the product list and the modal
Day 3 SPA, APIs, State and Deployment

Section 11: Lab: Routing with Vue Router 5

  • Install and configure createRouter with createWebHistory
  • Dynamic routes, route props and reading values with useRoute()
  • Nested routes, named routes and a catch-all 404 page
  • Navigate with RouterLink and useRouter(), and lazy load pages
  • An overview of the file-based routing now built into Vue Router 5

Section 12: Route Guards and Meta Fields

  • Global guards with beforeEach and route meta fields
  • Per-route and in-component guards
  • Redirects, query parameters and scroll behaviour
  • Lab: an admin page that requires login first

Section 13: Lab: Connecting to a REST API

  • Call APIs with fetch and async/await, with loading and error states
  • Configure an Axios instance with baseURL, headers and interceptors
  • GET, POST, PUT and DELETE for CRUD work
  • Move API code into a service or a composable
  • Lab: a product admin page that creates, edits and deletes through the API

Section 14: Lab: State Management with Pinia

  • Why shared state is needed, and installing Pinia in the project
  • Create setup stores and option stores with defineStore
  • State, getters and actions, including actions that call an API
  • Read store values with storeToRefs and inspect them in Vue DevTools
  • Lab: stores for the shopping cart and the logged-in user

Section 15: Workshop: Test, Build and Deploy

  • Basic component tests with Vitest and Vue Test Utils
  • Use an AI assistant to write and explain code, and check the result before using it
  • Build for production and set environment variables
  • Deploy to free static hosting such as Netlify or Cloudflare Pages
  • Workshop: a small online store SPA, from scratch to live

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

Frequently asked questions

How does the Composition API in Vue 3 differ from the Options API?

The Options API organises a component's code by type, into data, methods, computed and watch. The Composition API is written in a script setup block, so code can be grouped by feature. State is declared with ref() and reactive(), and reusable logic can be extracted into composables, which suits larger components and works well with TypeScript. Both styles still work in Vue 3, but this course uses script setup throughout, in line with current practice.

What is the difference between ref and reactive in Vue 3?

ref() works with any value, including numbers and strings, and you read and write it through .value in JavaScript, although templates use the name directly. reactive() works with objects and arrays and lets you access properties directly, but replacing the whole object or destructuring it loses reactivity. Both rely on JavaScript proxies, and many teams default to ref for consistency.

What are the steps to start a Vue 3 project with Vite?

Install an LTS version of Node.js, then run npm create vue@latest, which uses create-vue to ask whether to add TypeScript, Vue Router, Pinia or Vitest. Move into the project folder, run npm install and then npm run dev to start the Vite development server, which updates the page as soon as you edit code. When you are ready to ship, run npm run build to produce the production files.

Should I use Pinia or Vuex for state management in Vue 3?

New projects should use Pinia, the state management library officially recommended by the Vue team. Pinia is more concise, has no mutations, works well with TypeScript and lets you inspect state in Vue DevTools, while Vuex is in maintenance mode only. This course teaches how to create stores with defineStore, in both the setup store and option store styles.

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

It suits students, teachers, IT staff and system administrators, developers coming from Vue 2, and anyone who wants to build single-page applications with Vue 3. You should have some HTML, CSS and JavaScript, be comfortable with a basic command line and bring a laptop that can run Node.js and VS Code. No previous front-end framework experience is needed.

Can the Basic 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 building screens that call the APIs of the systems your team already uses. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.