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

/* eslint-disable no-new */

new Vue({

el: '#app',

template: `

<div>

This is a <Shaker>test</Shaker>

</div>

`,

components: { Shaker }

})

This will create a sample page as shown in the following screenshot, in which we can

prototype our component with hot-reloading. Launch it by running the
following command:

npm run dev

Placing the cursor over the word test should make it shake.

Now, we would like to package this component in a single JavaScript file that can be reused

in the future.

There is no configuration present for this in the default template, but it's easy enough to

add one.

First of all, you have to do some hammering in the webpack.prod.js file inside the build

folder.