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!

If you use Webpack's dev-server, then as soon as it detects a change, our page automatically reloads. Cool... but not cool enough! Find your terminal, hit Control + C to stop Encore, then re-run the dev server with a --hot option.

Tip

If you're using Webpack Encore 1.0 or higher, you do not need to pass the --hot flag: it's already, automatically, enabled.

yarn dev-server --hot

That stands for hot module replacement. Once that finishes... I'll move over and reload the page one time just to be safe.

Let's do the same trick: add two exclamation points, then quick! Go back to the browser! Woh! It's there... but I didn't even see it reload! And no matter how fast you are, you'll see the update but you'll never see a page refresh: it's just not happening anymore! How cool is that? Webpack is able to dynamically update the JavaScript without reloading. It even keeps any Vue data the same.

This hot module replacement thing doesn't work with all JavaScript, but it does work well with Vue and React.

Disabling CSS Extraction

But... there's one tiny problem. Don't worry it's not a big deal. Back in our editor, at the bottom, let's make a CSS change: I'm pretty sure a designer just told me that the hover background should be pink.

This time, back on the browser, hmm: the style did not update. But if we refresh, it is there. HMR isn't working for styles.

This is easy to fix by disabling a feature in Encore. Let me show you. Open up webpack.config.js and go all the way to the bottom so we can use an if statement. Here, say if not Encore.isProduction() - a nice flag to see if we're building our assets for production or not - then Encore.disableCssExtraction().

            Copy Code

                            Show All Lines

                        97 lines
            |
            webpack.config.js
        
                Show Lines

                                                    // ... lines 1 - 91
                            
            if (!Encore.isProduction()) {
        
                Encore.disableCssExtraction();
        
            }
        
                Show Lines

                                                    // ... lines 95 - 97

CSS extraction means that any CSS that Webpack finds should be extracted into an external CSS file. That's why a products.css file is being output. When you disable CSS extraction, it tells Webpack not to do this anymore. Instead, it embeds the CSS into the JavaScript. Then, when the JavaScript loads, it adds the CSS as style tags on the page.

I'll explain that a bit more in a minute... but let's see how our page changes first. Because we updated our Webpack config, at your terminal, stop Encore and restart it:

yarn dev-server --hot

Now, refresh the page. Did you see that? It looks the same, but it was unstyled for just a second. If you view the HTML source, there are no CSS link tags anymore. The CSS is being added by our JavaScript files. And because it takes a moment for those to load, our page looks ugly for an instant.

Two important things about this. First, disabling CSS extraction should only ever be done in dev mode: you always want real CSS files on production. And second, the only reason we're going to all the trouble of disabling CSS extraction at all, is because hot module replacement only works when it's disabled. Hopefully, someday, that won't be the case... and we won't need to do this.

The end result is pretty sweet though. Our hover links are still pink but now let's change them to green. And... yes! You could see it change from pink to green almost instantly. If we remove the extra background entirely... that time it was faster than me!

I'm going to do the rest of the tutorial using the dev-server with hot module replacement because I love it! But it did require some work - like using http:// or getting the ssl certificate setup and disabling CSS extraction.

Your situation may require even more work. If it does, consider using yarn watch instead. The dev-server is supposed to make your life easier. If it doesn't leave it behind.

Next, let's really start organizing our app - and making it more realistic - by splitting our code into several new components.

8 Comments

Sort By

edin 2 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 | Reply |

Victor SFCASTS edin 2 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!

| Reply |

Pablo 1 year 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 | Reply |

Victor SFCASTS Pablo 1 year 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!

| Reply |

Abelardo 2 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? 🤔

| Reply |

weaverryan SFCASTS Abelardo 2 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!

| Reply |

Lloyd L. 3 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"
},

| Reply |

weaverryan SFCASTS Lloyd L. 3 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!

| Reply |

This course is also built to work with Vue 3!

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

HMR: See Changes without Reloading

Share this awesome video!

Keep on Learning!

Disabling CSS Extraction

8 Comments

Delete comment?

What JavaScript libraries does this tutorial use?

Show Lines	// ... lines 1 - 91
	if (!Encore.isProduction()) {
	Encore.disableCssExtraction();
	}
Show Lines	// ... lines 95 - 97