Chapters

44 Chapters | 4:19:56 |

01

Project Setup

4:22
02

Page 2: Product Show Page

6:59
03

Current Product Id

4:56
04

The Dynamic Component

7:24
05

AJAX & Delayed Rendering

7:18
06

Making the Title Component Less Smart

3:59
07

Product Template & Color Selector

5:06
08

Cart API & Data

5:58
09

Add To Cart

4:28
10

Loading Animations & Quantity Input

5:01
11

External DOM Updates

6:35
12

New Page, New Webpack Entry

6:51
13

Sharing Vue-ish Logic: Mixin Basics

5:56
14

More Mixin Magic

8:11
15

The Cart Page

5:02
16

Loading the "Complete" Cart

6:35
17

No Data Duplication! Fancy Computed Prop

5:12
18

Parallel AJAX with Promises

7:29
19

Cart Structure

5:24
20

Inventing a Proper v-for :key

5:56
21

Accidentally Modifying Prop Objects

8:18
22

Emitting up the Component Tree

5:13
23

Quantity: Updating Data & Saving to the Server

4:35
24

More Mixin Logic: Updating Quantity in Header

5:02
25

Remove From Cart

4:08
26

"Add to Cart Controls" Component

8:09
27

Finishing the Cart Controls Component

5:39
28

Featured Sidebar

5:05
29

Add to Cart Controls on the Sidebar

7:08
30

Deep and Smart Watchers

8:15
31

Advancing Between Cart & Checkout

7:03
32

Intro to CSS Transitions

3:36
33

Vue Transitions

8:51
34

Transition Name & Mode

6:16
35

Transitioning a Prop Change

3:24
36

Checkout Form

5:52
37

Reusable "Form Input" Component

5:52
38

v-model on a Custom Component

4:10
39

v-bind Many Props

6:10
40

Checkout Submit

7:26
41

Unexpected Server Errors

3:38
42

Form Validation

4:28
43

Client-Side Validation

5:29
44

Losing Reactivity

7:27

> JavaScript Frameworks & Tools >

Course Overview

The Delightful World of Vue Part 2

Welcome back to part 2 of our Vue tutorial! Dive into more complex features like client-side validations and Vuex transitions.

Buy Access

943 students
EN Captions
EN Script
Certificate of Completion

Your Guides

Matias

Ryan Weaver

About this course

This course is also built to work with Vue 3!

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.1", // 5.15.1
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.3
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.2.0
        "eslint-plugin-import": "^2.19.1", // 2.22.1
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.12
        "vue-loader": "^15.9.1", // 15.9.4
        "vue-template-compiler": "^2.6.11", // 2.6.12
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

Back for more after the Vue Part 1 Tutorial? You're in luck!

In this tutorial, we're going to dive deeper into Vue by adding increasingly complex - and real-world! - features to our store, including a cart and (simplified) checkout process! We'll learn about:

Generic components with dynamic v-bind
Updating the DOM outside of your Vue component
Multiple Webpack entries for different Vue apps
Mixins! (The Vue 2 version of Vue 3 composition)
Complex data loading: when you need multiple AJAX calls to get everything you need
"Deep" watch and watching the length of an array
Vue transitions
Forms! Including a custom Input component
Client-side and server-side validation
Edge-cases in reactivity: avoiding adding/removing object keys

Let's go!

Next courses in the JavaScript Frameworks & Tools: Vue section of the JavaScript Frameworks & Tools Track!

The Delightful World of Vue

48 Videos | 5:05:52 | 0%

9 Comments

Sort By

dannyvdknaap 2 months ago edited

@weaverryan somehow i can't complete this course. it hangs at Challenge #2 of 2. i have already done the rest of the course but this issue is still not fixed after years unfortunately. could you please fix this ?

| Reply |

Victor SFCASTS dannyvdknaap 2 months ago edited

Hey @dannyvdknaap ,

What issue exactly are you talking about? I see you haven't finished any challenges and haven't watched any chapters after the Chapter 17: https://symfonycasts.com/screencast/vue2/cart-computed-prop - as soon as you finish those challenges and watch the remaining chapters being logged in into your account - you will get the certificate for this course. If you think you finished the course till the end, i.e. watched all the chapters and completeled all the challenges in this course - I may help you to get the certificate immediately, just let me know. Probably there was some kind of unsynchronization of your progress and your session, but it works good right now - I even double-checked and the challenge I completed from your account and the chapter I watched works.

So, once again, the progress should work well, but if you think you finished the whole course but it didn't count the full progress - let me know and I will give you the cert for this course.

Cheers!

1 | Reply |

dannyvdknaap Victor 2 months ago

indeed part 2 was not done. the issue is with part 1.

it's at 99% when i click the course it goes to https://symfonycasts.com/screencast/vue/add-watcher/activity/393

when i fill in this question it forward me to part 2 and i can view my certificate but part 1 still says at 99% and i can't complete it somehow

| Reply |

Victor SFCASTS dannyvdknaap 2 months ago edited

Hey @dannyvdknaap ,

I see now :) OK, if you will take a look at the chapters list on the course intro page: https://symfonycasts.com/screencast/vue - you will see that the 1st challenge for Chapter 19 "v-if, v-show and Conditional Classes" is not resolved yet. I answered it incorrectly and now it highlights with red color for you :) I bet as soon as you resolve that challenge - you will get 100% completed the course. Let me know if you still have 99% after it ;)

Cheers!

1 | Reply |

dannyvdknaap Victor 2 months ago

Ok, that worked somehow it send me to the activity/393 when i wanted to resume and didn't saved this question as solved correctly.
On the left side it also didn't the checkmarks in the chapters maybe because i started the quest a while ago, back then there was a different layout but it's fixed now. i got the certificate. Thanks for you support!