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

Extracting logic from your components to

keep the code tidy

Vue components can become very complex sometimes. In these cases, it's better to split

them up and try to hide some complexity with abstraction. The best place to put such
complexity is external JavaScript files. This way you have the added benefit that, if

necessary, it's easier to share the extracted logic with additional components.

Getting ready

This recipe is of intermediate level. Before coming here, you know how to set up a project
with npm.

Also, ensure that you have the vue-cli package installed globally with the following

command:

npm install -g vue-cli

How to do it...

We will build a calculator for compound interest; you will discover how much money you

will have after an initial investment.

Creating a clean Webpack project

Create a new directory and a new Vue project inside it with the following command:

vue init webpack

You can choose the default values for the questions asked.

Run npm install to install all the required dependencies.