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

04.

Single File Component

|

Autoplay

Previous Challenge

Next Challenge

Login or register to check out the script

23 Comments

Sort By

Login or Register to join the conversation

Ruslan 10 months ago

Hi!
In Vue 3 case.
May we use composition API?

BR.

|

Victor SFCASTS Ruslan 10 months ago

Hey Ruslan,

Yes, in Vue 3 you can (and IIRC are even encouraged to) use the Composition API. See more info on in the official docs: https://vuejs.org/guide/introduction#composition-api

Cheers!

|

pasquale_pellicani 2 years ago

Thanks for the great video tutorial, it would be interesting to have an example of how to run this ^_^

|

weaverryan SFCASTS pasquale_pellicani 2 years ago

That looks pretty nice! I'm guessing it's not as simple as just mimicking what's in that example file?

1 |

pasquale_pellicani weaverryan 2 years ago edited

:( unfortunately no, there is something that doesn't add up. Yet I followed the instructions in the video to the letter, I'm not very familiar with Vue
In the example it load script type=module after tag with id="App" in the view (here the file)

|

weaverryan SFCASTS pasquale_pellicani 2 years ago

Ah! I think the key is to focus more on the original file - App.vue. Pretend this is any single file component - you could call it MyProductTable.vue. When you're ready to render it, forgot the script type="module" stuff - that detail varies based on how your build system, etc is set up. Instead, import MyProductTable.vue into some other part of your Vue app and render it like you normally would.

Let me know if this helps :)

1 |

pasquale_pellicani weaverryan 2 years ago

many thanks Ryan I solved it works, I didn't want to delve too deeply into vue but I will in the future, at the moment the datatable works and that's enough for me XD

|

weaverryan SFCASTS pasquale_pellicani 2 years ago

Woohoo! I'm happy we were able to at least get this working for you :)

|

akincer 5 years ago edited

Also got the "Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined" error. This fixed it for me in case anyone else gets it. This change is in package.json and was made to match the value for vue-template-compiler in package.json

Old Value
"vue": "2.5",

New Value
"vue": "^2.6.12",

Then run yarn install

|

shadowc akincer 5 years ago

Thank you for the info! Yes, you should get the latest version of Vue 2 always!

|

brianbarrick 5 years ago

I was getting the same error as below so I changed package.json to:
"vue": "2.6.11",
"vue-loader": "15.9.1",
"vue-template-compiler": "2.6.11",

|

Alexei Suzdalenko Developer 6 years ago edited


Uncaught Error: Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined

help me , please.


resolved -> package.json

"vue": "2.6.11",
        "vue-loader": "15",
        "vue-template-compiler": "2.6.11",

|

shadowc Alexei Suzdalenko Developer 6 years ago edited

Hi, Alexei!

Please try with these settings in your package.json and see if it works:


"vue": "^2.6.11",
"vue-loader": "^15.9.1",
"vue-template-compiler": "^2.6.11",

|

Steven shadowc 5 years ago

Hi, it's work perfectly by replacing the "2.5" version of vue package by "^2.6.11".
"vue-loader" is set to 15 so he's already using the latest version.

It would be nice if wp-encore updated his installation message.

Thanks for the solution!

|

Mickael-M 6 years ago edited

Hi guys,
I had the same problem but changing vue and vue-template-compiler to "2.6.11" was not enough. I had to type :yarn add --dev @vue/component-compiler-utils@1.3.1 find on this <a href="https://github.com/parcel-bundler/parcel/issues/1490">github</a>
Now everything work

|

shadowc Mickael-M 6 years ago

Hey! I'd like to further comment on this:

Different projects might have different requirements as to what to install in order for Vue to compile properly through Webpack. Also, when upgrading older versions of Vue to, say, 2.6.11, you might have special needs as well. But if you start from our project's starting point and follow our directions to the letter, you should have no problems with it!

Having said that, if you find issues, please, let us know!

In the future, encore might choose to install Vue 2.7 (when it's available) as its default Vue 2 version. There should be no problem there as well, but if there is, we'd also like to hear about it!

|

shadowc Mickael-M 6 years ago

Hey Micka!

Thanks for letting us know!

|

sayil 6 years ago edited

Hi guys,
I am having a problem with the single page component.
I am getting an error in the products.vue file and I could not find a solution for this. This is the error I am getting.
Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined<br />
Could you tell me what I am doing wrong?

Cheers and Thanks!

|

Peter-K sayil 5 years ago

HI Sayil,

had exactly the same issue. I have downloaded start code of tutorial and in package.json vue version is/was set to 2.5 but vue-template-compiler to ^2.6.11
so all you need is just to change vue: to ^2.6.11 rerun yarn install and yarn watch and it should be fine

|

shadowc sayil 6 years ago

Hi Sayil!

Please look at your package.json for vue-template-compiler. This might be an error where Yarn has installed a wrong version of it. You might be able to fix this by changing the version number from ^2.6.10 to 2.6.10 (remove the ^) and run Yarn again to update the package.

This could also happen if vue-template-compiler is missing (i.e. you have forgotten to run yarn to install your packages in the first place)

Let me know if this helps!

|

sayil shadowc 6 years ago

Hi Matias,
thanks for answering so quick!
I tried this but I am still getting the error. I made sure that the vue-template-compiler was installed but still nothing. I ran yarn install after changing the version but I still get the same error. Could there be any other reason for this?
Thanks in advance.

|

shadowc sayil 6 years ago

Hmm, hard to think of a reason! Did you config Encore for Vue 3 or Vue 2? what do your package.json and webpack.config.js files look like?

|

sayil shadowc 6 years ago

Hi Matias,
you where right, I had a look on my package.json file and changed the version of vue from 2.5 to 2.6.11 and then everything worked fine!
Thanks for you help.

|

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