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

24.

Ajax with Axios

|

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

9 Comments

Sort By

Login or Register to join the conversation

davidmintz 4 years ago edited

just wondering why we yarn add axios --dev. I thought the --dev meant you only want it in the dev environment. I see that yarn help add says it "save[s] package to your devDependencies" but I'm not really sure what that means in practical terms.

|

Victor SFCASTS davidmintz 4 years ago

Hey David,

Actually, all our JS dependencies are dev dependencies if you take a look at package.json file :) That's because technically there are dev deps, nothing is revealed to the user directly, everything is passed though Webpack Encore, i.e. precompiled by Webpack Encore, and technically Webpack Encore decides what to reveal to the end user. And so, it's not that much important where to put that JS dependency - into "dependencies" or in "devDependencies" section. You can do whatever you like, but you need to understand this concept with Webpack Encore. And it's kind of a good practice to put everything in devDependencies when you're handling your assets via Webpack Encore.

I hope this helps!

Cheers!

|

davidmintz Victor 4 years ago

Yeah thank you. That's interesting indeed. Now I'm slightly less ignorant than I was a couple minutes ago!

|

Victor SFCASTS davidmintz 4 years ago

Hey David,

Haha, great! :) But in short, that doesn't matter much and works both ways, depends on your preferences ;)

Cheers!

|

triemli 5 years ago edited

Hi guys.
I got an error at the last step:
`xhr.js:184 GET http://127.0.0.1:8000/api/products 500 (Internal Server Error)
createError.js:16 Uncaught (in promise) Error: Request failed with status code 500

at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:69)`

Probably because of database connection:
hydra:description: "An exception occurred in driver: SQLSTATE[HY000] [2002] Connection refused"

But locally via browser it works! http://127.0.0.1:8000/api/products
Any ideas?

|

weaverryan SFCASTS triemli 5 years ago edited

Hey triemli!

Hmm, that's super weird. So.... if you browser to http://127.0.0.1:8000/api/products it works... but if you send an AJAX request to POST http://127.0.0.1:8000/api/products it fails with "Connection refused?". There should really be no difference between the two from an infrastructure standpoint: in both cases, your browser is making a web request to the same backend. Do you get this error consistently?

Cheers!

|

triemli weaverryan 5 years ago edited

Actually mu fault, I didn't see the mmigrations there.

I created docker-compose yaml with:


version: '3'
services:
    mysql:
        image: mysql:5.7
        restart: always
        volumes:
            - ./data:/var/lib/mysql
        environment:
            MYSQL_ROOT_PASSWORD: "root"
            MYSQL_USER: 'root'
            MYSQL_PASSWORD: 'root'
        networks:
            - backend
        ports:
            - 3306:3306

networks:
    backend:
        driver: bridge

Up it, made migrations and success xD

1 |

triemli weaverryan 5 years ago edited

Ah sorry, misinformed a bit:
/api/products just page works. On json also connection refused:

` "@context": "/api/contexts/Error",
"@type": "hydra:Error",
"hydra:title": "An error occurred",
"hydra:description": "An exception occurred in driver: SQLSTATE[HY000] [2002] Connection refused",
"trace": [

{
  "namespace": "",
  "short_class": "",
  "class": "",
  "type": "",
  "function": "",
  "file": "/mnt/d/domains/vue/vendor/doctrine/dbal/lib/Doctrine/DBAL/Driver/AbstractMySQLDriver.php",
  "line": 93,
  "args": []
},`

But where it goes to connect?
Actually we don't up docker or any database services.

|

Sjoerd triemli 5 years ago edited

Ensure the database is there.
Update the .env with valid database connection information.
Afterwards load the fixtures.

php bin/console doctrine:fixtures:load

Now you can proceed (or at least I could)

1 |

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