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

16.

v-on & methods: User Interaction

|

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

5 Comments

Sort By

Login or Register to join the conversation

shirleenkneppers 4 years ago edited

Hi Ryan, I am getting this error. Do you have anyway to remedy this?

<br />Script cache:clear returned with error code 255<br />!! <br />!! In ContainerBuilder.php line 1089:<br />!! <br />!! Class "Doctrine\Common\Cache\ArrayCache" does not exist <br />!! <br />!! <br />!! <br />Script @auto-scripts was called via post-update-cmd<br />

|

shirleenkneppers shirleenkneppers 4 years ago edited

Ok so apparently doctrine cache has been deprecated. https://github.com/doctrine/cache/issues/354, So tried installing an older cache library to make it work. You will need to install this version of Doctrine cache using this in your terminal.

`

     composer require doctrine/cache:1.12.1

`

You need to do this before installing the project or you will get the error. I hope this helps someone.

|

sadikoff shirleenkneppers 4 years ago edited

Hey shirleenkneppers

That's weird. How did you get newer cache package? I checked code we do have this package and it's locked on version 1.10.2. I pretend you tried to upgrade project to latest version which we don't recommend to do with downloaded code 'cause you can get issues

Cheers!

|

shirleenkneppers sadikoff 4 years ago

Hi @Vladimir

I normally don't update the files. I started getting errors on Yarn watch at chapter 16 and for some reason it just didn't wanted to show any of the changes on the webpage. I tried fixing the errors but as you can imagine that some of these fixes might have required me to do updates on packages. So after a day of struggling to just be able to use the files I found this and it is working fine. I wouldn't have updated if it wasn't needed. I don't remember the errors but they where hindering my progress.

Regards

|

sadikoff shirleenkneppers 4 years ago

Anyways good debugging. I'm curious what is the real issue which forced you to update packages, we will try to investigate it... I hope it is not something serious.

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