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 >

Course Overview

The Delightful World of Vue

Dive into Vue.js! Master API integration, work with components, conquer the special `v-STUFF`, and organize files with Webpack alias.

Buy Access

3197 students
EN Captions
EN Script
Certificate of Completion

Your Guides

Matias

Ryan Weaver

About this course

This course is also built to work with Vue 3!

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

Ready to build an interactive frontend that you'll love! Look no further than Vue.js: a leader on the frontend world and one that you can sink your teeth into, even if JavaScript isn't your main gig. In this tutorial, we'll build a real-world "Products" area for our site using an API-Platform-powered API. Will it be a single-page application (SPA)? Nope! Not in this tutorial - because it turns out, integrating Vue into a "traditional" web app is actually a bit trickier:

Tip

Bonus! Along the way, we'll highlight the few differences needed to make this tutorial work with Vue 3.

Installing & Setting up Vue with Encore (including a nice eslint setup!)
All about the Vue object: let's make it feel boring!
Single file Components (SFCs)
Modular styles
Props, data & state! Ya know, the key to everything
v-bind, v-text, v-on, v-for, v-show: basically all the special v-STUFF!
Communication up the tree with $emit
Making (and organizing) AJAX calls
Organizing your files & adding Webpack "alias" shortcuts
methods, computed properties
v-model (what it really does)
Server-side searching and filtering
Passing data directly from your server to Vue via Twig
Watchers: what, when and when not

By the end of this tutorial, you'll feel comfortable - dare I say confident - in all the Vue basics!

Next courses in the JavaScript Frameworks & Tools: Vue section of the JavaScript Frameworks & Tools Track!

The Delightful World of Vue Part 2

44 Videos | 4:19:56 | 0%

20 Comments

Sort By

S-H 1 year ago

If anyone has problems with composer install, because of doctrines ArrayCache -> set "doctrine/orm" to "2.8.5" or less in composer.json

2 | Reply |

Chapter2 2 years ago edited

For those of you who do the tutorial with NodeJS v17+, adjust the scripts section of your package.json.
Some algorithms or key sizes used in this tutorial are no longer allowed by default with OpenSSL 3.0
`

    "watch": "SET NODE_OPTIONS=--openssl-legacy-provider && encore dev --watch",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && encore production --progress",

1 | Reply |

Krzysztof K. 4 years ago

Great!

1 | Reply |

Kiuega 3 years ago

Hello ! I'm using PhpStorm to, but for webpack encore alias, there is no auto-completion for my javascript files (when we import some file using our alias). Maybe is there a configuration to set in PhpStorm to enable it ?

EDIT : Got it ! After searchs, it's in Settings > Javascript > Webpack > automatic.
Works very good <3 <3

| Reply |

Igor-P 3 years ago

Really nice introduction to the framework with a huge amount of best practices in details. Thank you.

The only thing you haven't mentioned is using vue outside symfony. Yep, I know it's symfonycasts.com website but sometimes (When should I do that? Should I?) even the initial symfony project is splitted into two "pure symfony API" and "pure SPA frontend" repos which are kind of independent therefore encore can't be used and at least that global categoryId variable should be somehow got in another way (from router?), not from twig template. Hope it will be covered in the second part of the course.

| Reply |

Miky 4 years ago

@weaverryan @shadowcplays
Why this does not cover the FORMS ? There is big hole between API Platform and Symfony Forms extension....
I saw many posts on the internet when nobody has normal process how to implement Form via API to javascript page like Vue, React or Angular. And the forms are the core part of many pages and if you create with symfony API-platform the separate front and back, you will hit the forms as wtf how to continue and get data from js forms to symfony by secure way.
This was the first reason why i abandoned the symfony framework on beginning because i stacked with my first easy 5 page site, where were 3 simple forms.. and it seems (on forums) like very difficult to do this if your front end is clear js framework which fetch and send data by API and js framework is not integrated via webpack...

| Reply |

shadowc SFCASTS Miky 4 years ago

Hi Mikolaj!

We will cover forms in part 2 of this Tutorial. So stay tuned for it!

1 | Reply |

Nathan D. 4 years ago

Thanks ! Great tutorial ! :)

| Reply |

It O. 4 years ago

thank's guys, nice tutorial

| Reply |

shadowc SFCASTS It O. 4 years ago

I'm glad you like it!

| Reply |

It O. 4 years ago

Hey guys, release more chapters please! :)

| Reply |

MolloKhan SFCASTS It O. 4 years ago

We're on it! We release one new and exciting chapter every day from Monday to Friday

Cheers!

| Reply |

Delrei 4 years ago

I'll buy access for this tutorial. Do you've an estimative when will be available completely?

| Reply |

MolloKhan SFCASTS Delrei 4 years ago edited

Hey Delrei

This course it's been actively released, what it means that we deliver one new chapter every day (Monday to Friday). There're 20 chapters left so I would say it will be fully released in one month

| Reply |

WilcoS 4 years ago

I can't wait for the next chapters

| Reply |

shadowc SFCASTS WilcoS 4 years ago

Hi Wilco!

I'm glad you're liking this tutorial! We're releasing about 1 chapter a day with our current schedule (we try to release a group of Chapters near the start of each week)!

If you click on "Next Chapter" on the last recorded one, you might also get a sneak peak of what the next unreleased chapter will be (but no video)!

| Reply |

It O. 4 years ago

when?????

| Reply |

weaverryan SFCASTS It O. 4 years ago

Monday! :)

2 | Reply |

SRP weaverryan 4 years ago

I hope it's MPA, not SPA :)

| Reply |

weaverryan SFCASTS SRP 4 years ago

It will be :). MPA's (multi page apps) - traditional apps that have Vue embedded into parts of them are actually trickier in my opinion than an SPA. We wanted to show that.

| Reply |