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 should have completed the Choosing a development environment recipe in Chapter 1, Getting Started with Vue.js, and should 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...