BEST

Front-end

Learn Vue.js 3 with Projects

Name: Learn Vue.js 3 with Projects
Price: 33000 KRW
Rating: 4.9 (100 reviews)

We'll help you learn how to use Vue.js 3 and get familiar with it as you apply it to your projects.

(4.9) 100 reviews

958 learners

Level Basic

Course period Unlimited

kossiecoder

Vue.js

Vuex

Web Application

Vue.js

Vuex

Web Application

Reviews from Early Learners

4.9

5.0

황지환 Hwang

100% enrolled

The instructor explains it well step by step. It was a great help to me to start something with the latest version of Vue3. Thank you.

5.0

쿠쿠케케

100% enrolled

Like👍👍

5.0

Duru

100% enrolled

I really enjoyed learning the basic structure of Vue.js 3 and how to create components efficiently.

What you will gain after the course

Vue.js Composition API
Web App
How to create a project with Vue CLI
Vue 3 New Features
How to use Vue Router
How to use Vuex

Meet the latest Vue 3,
An easy and powerful introduction to front-end development!

Lecture Introduction

Popular front-end framework, Vue.js
Take a look at the latest version of Vue 3 ,
Try it out yourself and practice with your own hands!

This introductory course will help you get started with the popular front-end framework Vue.js. Using the new Composition API added to Vue.js 3, you'll learn the fundamental features needed to build a project, one by one, and immediately apply them to your own projects. Each video is short, with most videos lasting less than 10 minutes.

Expected Questions Q&A

Q. Can I take the course even if I don't know anything about Vue.js?
A. Yes! This is a Vue.js introductory course, so you can learn from the basics even if you don't know anything about it. By the end of this course, you'll have the basics to work on your own projects with Vue.js. However, I recommend that you already have a basic understanding of HTML, CSS, and Javascript (ES6+). There will also be explanations related to ES6+ throughout the course. 😊

Q. I watched the Vue.js 2 Basics tutorial on the Cozy Coder YouTube channel. Is it very different from this course?
A. The Vue.js 2 Basics course on YouTube only covers basic grammar, but its application to real-world projects is somewhat limited. This course covers Vue.js features and explains how to apply them to your projects. Specifically, this course uses the new Composition API in Vue.js 3. The explanations are much more detailed, helping you gain a comprehensive understanding of single-page applications. 😊

Q. What is the Composition API?
A. In Vue.js 2, we used the Options API for development, but it wasn't easy to reuse code when working on large-scale projects. So, in Vue.js 3, a new feature called the Composition API was added, facilitating logic reuse and code maintenance. 😊

Introduction to lecture materials

I've uploaded the source code at the end of each video as a branch on GitHub. If you get stuck with an error, you can compare the source code on GitHub. 😁 To make it easy to find, I've uploaded the video number as the branch name.

_{Cozy Coder GitHub (shortcut)}

Introduction of knowledge sharers

Cozy Coder

I work as a web developer in Australia and run the YouTube channel 'Cozy Coder'.
YouTube link: https://www.youtube.com/kossiecoder

Recommended for
these people

Who is this course right for?

For those who want to learn the basics of Vue.js 3
Anyone who wants to create a web app with Vue.js
Anyone who wants to develop using Composition Api
For those who are new to Vue.js

Need to know before starting?

HTML
CSS
Javascript

Hello
This is kossiecoder

1,307

Learners

136

Reviews

Answers

4.8

Rating

Courses

Curriculum

All

88 lectures ∙ (9hr 30min)

Section 1. Course Introduction and Development Environment Setup

3 lectures ∙ (17min)

1. 00 Course Introduction
05:55
2. 01 Installing a Vue Project
04:30
3. 02. Looking at the folder structure
06:35

Section 2. Create a To-Do Add Form

6 lectures ∙ (20min)

Section 3. Create a To-Do List

15 lectures ∙ (1hr 37min)

10. 08 Data Binding
08:44
11. 09 Two-way binding (v-model)
09:00
12. Add a new To-Do to the list 10
09:46
13. 11 Create To-Do Cards
04:17
14. 12 v-for
04:55
15. 13 v-show vs v-if
09:32
16. 14 Checkbox Binding
04:23
17. 15 class/style binding
06:03
18. 16 Deleting items from an array
05:57
19. 17 Creating Form Components
04:47
20. 18 emit
09:03
21. 19 props
07:17
22. Things to watch out for when using 20 props
06:59
23. 21 Delete To-Do
03:59
24. 22 emits
03:07

Section 4. To-Do Search Function

2 lectures ∙ (15min)

Section 5. Json-Server local development database

8 lectures ∙ (40min)

Section 6. Add Pagination

3 lectures ∙ (22min)

Section 7. Improved search function

5 lectures ∙ (40min)

Section 8. Getting Started with Vue Router

5 lectures ∙ (27min)

Section 9. Create a To-Do Edit Page

8 lectures ∙ (1hr 5min)

Section 10. Create a Toast Notification Component

4 lectures ∙ (38min)

Section 11. Create a To-Do creation page

4 lectures ∙ (24min)

Section 12. Scoped Style

1 lectures ∙ (4min)

Section 13. Toast animation applied and bugs fixed

2 lectures ∙ (8min)

Section 14. Create a modal window

4 lectures ∙ (30min)

Section 15. refactoring

8 lectures ∙ (47min)

Section 16. Using Vuex

7 lectures ∙ (57min)

Section 17. refactoring

2 lectures ∙ (12min)

Section 18. At the end of the course...

1 lectures ∙ (0min)

Published: 04/12/2021

Last updated: 07/29/2025

Reviews

All

100 reviews

4.9

100 reviews

durusk930845
Reviews 2
∙
Average Rating 5.0
04/03/2022
5
100% enrolled
I really enjoyed learning the basic structure of Vue.js 3 and how to create components efficiently.
zhwanhwang4538
Reviews 1
∙
Average Rating 5.0
05/02/2021
5
100% enrolled
The instructor explains it well step by step. It was a great help to me to start something with the latest version of Vue3. Thank you.
- kossiecoder
  Instructor
  05/02/2021
  Thank you, Mr. Hwang Ji-hwan, for your course review ^^
canon48597291
Reviews 1
∙
Average Rating 5.0
04/18/2022
5
100% enrolled
Like👍👍
kjlee03287439
Reviews 2
∙
Average Rating 5.0
04/21/2022
5
100% enrolled
great!
krrubric0041
Reviews 1
∙
Average Rating 5.0
02/19/2022
5
100% enrolled
This was a great lecture! Please make an intermediate version too~

kossiecoder's other courses

Check out other courses by the instructor!

Learn React.js with Projects

kossiecoder

$26.40

Basic / React, Redux, ES6

4.7

(36)

300+

You can learn React basics through blog projects.

Basic

React, Redux, ES6

Learn React.js with Projects

kossiecoder

$26.40

Basic / React, Redux, ES6

4.7

(36)

300+

Similar courses

Explore other courses in the same field!

Vue 3 Intermediate - Composition API

captain

$42.90

Intermediate / Vue 3, Vue.js

5.0

(63)

700+

The easiest and most accurate way to learn the Vue Composition API that can be used in both Vue 2 and the latest Vue 3!

Intermediate

Vue 3, Vue.js

Vue 3 Intermediate - Composition API

captain

$42.90

Intermediate / Vue 3, Vue.js

5.0

(63)

700+

Getting Started with Vue 3

captain

$34.10

Basic / Vue.js, Vue 3, JavaScript

4.9

(147)

1,400+

This is a course for those starting with Vue 3, the latest version of Vue.js. Learn the fundamentals of how Vue.js works and the basic concepts you need to know for practical development.

Basic

Vue.js, Vue 3, JavaScript

Getting Started with Vue 3

captain

$34.10

Basic / Vue.js, Vue 3, JavaScript

4.9

(147)

1,400+

Kakao, Google SNS login (springboot3, vue3)

bradkim

$42.90

Basic / OAuth, oauth2, JWT, Spring Boot, Vue.js

4.9

(33)

200+

Active Replies

Implementing Kakao and Google login using Spring Boot. JWT token-based login is implemented. A simple screen is configured through Vue3.

Basic

OAuth, oauth2, JWT

Kakao, Google SNS login (springboot3, vue3)

bradkim

$42.90

Basic / OAuth, oauth2, JWT, Spring Boot, Vue.js

4.9

(33)

200+

Active Replies

The Latest Vue 3 Complete Guide: Project Setup & Specifications

gymcoding

$17.60

Basic / Vue.js, Vue 3, TailwindCSS, ESLint

5.0

(34)

400+

Active Replies

This is a follow-up lecture to "Vue 3 Perfect Master", and it will teach you how to set up a project and learn the latest specifications of the latest Vue 3 version. This lecture is provided free of charge to those who have taken the Vue Basics or Practical Course.

Basic

Vue.js, Vue 3, TailwindCSS

The Latest Vue 3 Complete Guide: Project Setup & Specifications

gymcoding

$17.60

Basic / Vue.js, Vue 3, TailwindCSS, ESLint

5.0

(34)

400+

Active Replies

Learn Vue js and UI at once / Build a real-time weather app with Nuxt3 + OpenWeatherMap

gis

$22.00

Basic / Vue.js, PWA, Firebase, Nuxt.js, pinia

You can easily learn Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login~~

Basic

Vue.js, PWA, Firebase

Learn Vue js and UI at once / Build a real-time weather app with Nuxt3 + OpenWeatherMap

gis

$22.00

Basic / Vue.js, PWA, Firebase, Nuxt.js, pinia

Creating a job search site with Vue3 and Supabase

Michael Kwon

$38.50

Basic / Vue.js, PWA, supabase, Vue 3

5.0

(3)

From developing your own full-stack application to a Progressive Web App (PWA)!

Basic

Vue.js, PWA, supabase

Creating a job search site with Vue3 and Supabase

Michael Kwon

$38.50

Basic / Vue.js, PWA, supabase, Vue 3

5.0

(3)

Creating web and apps that anyone can easily follow (from basics to practical use)

jocoding

Free

Beginner / Web Application

4.9

(89)

3,600+

We will create easy coding that anyone can learn. Our goal is to understand what coding is and create serviceable web and apps by utilizing external resources such as libraries and APIs as much as possible.

Beginner

Web Application

Creating web and apps that anyone can easily follow (from basics to practical use)

jocoding

Free

Beginner / Web Application

4.9

(89)

3,600+

Creating a Map Service with Corona Map Developers 1

donghunee

$26.40

Basic / Node.js, Web Application, Express, VSCode

4.8

(91)

800+

This is a course on creating a map service taught by the developers of Corona Map.

Basic

Node.js, Web Application, Express

Creating a Map Service with Corona Map Developers 1

donghunee

$26.40

Basic / Node.js, Web Application, Express, VSCode

4.8

(91)

800+

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

John Ahn

$34.10

Basic / React, Firebase, Web Application

4.7

(43)

1,000+

In this course, you will learn how to create a chat application using React and Firebase.

Basic

React, Firebase, Web Application

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

John Ahn

$34.10

Basic / React, Firebase, Web Application

4.7

(43)

1,000+

A Guide to Elm, a Purely Functional Front-End Language

hatemogi

Free

Basic / elm, Functional Programming, SPA, Web Application

5.0

(5)

300+

Study the Elm programming language guide to building front-end web apps with pure functional programming in just 3 hours.

Basic

elm, Functional Programming, SPA

A Guide to Elm, a Purely Functional Front-End Language

hatemogi

Free

Basic / elm, Functional Programming, SPA, Web Application

5.0

(5)

300+

Learn Vue.js 3 with Projects

Reviews from Early Learners

4.9

What you will gain after the course

Lecture Introduction

Expected Questions Q&A

Introduction to lecture materials

Introduction of knowledge sharers

Recommended for these people

HelloThis is kossiecoder

Curriculum

Reviews

kossiecoder's other courses

Similar courses

Recommended for
these people

Hello
This is kossiecoder