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

36.

Skipping Ajax: Sending JSON Straight to Vue

|

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

10 Comments

Sort By

Login or Register to join the conversation

diegoinaui 5 years ago

Hey hi!, I need pagination info,

how can it be done?

ty!

|

weaverryan SFCASTS diegoinaui 5 years ago edited

Hey diegoinaui!

That is an excellent question! And one that I have thought about before... solved... and forgotten how 🤦‍♂️. I believe what you need to do is this:

A) Create your query. Then use that to create a Doctrine paginator object. That's an instance of Doctrine\ORM\Tools\Pagination\Paginator .
B) Use THAT to create an ApiPlatform Paginator object - that is an instance of ApiPlatform\Core\Bridge\Doctrine\Orm\Paginator.

Finally, you will pass the Paginator object from part B to the serialize filter.

To help a bit more, if I'm reading the code correctly, here is where these objects are created in API Platform: https://github.com/api-platform/core/blob/c81eaae600d9472f65df7d4d8bf41145b06390b8/src/Bridge/Doctrine/Orm/Extension/PaginationExtension.php#L160-L185 - note that the DoctrineOrmPaginator class in there is an alias to the Paginator class from part (A).

Let me know if that helps!

Cheers!

|

Kiuega weaverryan 5 years ago

Hi Ryan! This question interests me as well.

But do you think it would also be possible to do it this way:

1. I am using your (beautiful) KnpPaginator bundle which will contain the data (not serialized), the pagination info.

2. I serialize the category data in some way (from the controller by modifying the data that will be stored in the knpPaginator paginator if possible).

3. I pass the object to Twig and put it in global to be able to access it from the JS.

What do you think of this alternative? (Or maybe it should get some fixes?)

|

Victor SFCASTS Kiuega 5 years ago

Hey Kiuega,

I'm not sure about KnpPaginator, but I think a good idea to try. Doctrine Paginator is just a bit more lightweight and low level, Knp Paginator has more overhead, but if you get used to it - why not to try it instead?

> 3. I pass the object to Twig and put it in global to be able to access it from the JS.

Depends on how your JS code works, but sounds good to me too, simple and working solution.

Cheers!

1 |

julien_bonnier 5 years ago

Hi there!

I really don't like this inline script tag nor the global variables. Is there a reason why we use that instead of some data attributes on the body or div#app tags?

Thanks

|

weaverryan SFCASTS julien_bonnier 5 years ago

Hey @Julien!

No reason at all :). This is a total personal preference - feel free to use data-attributes on body. They take 1 extra line of code to read them (no bid deal) and be careful with types (everything will be a string), but that’s it. I *do* like that data- attributes can be more localized - you can even put them in the div that you’re rendering into and read them from that :).

Cheers!

|

Nathan D. 5 years ago

Hello !

Is there a way to solve the loading issue when your API is on another server ? WEB-CLIENT on https://myapp.com and API on https://api.myapp.com for example.

|

shadowc Nathan D. 5 years ago

Hi again! :p

What issue are we talking about exactly? How would you be loading the data? If you're referring to a possible CORS issue, yes, there is a way to fix that with proper headers.

Here's an article about it: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

|

Nathan D. shadowc 5 years ago

Talking about the categories loading side effect of the AJAX call. If we have the API and the frontend on 2 different servers this is not solvable by pushing directly inside Twig. Or maybe by doing a call to the API in PHP and sending data through Twig. Anyway that's not a big issue for now :)

|

shadowc Nathan D. 5 years ago

That's right. Sending data directly from the server to twig makes sense if you have your API in the same server as your Symfony App. Alternatively, you may be able to perform calls to the API directly from the back end server, so they are ready to be injected as data inside of your component on page load, but this is a far more complex scenario!

1 |

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 Challenge