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 > The Delightful World of Vue Part 2

Buy Access to Course

44.

Losing Reactivity

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

12 Comments

Sort By

Login or Register to join the conversation

ThibautPalma 2 years ago edited

Thank you for these 2 great Vue tutorials. Are there still plans for the Vue 3 (composition) tutorial? If so, will it cover routing at some point?

|

Victor SFCASTS ThibautPalma 2 years ago edited

Hey @ThibautPalma ,

Thank you for your interest in SymfonyCasts tutorials! Yes, we do plan that one, and most probably we would cover routing as well there. Unfortunately, I have no idea when it may happen, this one is just in our backlog and has little priority. But your vote for this course is counted, just no any estimations yet.

Cheers!

1 |

Chris N. 4 years ago

I finished the tutorial but didn't get a certificate and it shows as 99% complete on my profile :(

|

Victor SFCASTS Chris N. 4 years ago

Hey Chris,

Look closer at the table of content on the course intro page: https://symfonycasts.com/sc... - every challenges should be green and you should see a little tick in front of each chapter. I bet there's a missing challenge or chapter there, you just need to complete the missing challenge or watch the chapter till the end.

If you still need help with this - write to us using contact form here: https://symfonycasts.com/co... from your account email and I'll take a look at it myself.

Cheers!

|

Chris N. Victor 4 years ago

Thanks Victor
You are right, one of the chapters did not have a tick. This reminds me of something I noticed during the course, it would replay chapters I had already watched and I would have to redo the challenge/s that followed. It would step back one or two chapters (I think back to the chapter that followed any previous challenge).
I use the Brave browser so I wondered if it was struggling to keep my state? I used the same computer each time.
Thanks again
Chris
(Ah, looks like Disqus has also forgotten me - the burden of just wanting to not be quite so tracked)

|

Victor SFCASTS Chris N. 4 years ago

Hey Chris,

Ah, if you have a tricky browser - it might be the reason why it missed the check. If somehow it was log you out globally on SymfonyCasts but the page still was loaded - you were able to watch the video I suppose, but the system didn't get a request about finishing it because you were not logged in :) Anyway, the fix should be pretty easy - just re-watch that chapter (or cheat a bit and just rewind it to the end :) )

Let me know if that didn't help ;)

Cheers!

|

escobarcampos 5 years ago

Great couple of tutorials. Good job fixing the vimeo streaming issue btw! The only thing stopping me from migrating my existing app to Vue is that I don't know how to integrate the symfony translation bundles. I am using lexik/translation-bundle. Should I just add it to the twig template as usual and then use it within js? Do you recommend using another bundle?

|

shadowc escobarcampos 5 years ago edited

Hey Manuel!

I don't have advise at this time as per a specific bundle to deal with i18n in Vue. When it comes to Vue and just Vue, there is a package called (<a href="https://www.npmjs.com/package/vue-i18n">Vue-i18n</a>) which can help but might not adapt to your current method of doing it.

If you are using a Symfony bundle to do translations (and it works for you) my advise would be... Don't throw it away! You can dump your translation strings all in the template inside a Javascript object. These will likely be cached by twig anyway and you can then use these strings inside your Vue App. For example:

<blockquote>`
window.myTranslations = {

trans_string_a: 'put twig escaped string for js here',
trans_string_b: 'put your other strings ...',

};
`</blockquote>

Then you can easily reference the global variable.

Hope this helps!

|

julien_bonnier 5 years ago

Great tutorial!

I would really like to see one with a Vue SPA.

|

shadowc julien_bonnier 5 years ago

Hey Julien!

Thanks for your feedback! While a Vue SPA tutorial (featuring Vue Router) is inot in our immediate plans, we are considering adding this to our JS Frameworks track at some point. Stay tuned!

|

Kirill 5 years ago

Thanks a lot for tutorials!
Really want to get know about how to combine Vue with Symfony Forms (maybe without API Platform, but with plain action with formView from controller) in proper way, and maybe how to compile Twig markup to Vue, so for example if i already have form-blocks in twig (form_widget, form_row, etc..) how it's possible to use them with Vue.

|

shadowc Kirill 5 years ago

Hi Kirill!

In my view, Symfony Forms and Vue go separate ways. When it comes to forms specifically, if you use one system, you won't be using the other as their purpose are the same!

|

This course is also built to work with Vue 3!

Vue 2

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
    }
}

Previous Chapter

Next Challenge