Chapters

48 Chapters | 5:05:52 |

01

Encore, Symfony & API Platform

7:15
02

Installing Vue, Webpack & Eslint

8:57
03

Vue Instance & Dynamic Data

6:10
04

Single File Component

4:17
05

CSS: Styling a Component

4:51
06

data() and Vue Dev Tools

4:28
07

Creating a Child Component

5:09
08

Props: Passing Info into a Child Component

4:49
09

v-bind: Dynamic Attributes

6:39
10

Modular CSS

7:06
11

Webpack dev-server: Faster Updating

6:20
12

HMR: See Changes without Reloading

4:36
13

Organizing into more Components

6:08
14

Aliases

5:05
15

Looping with v-for

7:39
16

v-on & methods: User Interaction

8:33
17

Magic "this" & its Properties

7:29
18

Reactivity

7:55
19

v-if, v-show and Conditional Classes

5:12
20

Computed Properties

5:58
21

Where should a Piece of Data Live?

7:06
22

Communication UP with $emit

5:49
23

Using Shared CSS

5:08
24

Ajax with Axios

5:41
25

The await Keyword

7:34
26

Product Listing Components

8:13
27

Product Details & Smart vs Dumb Components

8:51
28

Loading Component

5:35
29

Dynamic Categories via Ajax

5:30
30

Passing data From the Server to Vue

6:46
31

Reading Server Data & :global Classes

7:18
32

Page Context "Service"

8:12
33

Filtering the Products

4:51
34

Smarter Loading: Ajax status as State

8:00
35

Ajax Services

7:54
36

Skipping Ajax: Sending JSON Straight to Vue

6:37
37

Faking Ajax calls: Reading Synchronously

6:06
38

Passing Props vs Fetching Directly

6:36
39

Hoisting Data Up

6:52
40

The Formidable v-model

7:04
41

Pass Data in a Custom Event & Internal Data

6:41
42

Filtering Products

3:47
43

Async Computed Properties

9:00
44

Debouncing: Data can Hold Anything

4:18
45

Business Logic Helpers

5:57
46

Adding an [x] to our Search Bar

4:19
47

Watchers: The Good, The Bad & The Useful!

6:18
48

Adding a Watcher

5:13

> JavaScript Frameworks & Tools > The Delightful World of Vue

Buy Access to Course

26.

Product Listing Components

|

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

7 Comments

Sort By

Login or Register to join the conversation

davidmintz 4 years ago edited

I'm an old dude who is accustomed to old-fashioned, conventional PHP with old school Javascript (SCRIPT tags, no asset management tooling...). The question I've been wondering about is: say you have a backend admin page for updating products --/admin/products/update/123. In the old days, in a controller method, you would fetch the product entity and inject it into your template, then render a form already populated with the entity data -- the point being, render your form and entity in one step. With this stuff, it looks like you've got your cool Vue components and they are responsible for fetching data via xhr <i>after</i> the user loads the page that contains the components themselves. Thus, two http(s) requests instead of one. So my gut reaction is, that's inefficient. If your Vue app were contained in the same page as everything else, I guess you could actually inject your entity (in PHP) and output it manually, so to speak, as template variables under the Vue app's data key. But the Vue app lives elsewhere and besides, it's kind of a weird approach. So I am trying to fully wrap my mind around this different, modern approach. Why shouldn't I care about the additional request cycle to fetch the data?

I hope this makes sense. btw I am totally loving the tutorial.

1 |

Alexander_Sherozia 4 years ago

Hello great team! question for both, Vue and LiipImagineBundle:
How to apply Liip's filter in vue.js file as we do in twig: " <img src="{{ asset('/relative/path/to/image.jpg') | imagine_filter('my_thumb') }}"/> " ?
Thanks in advance

|

Victor SFCASTS Alexander_Sherozia 4 years ago edited

Hey Alexander,

Good question! :) So, you can't write Twig code in JS files, but you can add a script tag in the Twig where set the final computed path after LiipImagine's filter applied, something like this:


    <script>
        window.MY_THUMB_URL = '{{ asset('/relative/path/to/image.jpg')|imagine_filter('my_thumb') }}';
    </script>

And then you can access that MY_THUMB_URL in your JS scripts on that page. Or, you can put that computed URL on a data attibute of any tag, and then read it from the JS as well.

I hope this helps!

Cheers!

1 |

Alexander_Sherozia Victor 4 years ago edited

Good approach. It seems shorter than the way i found : in my Vue file I fetch the path of cached file -- $resolvedPath = $imagineCacheManager->getBrowserPath('/my/path/image.jpg', 'filter_name'); in my controller. Thank you Victor

|

Victor SFCASTS Alexander_Sherozia 4 years ago

Hey Alexander,

Great, I'm happy to hear it helps! Yeah, this is probably the easiest way :)

Cheers!

|

Brandon 5 years ago

I was hoping you would address dynamic dependent drop downs in this tutorial but didn't see it. I feel like this tutorial shows everything one would need to do it, but I can't quite put it together. I've setup my script to console log TODO's each time a drop down is changed, but I'm struggling with putting the AJAX call in the methods. I load the first drop down just as this tutorial shows loading catalogs and it works well asynchronously in a created section. But I don't know how to pass the the selected options library ID to the next AJAX call so the next one populates. If you are planning on touching on this in future tutorials I'll look for it there, if not, any help would be appreciated. Thank you for all your work on these tutorials.

|

shadowc Brandon 5 years ago

Hi Brandon!

I'm not entirely sure of what you are trying to accomplish, but if I assume correctly: When you have one Drop Down element that depends on weather or not another Drop Down element has been populated (and is selecting some item), you could just base the second Drop Down load upon an @onInput event on the first one. I'd just make sure that the second Drop Down data would be cleared if the first Drop Down data isn't loaded and take it from there. I hope this helps!

|

This course is also built to work with Vue 3!

Vue 2

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.0
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.1.0
        "eslint-plugin-import": "^2.19.1", // 2.20.2
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.5
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.11
        "vue-loader": "^15.9.1", // 15.9.2
        "vue-template-compiler": "^2.6.11", // 2.6.11
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

Previous Chapter

Next Chapter