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

48.

Adding a Watcher

|

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

19 Comments

Sort By

Login or Register to join the conversation

Helmi 3 years ago

Very nice course, it will be awesome if you add a final video explaining Composition API xD

|

MolloKhan SFCASTS Helmi 3 years ago

Hey Helmi,

I'm glad to hear you liked our tutorial, but unfortunately, we didn't cover that topic but thanks to your feedback we may cover it in a further tutorial

Cheers!

|

Alexandre C. 5 years ago

Hi team !

Thank you for the tutorial !

I would like to use Vue with a Symfony app. Just to be sure, is there a way to manage forms with Vue ?

I think it's not possible, but if I need to tweak a form when some operation is done, what's the best way to do it ? Flat Javascript ?

Have a good day,

Alexandre

|

weaverryan SFCASTS Alexandre C. 5 years ago

Hey Alexandre!

> Thank you for the tutorial !

Glad you've enjoyed !

> I would like to use Vue with a Symfony app. Just to be sure, is there a way to manage forms with Vue ?

Yes... there is... and we'll talk about it at the end of our next tutorial - https://symfonycasts.com/sc... - but it depends on exactly what you want to do. You mentioned:

> but if I need to tweak a form when some operation is dne

Can you give me a specific example of what you want to accomplish? For example, do you want to, have a form, and change that form in some way after one of the other fields is input? Or something different?

Let me know!

Cheers!

|

Alexandre C. weaverryan 5 years ago

Thank you for this fast answer ! You're amazing!

> Can you give me a specific example of what you want to accomplish? For example, do you want to, have a form, and change that form in some way after one of the other fields is input? Or something different?

Like hiding / showing part of the form depending of the user input (through AJAX & Symfony form events). Add elements to a CollectionType. Managing input type file.

I don't have a specific use-case in mind, I just started a project with Symfony & Vue, so there's not problem yet ! Haha

> Yes... there is... and we'll talk about it at the end of our next tutorial - https://symfonycasts.com/sc...
I will start it is ASAP ! :)

Have a good day,

Alexandre

|

weaverryan SFCASTS Alexandre C. 5 years ago

Hey @Alexandre!

> Thank you for this fast answer ! You're amazing

My pleasure... but I haven't helped yet 😉

> Like hiding / showing part of the form depending of the user input (through AJAX & Symfony form events). Add elements to a CollectionType. Managing input type file

You really have two different choices from the very beginning:

1) Build the form in Symfony. You get all the nice features of Symfony's form system, including the nice rendering, validation errors, etc.

2) Build the form in HTML / Vue without Symfony's form system. In this case, you wouldn't really "submit" the form... you would collect the data from the fields and send them as JSON to some API endpoint. The advantage of this is that you have full Vue control to do whatever crazy things you want on the frontend. The disadvantage is that you're responsible for more of the form stuff: like collecting the validation errors from the server and rendering them near each field, etc.

For what you're talking about, personally, I would go with option (1). These small things - hiding/showing field, etc - are not so crazy-dynamic that I think Vue would help enough to overcome the advantages of the form system. What we're currently using - and what was just announced with first-class support in Symfony at SymfonyWorld - is Stimulus.js - https://stimulusjs.org/ - a tool that I will have a screencast on soon. Btw, if you didn't "attend" SymfonyWorld, don't worry - just follow the Stimulus docs and get it set up - you don't need any Symfony integration.

Anyways, what Stimulus allows you to do is create a Stimulus controller that "binds" to an element (I would bind it to your form element). Then you can very easily listen to events and do things, like hiding/showing fields, or handling the form collection logic in a nice way. And if it makes you more comfortable, you can absolutely use jQuery inside a Stimulus controller if you want, but most things you need to do (like finding elements, attaching listeners, adding/removing classes) is really easy in Stimulus or can be done really easily with Vanilla JavaScript.

This is a long way of saying that I really, really like Vue for big dynamic, interactive parts of my site - for example the coding challenge page on our site (built in React, technically) https://symfonycasts.com/sc... - but for rest of JavaScript - any places where you need to sprinkle/add some JavaScript to your page, Stimulus is my favorite. And you can absolutely use both - each for different problems (it's what we do on SymfonyCasts).

Cheers!

|

Mickael-M 5 years ago

Great course, I really appreciate it. Can't wait for the next vue lesson. Can I be spoil :) Is there vue router ?

|

Mickael-M Mickael-M 5 years ago

Actually I've got a question, is there an other way to pass twig's variable in Vue without Apiplatform or window (JS)? For example if I want to pass my User object from twig to vue, what the best way to do it ?

|

shadowc Mickael-M 5 years ago

Hi Micka!

If I understand correctly, the only way to pass data from Twig to Vue is through the use of the window object, since Twig can only print things to the template. If what you mean is, how to pass data from the server to Vue, the other obvious option is to just make an HTTP request to the server asking for that information. This is common practice but it does take some time for the data to load, so in this tutorial we've chosen the much faster template way.

|

Mickael-M shadowc 5 years ago

Hi Matias,
That's what I meant, thanks for the answer 😉

|

shadowc Mickael-M 5 years ago

No problem!

|

WilcoS 5 years ago

Excellent course, have learn a lot. But at the end there is no certificate.
Can't wait for the next tutorial.

|

MolloKhan SFCASTS WilcoS 5 years ago edited

Hey WilcoS

I'm happy to know that you find our tutorial useful :)
About your certificate not showing up. Can you double-check that all the chapters are marked with a check-arrow? If you skipped or missed a chapter, then you won't get the certificate until fully finishing with the course

Cheers!

|

Jean-tilapin 5 years ago

Excellent work, as always. Thanks, SymfonyCast. Do you know when the second part will be available ? I'm starting a new project, using Vue (and Symfony of course), I'd really like to learn some new useful tricks, especially about the vue router... :)

------
About Symfony : could you please create an up-to-date cheatsheet about Symfony with the main commands lines and recipes ?

- download symfony, start server, update composer, etc.

- the main dev tools (maker, debug toolbar, etc.) and commands

- useful recipes (doctrine, api, encore, bootstrap, yarn, etc.) with "--dev" or not.

- the proper order to install all that (if there is one)

That could be very useful :)

|

Victor SFCASTS Jean-tilapin 5 years ago

Hey Xav,

Thank you for the feedback! :)

Yeah, we're going to release it shortly... it should definitely happen this year, most probably after API Platform v3 tutorial. My wild guess is that it may be start releasing next month, but that's a really rough estimation from me for now. Sorry, can't say more precise

Thank you for your interest in SymfonyCasts tutorials and your patience!

About the cheatsheet - I'm not sure, I think there are some good cheatsheets over the internet made by others, so you probably could take a look at them. We're working on tutorials mostly :)

Cheers!

|

Fernando A. 5 years ago

Wonderful work, I like to watch these before I do the coding... now because I already know some VueFoo I will not code anything, but I managed to learn some new things anyway.

Gotta love to update knowledge from time to time :)

|

shadowc Fernando A. 5 years ago

Thanks for the words, Fernando! I'm glad it was useful to you! :)

|

Peter-K 5 years ago

Thank you Ryan and rest of the team for this course.

It was a lot of new information for me, pretty much everything was new.

Hope your new courses will use more and more Vue as a front end.

I have learnt symfony back-end from your courses and now is a time to learn a front end from you where I am still struggling a bit.

Cannot wait for Vue 3 course. Good job lads.

|

shadowc Peter-K 5 years ago

Hi Peter! I'm glad you liked our course! :) This course has a second part in the works and the Vue3 course is also in our plans! So there's a lot of Vue stuff in the future for you to get your hands on!

|

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