Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Organize + Automate + Deploy = Webpack Chapter 16

Clicking on the plus button will make the counter go up, but what about the style of this

application? Let's make it more attractive.

Open your code editor and the window side by side and make the following modifications

to SwearJar.vue:

<template>

<div>

<p>Swears: {{counter}} $$</p>

<button @click="addSwear">Add Swear</button>

</div>

</template>

Save the file, and you will see the page updating itself. Even better, the state will be

retained if the counter was already set above zero, and this means that if you have a
complex component you don't have to bring it manually into the same state again after each

modification. Try to set the swear count to some number and edit the template. Most of the
time, the counter will not get reset to zero.

How it works...

The Webpack dev server is very helpful software that lets you develop with a very tight

feedback loop. We used plenty of arguments to make it run:

webpack-dev-server --output-path / --inline --hot --open

All these parameters are the same inside the webpack.config.js. Instead, we are putting

these parameters in the command line for convenience. The --output-path is where the

Webpack server will serve bundle.js; in our case, we said that we want it served at the

root path, so it will effectively bind the /bundle.js path to the actual bundle.js file.

The second parameter, --inline, will inject some JavaScript code in our browser so that

our app can communicate with the Webpack dev server.

The --hot parameter will activate the Hot Module Replacement plugin, which will

communicate with the vue-loader (actually with the vue-hot-reload-api, which is

inside it) and will either restart or rerender (preserving the state) each Vue model inside the

page.

Finally, --open just opens the default browser for us.