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

01.

Project Setup

|

Autoplay

Next Chapter

Login or register to check out the script

19 Comments

Sort By

Login or Register to join the conversation

Yannick 3 years ago edited

Hey guys, thank you for this tutorial. Quick heads-up: For yarn watch to work node.js needs to be on version 16. With later versions, e.x. 18 or so the following error appears:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (C:\...\Vue.js\Vue2\start\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\...\Vue.js\Vue2\start\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (C:\...\Vue.js\Vue2\start\node_modules\webpack\lib\NormalModule.js:471:10)
    at C:\...\Vue.js\Vue2\start\node_modules\webpack\lib\NormalModule.js:503:5
    at C:\...\Vue.js\Vue2\start\node_modules\webpack\lib\NormalModule.js:358:12
    at C:\...\Vue.js\Vue2\start\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\...\Vue.js\Vue2\start\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (C:\...\Vue.js\Vue2\start\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (C:\...\Vue.js\Vue2\start\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\...\Vue.js\Vue2\start\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at C:\...\Vue.js\Vue2\start\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

1 |

Victor SFCASTS Yannick 3 years ago

Hey Yannick,

Thank you for this tip! Yeah, you need NodeJS v16 to make it work.

Cheers!

|

Beo 5 years ago edited

Hey, I cannot get the dev-server update the contents automatically. I even added the poll configuration like this in the end of webpack.config.js.

`
if (!Encore.isProduction()) {

Encore.disableCssExtraction();

}

config = Encore.getWebpackConfig();
config.watchOptions = {

poll: true,

};

module.exports = config;`

Any idea on how to solve this?

|

weaverryan SFCASTS Beo 5 years ago edited

Hey Beo!

Hmm. Do you have any luck with yarn watch? I'm wondering if the problem is with the "watching" or something related to the dev-server (and if you're using Encore 1.0, that updated to a new major version of dev-server).

Btw, are you simply seeing that, when you change a file, nothing recompiles? Iirc, when you change a file, if you look a the terminal, you should see a message from dev server that it is "rebuilding".

Cheers!

|

Beo weaverryan 5 years ago edited

Ciao Ryan!

yarn watch works, but the dev-server does not. Nothing changes in the terminal if I change any project file.

Is there a simple way to debug this?

|

weaverryan SFCASTS Beo 5 years ago edited

Hey Beo!

Hmm, ok! Are you on Encore 1.0? Or still 0. something?

Do you need the watchOptions in order for yarn watch to work? Or does it work with standard config?

About the watchOptions, the dev-server has its own watch options. On Encore 1.0 (with webpack-dev-server 4), I'm 99% sure that the webpack-dev-server will re-use whatever watch options you have at the root level. But in Encore 0.33 (with webpack-dev-server 3), I'm less sure. If you're on that version, try using the standard way of setting the watch options:


Encore.
    .configureWatchOptions(function(watchOptions) {
        watchOptions.poll = true;
    });

In Encore 0.33 (and earlier), this will set this on the main watchOptions but also the webpack-dev-server options. In Encore 1.0, as I mentioned, I'm 99% sure that webpack-dev-server automatically uses the root watchOptions. And so, for that reason, Encore 1.0 only sets this config at the root level when you use this function.

I'm not sure of a good way to debug this other than to play around with the config!

Cheers!

|

Beo weaverryan 5 years ago

Hey,

I'm using Encore ^0.30.0, that I think resolves to 0.30.2, as specified in the code of the project (and also, same version of the Episode 1 of the tutorial).

I need those options for yarn watch to work, yes.

Should I try updating to Encore 1.0?

|

weaverryan SFCASTS Beo 5 years ago edited

Hey Beo!

Should I try updating to Encore 1.0?

No, you don't need to do that... it's mostly just that 1.0 and 0.30.0 potentially work a bit different in this area - especially the dev-server. You could try upgrading to see if the new version of webpack-dev-server fixes it... but there is no guarantee. Because this is very odd behavior, I wasn't expecting it to happen on the old, very tried-and-tested Encore version :).

To answer your original question, I do not know of an easy way to debug this... it's usually something that just works :p. But, I do have 2 questions for you:

1) Why are you setting the poll option? This usually means you have some VM setup where you have a shared directory where the traditional watch mechanism doesn't work over a mount. What is your situation?

2) Did you try my suggestion of setting the watch options in the more traditional way for Encore? The key difference is that doing it this way explicitly sets the watchOptions for the root level config and also for the dev-server config:


Encore.
    .configureWatchOptions(function(watchOptions) {
        watchOptions.poll = true;
    });

Cheers!

|

Beo weaverryan 5 years ago

Hey, answers below :)

0. I have a very basic setup: Mac OS with PHP 7.4 and nginx/php-fpm on the same machine. No docker or VM in the way. Node v10.

1. because if I don't even the yarn watch doesn't recompile. If I add the poll setting, it works.

2. ehm, sorry, I missed that! If I add that it works! I receive some warning during the startup regarding "Unhandled promise rejections are deprecated", but other than that, it works!

Thanks a lot!

|

weaverryan SFCASTS Beo 5 years ago

Hey Pietro!

Woohoo! I can’t explain why you would need the polling with such a normal setup - that is a mystery! But I’m super glad it’s working :).

Cheers!

|

Beo 5 years ago edited

Note that, if you like me used the part 1 database, fixtures still need to be regenerated since they create the /uploads public folder.

|

Victor SFCASTS Beo 5 years ago

Hey Pietro,

We always suggest our users to re-download the course source code for new episodes and start from the start/ folder instead of continue following it on the course code from the past episodes. The main reason is because we want to make thing very smooth to follow, that's why we almost always add some extra code between episodes: prepare some boilerplate code, upgrade dependencies to specific required versions, etc. If you want - you can continue following the same project from past episodes to follow new ones, but you should be ready for some minor difference or extra work.

I hope this helps!

Cheers!

|

Beo Victor 5 years ago

Hi, thanks, but I did not start from the whole previous episode, just the db stayed the same, and the only missing thing were the missing pictures...

|

Abelardo 5 years ago

Hi there!
Do people who did the first part need to download this (new) code or is enough with the code we generated at this part 1?
Best regards.

|

Victor SFCASTS Abelardo 5 years ago

Hey AbelardoLG,

We always recommend users to download the new course code from the next episodes and start from the start/ directory, because we almost always do some tweaks between the episodes: Preparing some boilerplate code, improving things, make some upgrades, etc. So if you will continue the project from the previous episode - it may slightly differ from the code in the new episode.

In short, you can continue your first project and follow the new episode on it, but you should be ready to some differences in the course code. So, my advice - download the new course code :)

Cheers!

1 |

Abelardo Victor 5 years ago

Hey Victor,
It should be mentioned at your script in order to be noticed.
Brs.

|

Victor SFCASTS Abelardo 5 years ago

Hey AbelardoLG,

Agree, and we did mention it! :) Right in the 2nd paragraph on this page we do say that we recommend to download the course code from *this* page and code along with us ;)

Cheers!

|

Markus R. 5 years ago

Hi guys! I'm really excited about this tutorial! :)
I've got a question: when the page is loading (at 1:54-1:55) then first the layout appears (header & footer from base.html.twig) but the vue just a bit later. I have a feeling that twig is rendering faster than the vue component in this case (it's not waiting for it). Do I think right? Could you tell me what can we do against this issue? Does vue router help solving this?

|

shadowc Markus R. 5 years ago

Hi Gergo!

You are right. Basically the server rendered template will load, and then the Vue application will load and take the space.

Many applications on the internet resort to different loading mechanisms to make the user perceive that something is going on in the background before they can interact with the page. This can be easily done with just some css, where the Vue app can then replace whatever you do in the backgorund with the actual working App.

Hope this helps!

1 |

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
    }
}

Next Chapter