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

06.

data() and Vue Dev Tools

|

Autoplay

Previous Chapter

Next Challenge

Login or Register to check out the script

7 Comments

Sort By

Login or Register to join the conversation

davidmintz 4 years ago

Want devtools with Vue3? The instructions at https://devtools.vuejs.org/... for installing devtools v6.0.0-beta.21 don't make it easy. It says "To install or update the beta version of the devtools, go to one of repository releases and download the xpi file." followed by a link to https://github.com/vuejs/vu... where I could find no file with an xpi extension. After some struggle I managed to stumble into https://vueschool.io/lesson... and their link to a dated version which I finally figured out needs to be: https://github.com/vuejs/vu... Hope it helps someone.

|

shadowc davidmintz 4 years ago

Thank you, David!

If you want some guidelines on how to install Vue Dev Tools, head on to this link:

https://devtools.vuejs.org/guide/installation.html

Depending on your browser, the instructions may vary.

|

davidmintz shadowc 4 years ago

yeah those instructions didn't lead me to the solution, hence my comment. they do point to the repository but when you get there you can't find the file you need.

1 |

shadowc davidmintz 4 years ago

Ah, I see what you mean! In the "Beta" version of the devtools (firefox), you need to click on where it says "Assets", down after all the changelog info, with a down arrow to expand that. It will then show you several options, and one of them is the xpi file!

1 |

Romain 6 years ago

Hello, with VueJS 3 the Vue Dev Tools don't appear !

|

MWsatwareAG Romain 6 years ago

Version 6 Beta Release adds support for vue 3, https://github.com/vuejs/vu...
It does not support vue 1 and 2, so you have to install both versions if needed.

1 |

shadowc Romain 6 years ago

Hi rherault!

Good point!

Currently, Vue Dev Tools is not available for Vue 3 applications. This will change soon though, and while we can't be sure they will work and look exactly the same, you'll be able to debug most if not all of the things we show in this course!

I'm too hoping this is released ASAP! :)

|

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