Understanding Hot Module Replacement in Vue

HMR has become a sort of a buzzword in the past couple of years. What's the big deal? In this section, we'll discuss how HMR works.

To do that, we'll build another default simple app, just like we did in Chapter 1, Introducing Vue CLI 3, as follows:

vue create -d second-default-app

After a while, once it's done, we'll go into our app's directory as follows:

cd second-default-app

Let's open the project's folder in VS Code as follows:

code .

Now, we can see the entire contents of our second-default-project.

Now, we can serve the app as follows:

npm run serve

Of course, our app is now serving in our browser.

Let's look at HMR updates happening in real time.