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

11.

External DOM Updates

|

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 Challenge

Next Chapter

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

3 Comments

Sort By

Login or Register to join the conversation

Phil 2 years ago

Hello @weaverryan,

I have a unique use case. We have huge project that started with symfony 2, bootstrap 3 and a whole lot of jquery to manipulate the dom. We upgraded the symfony version successfully and now we want to upgrade the front-end libraries to bootsrap 5 and latest jquery and basically latest versions of other JS packages. Two of those packages are datetimepicker and chosen (select on steroids) which are now deprecated. For the datetimepicker, we could not find a solution that works with latest technologies and also has a timezone option out of the box which is critical to the project. There are some datetimepickers that do that but they are either vue libraries or react libraries, that is where we started looking at symfony-ux-vue. Sorry for the long background tale but I needed to explain that to get to my questions:

We cannot get rid of jquery at the moment so we would essentially just use vue to display the datetimepicker and then send the value back to twig which would then send it to jquery for manipulation, how can we do that?
Is it worth it? I read an article that says it gets more complex when using vue and twig and needs a lot of patches and roundabouts and in the case of our project it might even be more complicated with the jquery as well.

Hopefully I made sense and looking forward to getting a response from you or anyone in the community.

Kind Regards.

|

weaverryan SFCASTS Phil 2 years ago

Hi there @Phil!

Wow, that's an annoying situation! So first, yes, while it seems like overkill, what you're saying is totally possible. And if you loaded the vue controller stuff lazily, users wouldn't even need to download the Vue JavaScript until they're on a page that renders a Vue component. Now, to your questions!

We cannot get rid of jquery at the moment so we would essentially just use vue to display the datetimepicker and then send the value back to twig which would then send it to jquery for manipulation, how can we do that?

Exactly how you'd render it depends on how that date picker works. But I'd probably render the Vue component where it needs to live but possibly hidden by default. Then create a Stimulus controller, attach it to the "date input" and, on click, unhide the Vue component (you could even hide the wrapper around the Vue component, then unhide that wrapper). Or perhaps the Datepicker library is a bit more hands on, and handles opening itself. I'm doing some guessing there :).

Either way, there will be some way with the Datepicker component to know when a date is selected. From somewhere inside of Vue, I would probably dispatch a native browser event - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent - on the input element (or the root date picker element - it doesn't matter much - but make sure the event bubbles up). In a Stimulus controller that is attached to the element (or an ancestor) the event is dispatched on, listen to that event. Then, grab the value and do whatever you need to with jQuery.

Is it worth it? I read an article that says it gets more complex when using vue and twig and needs a lot of patches and roundabouts and in the case of our project it might even be more complicated with the jquery as well.

It's a pretty big thing to bring in JUST for a date picker :/, though I'm not too aware of patches and other problems. I'm sure you're already bummed out that you can't find a decent dater picker. So, yes, I would LOVE to AVOID this situation, but what's the alternative? If you CAN get the old datetimepicker to work... I would definitely try. But if not, yea, you don't want to create one of these things by hand... that'd be even more annoying.

Let me know if any of these ramblings help - I'd love to know what you end up doing.

Cheers!

|

Phil weaverryan 2 years ago

Thank you @weaverryan, it definitely helps. The old datepicker used bootstrap 3 and is incompatible with bootstrap 5 so that is unfortunately not an option. The vue route seems like the only work-around but it feels patchy and over the top. But we might not have another option at the moment. I will keep you updated on what the final solution will be.

Cheers, Phil!

|

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 Challenge

Next Chapter