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

14.

Aliases

|

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

Lionel-F 4 years ago

Hi,

when i look the tutorial video I saw that on your Phpstorm you haven't got error on aliases, how you inform to Phpstorm that the aliases are not errors ? this is a special plugin you have ?

|

Lionel-F Lionel-F 4 years ago

I found the solution was on webpack config :D https://prnt.sc/1whxll8

|

Victor SFCASTS Lionel-F 4 years ago

Hey Lionel,

I'm really happy you found the solution! And thanks for sharing that if you set "Detect webpack configuration files for module resolution" option to "Automatically" in "Languages & Frameworks" -> "JavaScript" -> "Webpack" of PhpStorm's config helps :)

Cheers!

1 |

Tavo 5 years ago edited

Hi, thanks for this tutorial. How do I make this work with TypeScript? I tried it with:

`
"baseUrl": "./",
"paths": {

 "@": ["./assets/js"],
 "styles": ["./assets/css"]

},
`
in my tsconfig.json, but it doesn't seem to work :(

|

shadowc Tavo 5 years ago

Hey Gustavo!

When it comes to Vue 2, TypeScript is not recommended. There are issues with the Options API (the way we declare our components) and the magic "this" keyword that TypeScript is unable to type-check correctly.

However, if you still want to pursue TypeScript with this project, it seems like you would need to add TypeScript to Webpack Encore first, then configure the application's entry files to be processed correctly.

Here's some documentation: https://symfony.com/doc/current/frontend/encore/typescript.html

|

Tavo shadowc 5 years ago edited

thanks for your answer, I'm already using Vue 3 and TypeScript on Encore, specifically these versions:
<br />"@vue/compiler-sfc": "^3.0.0-rc.4",<br />"ts-loader": "^5.3.0",<br />"typescript": "^3.9.7",<br />"vue": "^3.0.0-rc.4",<br />"vue-loader": "^16.0.0-beta.4",<br />

and i was relying on this page...
https://v3.vuejs.org/guide/typescript-support.htm

|

shadowc Tavo 5 years ago

No problem!

Could you share more details on your issue? What errors do you see? Does it generate the JavaScript files?

1 |

Tavo shadowc 5 years ago edited

Finally, I found the problem, the correct setting in tsconfig.json is:
`
"baseUrl": "./assets",
"paths": {

 "@/*": ["./js/*"],
 "styles/*": ["./css/*"]

}
`
Thanks you!

|

shadowc Tavo 5 years ago

Glad you found it!

|

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