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

32.

Page Context "Service"

|

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

6 Comments

Sort By

Login or Register to join the conversation

acran 1 year ago edited

in the challenge to this video in the answer to pick (B) the function is defined as

export function async getRandomTurtleFact() {
    // ...
}

which is a syntax error in JS since the async keyword has to be before function:

export async function getRandomTurtleFact() {
    // ...
}

|

Victor SFCASTS acran 1 year ago

Hey Acran,

You're totally right! Also, another problem with redeclaring the value of randomTurtleFact constant. I fixed the code block, thanks for reporting it!

Cheers!

|

Kiuega 5 years ago edited

Hello here ! There is something that I am not sure I fully understood.

We have in <b>products.vue</b>:


<sidebar
                    :collapsed="sidebarCollapsed"
                    :current-category-id="currentCategoryId"
                    @toggle-collapsed="toggleSidebarCollapsed"
                />

<b>'current-category-id'</b> which will be passed as props to <b>sidebar.vue</b>

In <b>sidebar.vue</b> :


props: {
        collapsed: {
            type: Boolean,
            required: true,
        },
        currentCategoryId: {
            type: String,
            default: null,
        },
    },

'<b>currentCategoryId</b>' != '<b>current-category-id</b>'. How is it that it works anyway? If we had passed, from <b>products.vue</b>, '<b>currentCategoryId</b>' instead of '<b>current-category-id'</b>, the result would be the same?

Thanks !

|

shadowc Kiuega 5 years ago

Hi, Kiuega!

It's part of the magic in Vue! :D

Your property is called `currentCategoryId` but if you type `current-category-id` in your Vue template, Vue will automatically translate it for you so that you can refer to it in JavaScript!

1 |

Abelardo 5 years ago

Hi there,
When I refresh the main page, it looks a bit weird. I can temporarily see a page with no styles and it is annoying: could we avoid it?

|

weaverryan SFCASTS Abelardo 5 years ago

Hey @AbelardoLG!

Excellent question! You're only seeing this because of this change: https://symfonycasts.com/sc...

We have "disabled CSS extraction" in dev mode only. This causes there to be NO real link tags on the page. Instead, the CSS is injected via your JavaScript. We do this in dev only (this will not happen on production builds) and we only do it so that HMR (hot module replacement) with the dev-server can work: it requires that you disable CSS extraction. So, it's not a problem on production.

Btw, with Encore 1.0 (and Webpack 5), I believe that you do NOT need to disableCssExtraction anymore to get HMR working with CSS. So if you upgrade, I think you can remove that line and still enjoy HMR.

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 Challenge

Next Challenge