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

07.

Creating a Child Component

|

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

10 Comments

Sort By

Login or Register to join the conversation

Armin 5 years ago

I am using vue 3 and just got the error with the component not being resolved as reported previously by @Trrtr. The solution createApp(App).mount('#app'); should be actually added in the tutorial especially because in one the previous chapters the following is advised for vue 3 which with this chapter will be missing some key probably and that is why it is not complete anymore.

So, for anyone using Vue 3, this won't work anymore here with the component:

const app = createApp({
data: App.data,
render: App.render,
});

Instead use sth similar to:

const app = createApp(App).mount('#app');

The part, setting const app is obviously optional and only if you want to have access to app from e.g. your web tools console.

|

shadowc Armin 5 years ago

Hi Armin!

Thanks for the tip! We'll add a comment for it in the right video!

|

Alexei Suzdalenko Developer 6 years ago

don't work this example

|

Victor SFCASTS Alexei Suzdalenko Developer 6 years ago

Hey Alexei,

We're sorry to hear you have some troubles with running this example! Do previous examples work for you (examples in previous chapters)? Could you give us a little bit more context? What exactly are you doing? Do you see any errors in Console tab of Google Chrome? We will be happy to assist you if we know a little more about your problem.

Cheers!

|

Filip W. 6 years ago edited

Hi, after creating Legend component I'm getting:
<br />[Vue warn]: Failed to resolve component: legend-component at <App><br />
Is this issue with vue 3 or am I doing something wrong?

|

Victor SFCASTS Filip W. 6 years ago

Hey Trrtr,

Hm, my guess is that you need to define your "legend-component" component before you initiate your main instance.

I hope this helps!

Cheers!

|

trrtr Victor 6 years ago edited

What does it mean to define it before main instance? Should I add something to products.js?
Now it looks like this:

`
import { createApp } from 'vue';
import App from './pages/products';

createApp({

    data: App.data,
       render: App.render,

}).mount('#app');
`

My products.vue (without template), in which I call <legend-component />:

`
<script>
import LegendComponent from '../components/legend';

export default {

        name: 'Products',
     components: { LegendComponent },
        data() {
                    return {
                                legend: 'Shipping takes 10-12 weeks, and products probably won\'t work',
                    };
        },

};
</script>
`

And a legend.vue:

`
<template>

    <span class="p-3">
    Shipping takes 10-12 weeks, and products probably won't work
    </span>

</template>

<script>
export default {

    name: 'LegendComponent',

};
</script>
`

Everything from products.vue renders correctly except legend-component :(

|

shadowc trrtr 6 years ago edited

Hi trrtr!

I'm not sure why would you get such an error in Vue 3. Does it work with Vue 2?

I'd try to instantiate my App as follows:

<blockquote>`

createApp(App).mount('#app');

`</blockquote>

And see if that makes it recognize App's child components!

|

Filip W. shadowc 6 years ago

Passing App to createApp worked! Thank you for your help :)

|

shadowc Filip W. 6 years ago

No problem! Looking back at the issue, I know what the problem was: When you do it the first way, you're only passing data and the render function to the Vue engine, not the entire App object. Thus, once you start adding properties to App, those get lost in the way, therefore, you need to change the syntax and just give Vue the entire thing!

|

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