Chapters

44 Chapters | 4:19:56 |

01

Project Setup

4:22
02

Page 2: Product Show Page

6:59
03

Current Product Id

4:56
04

The Dynamic Component

7:24
05

AJAX & Delayed Rendering

7:18
06

Making the Title Component Less Smart

3:59
07

Product Template & Color Selector

5:06
08

Cart API & Data

5:58
09

Add To Cart

4:28
10

Loading Animations & Quantity Input

5:01
11

External DOM Updates

6:35
12

New Page, New Webpack Entry

6:51
13

Sharing Vue-ish Logic: Mixin Basics

5:56
14

More Mixin Magic

8:11
15

The Cart Page

5:02
16

Loading the "Complete" Cart

6:35
17

No Data Duplication! Fancy Computed Prop

5:12
18

Parallel AJAX with Promises

7:29
19

Cart Structure

5:24
20

Inventing a Proper v-for :key

5:56
21

Accidentally Modifying Prop Objects

8:18
22

Emitting up the Component Tree

5:13
23

Quantity: Updating Data & Saving to the Server

4:35
24

More Mixin Logic: Updating Quantity in Header

5:02
25

Remove From Cart

4:08
26

"Add to Cart Controls" Component

8:09
27

Finishing the Cart Controls Component

5:39
28

Featured Sidebar

5:05
29

Add to Cart Controls on the Sidebar

7:08
30

Deep and Smart Watchers

8:15
31

Advancing Between Cart & Checkout

7:03
32

Intro to CSS Transitions

3:36
33

Vue Transitions

8:51
34

Transition Name & Mode

6:16
35

Transitioning a Prop Change

3:24
36

Checkout Form

5:52
37

Reusable "Form Input" Component

5:52
38

v-model on a Custom Component

4:10
39

v-bind Many Props

6:10
40

Checkout Submit

7:26
41

Unexpected Server Errors

3:38
42

Form Validation

4:28
43

Client-Side Validation

5:29
44

Losing Reactivity

7:27

> JavaScript Frameworks & Tools > The Delightful World of Vue Part 2

Buy Access to Course

26.

"Add to Cart Controls" 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 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

4 Comments

Sort By

Login or Register to join the conversation

acran 1 year ago

The component code in the question to this video seems wrong and orderPizza should actually look like:

        async orderPizza(slices) {
            this.ordering = true;
            await orderPizza(slices);
            this.ordering = false;
        }

|

Victor SFCASTS acran 1 year ago

Hey Acran,

Yeah, you're right! I fixed it, thanks :)

Cheers!

|

Jakub 3 years ago

Hi,
I've had an issue during moving 'product-show.vue' component to 'product-show' directory and renaming it to 'index.vue'. For me it was not enough just to restart Encore. I've also had to change import in '/pages/products.vue' component (from "import ProductShow from '@/components/product-show/product-show'" to "import ProductShow from '@/components/product-show'") and change import for light-component.scss in 'index.vue' (I don't know why but it have missed full path after move operation)
Cheers,
Jakub

|

weaverryan SFCASTS Jakub 3 years ago

Hey @Jakub!

Sorry for my very slow reply! Hmm.

I've also had to change import in /pages/products.vue component (from import ProductShow from '@/components/product-show/product-show' to import ProductShow from '@/components/product-show')

When I look at our /pages/products.vue - e.g. here https://symfonycasts.com/screencast/vue2/dynamic-component#codeblock-6f1d66b01c - it looks like this:

import ProductShow from '@/components/product-show';

Unless I changed it later and I can't remember, I don't think it ever looked like import ProductShow from '@/components/product-show/product-show. So this was, maybe, just something that you did slightly differently, which is why you needed to make that extra change :).

Cheers!

|

This course is also built to work with Vue 3!

Vue 2

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.1", // 5.15.1
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.3
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.2.0
        "eslint-plugin-import": "^2.19.1", // 2.22.1
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.12
        "vue-loader": "^15.9.1", // 15.9.4
        "vue-template-compiler": "^2.6.11", // 2.6.12
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

Previous Chapter

Next Challenge