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

12.

HMR: See Changes without Reloading

|

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 Chapter

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

edin 3 years ago edited HIGHLIGHTED

This HMR stuff is great, except when it's not :)

To elaborate: I had a lot of sass warnings when compiling assets like:

Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.*

These warnings were also visible on the website in a full screen modal. Only clicking on a X button top right made it go away.
Luckily you can suppress these sass warnings by adding some options to the sassLoader in webpack.config.js like this:

    .enableSassLoader((options) => {
        options.sassOptions = {
            quietDeps: true,
        };
    })

Just for full info: I did update everything before starting this course with composer update and also some packages in package.json (but that should not be related to the sass warnings)

3 |

Victor SFCASTS edin 3 years ago

Hey Edin,

Thank you for sharing these tips with others! Yeah, HMR is a cool thing... though might cause some problems, so use it at your own risk :)

Cheers!

|

Pablo 3 years ago edited

If you run an external development server with a local domain and webpack-encore keeps outputting "http://localhost:8080" in your header.

Try this:

yarn dev-server --host 0.0.0.0 --hot --disable-host-check --public 'http://[replace-with-your-domain]:8080'

Also works with yarn inside a docker container, but you must expose the container port (-p 8080:8080) and open the firewall.

1 |

Victor SFCASTS Pablo 3 years ago

Hey Pablo,

Thanks for this tip! Yeah, using Symfony built-in web server may be simpler, but for more complex setups you need to do more work.

Cheers!

|

Ruslan 11 months ago

Hi,
Strange thing, if I want to see changes in browser I have to press Ctrl + s (on Windows phpStorm).
May be some thing doesn't work?

BR.

|

Victor SFCASTS Ruslan 10 months ago edited

Hey Ruslan,

Hard to say for sure, I don't use Windows for programming. Probably PhpStorm's auto-saving feature does not work properly on Windows, or it's just disabled in your PhpStorm config. Check the config first, otherwise you may need to manually save every time you do changes in the IDE.

Cheers!

|

Abelardo 3 years ago edited

Hi there!
You wrote: If you use Webpack's dev-server, then as soon as it detects a change, our page automatically reloads. Cool... but not cool enough

But at my webpack configuration it doesn't work. I run yarn watch (yarn dev-server doesn't generate build files).

When I modify a .vue file, I have to hit the browser because it doesn't automatically reload the webpage.

I added these lines inside my Webpack config file but that doesn't work either:

Encore.configureWatchOptions(function(watchOptions) {
  // enable polling and check for changes every 250ms
  // polling is useful when running Encore inside a Virtual Machine
  watchOptions.poll = 250;
});

What's wrong? 🤔

|

weaverryan SFCASTS Abelardo 3 years ago

Hey @Abelardo!

Ok, there are two similar, but not-identical "modes" for Webpack:

A) "watch" mode - this is what you get with yarn watch. This generates physical files into your public/build directory and it automatically rebuilds those files whenever you change one of then. But it doesn't automatically update what you see in the browser: you need to refresh so the browser downloads the new files.

B) "dev server" mode - this is what you get with yarn dev-server. THIS one, if HMR is enabled and can be leveraged by the JS you're writing (which in Vue, it should work) is the one where your browser automatically updates without refreshing. But, the dev-server is a bit strange. As you noticed, it does not generate any build files. That is expected. Instead, Symfony will output your script/link tags to point to something like https://localhost:8080/build/app.js and that localhost:8080 (or whatever the address is, I can't remember the default) is actually a mini "web server" that is run by dev-server that returns your assets. So, no physically files, but your files WILL be downloaded. So if you want HMR, use the "dev server" mode, but don't expect to see any physical files ;).

Cheers!

|

Lloyd L. 5 years ago

Significant changes since webpack-encore 1.0.0 have happened.

* https, is now defined within webpack.config.js
* New in version 1.0.0:Before Encore 1.0, you needed to pass a --hot flag at the command line to enable HMR. You also needed to disable CSS extraction to enable HMR for CSS. That is no longer needed.

see: https://symfony.com/doc/cur...

''' package.json versioning.
"devDependencies": {
"@symfony/stimulus-bridge": "^2.0.0",
"@symfony/webpack-encore": "^1.0.0",
"@vue/compiler-sfc": "^3.0.5",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"sass": "^1.32.7",
"sass-loader": "^11.0.0",
"stimulus": "^2.0.0",
"vue": "^3.0.2",
"vue-loader": "^16.1.0",
"webpack-notifier": "^1.6.0"
},

|

weaverryan SFCASTS Lloyd L. 5 years ago

Hey @Lloyd!

Ah yes! Thanks for mentioning those! I was aware (I wrote those changes!) but I didn’t think of how they would impact this spot if you’re using the latest version. We’ll add a note to help others :).

Cheers!

|

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 Chapter