Preface

This book will cover the use of Vue.js 2. Vue can be used as both a frontend framework by including a JS file and also a backend framework with Node.js. The book was written using the frontend version of the framework—although it will be pointed out that it could easily be ported to using the node version if required, as the fundamentals of the framework remain the same in the two versions.

Vue is a framework that can be used for simple data display and creating full-blown web apps. This book will try and cover both ends of the spectrum while introducing plugins and add-ons to help with the creation of the bigger apps.

The use of Vue components will also be covered, including the benefits of using them over keeping all your data and methods contained within the main Vue instance. The book will also cover using the two most popular plugins for Vue: Vuex and Vue-Router. This book will not cover the process of styling the applications.

Vuex is a centralized state management pattern and library for Vue. It makes storing, manipulating, and accessing data a lot more manageable and is great for use with an app that requires a lot of data to be displayed. Vue-Router is used to handle navigation through the app, allowing different components to load depending on the URL.

Starting with a JSON dataset, the first part of the book will cover Vue objects and how to utilize each one. This will be covered by exploring different ways of displaying data from a JSON dataset. We will then move on to manipulating the data with filters and search and creating dynamic values.

Once complete, we will look at loading your data dynamically through an API—the example being the Dropbox API. Once the data is loaded, the book will walk through navigating through the folders while updating the URL and creating a download link for the files. We will then load in Vuex, and look at storing the data of each folder moving onto pre-caching the folders, making navigating through the app a lot quicker.

Lastly, we will look at creating an e-commerce frontend using the skills learned during previous projects while introducing new ones. Firstly, the products will be displayed in a list; using filters and search, you will be able to click on a product to find out more information and to add it to your basket. When ready, the "customer" will be able to view their basket and update items and quantities and finally check out.