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

30.

Passing data From the Server 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 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

8 Comments

Sort By

Login or Register to join the conversation

Numan A. 4 years ago

If are building a similar app from scratch then you will need
composer require sensio/framework-extra-bundle
or your link /category/id will not work you will get "service not exists error" <3

1 |

MolloKhan SFCASTS Numan A. 4 years ago edited

Hey Numan A.

Yes, you're right. That bundle is required if you want to leverage the ParamConverter feature on your routes. Thanks for pointing it out

Cheers!

1 |

davidmintz 3 years ago

I'm noticing (in the video) the dreaded Flash Of Unstyled Content, a/k/a FOUC. What's causing that and how to we fix it? (I know in general terms it happens when the HTML is rendered before the CSS and Javascript do their thing, but I'm wondering what's going on in this specific case.)

|

Victor SFCASTS davidmintz 3 years ago

Hey David,

I'm not sure I understand, are you referring to the specific point in timeline of the video?

Cheers!

|

davidmintz Victor 3 years ago

The first FOUC comes at about 0:17.

|

Eugem 4 years ago edited

Hey, Ryan!
I think your solution with global variable is ugly.
I used HTML data attribute<a href="https://ibb.co/nswZj3z"> for server vars.</a>
What do you think about it?


{#templates/product/index.html.twig#}
{% extends 'base.html.twig' %}

{% block body %}
    <div id="app" data-current-category-id="{{ currentCategoryId|default(null) }}"></div>
{% endblock %}

// assets/js/products.js
import { createApp } from 'vue';
import App from '@/pages/products';

const mountEl = document.querySelector('#app');
createApp(App, { ...mountEl.dataset }).mount('#app');


    //assets/js/pages/products.vue
    mounted() {
        this.currentCategoryId = this.$attrs.currentCategoryId || null;
    },

|

Victor SFCASTS Eugem 4 years ago

Hey Evgeniy,

I don't think that's ugly, it's still a valid case. But yes, there's another way you can pass data to your JS code using data attributes, and this is also good. And I bet we also mention this way in our tutorials, maybe not in this one, but in others - definitely. Feel free to use any of these solutions. But from the performance point of view, using global vars might be more effective, though I'm not sure 100%.

Cheers!

|

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