Vue.js 2 Cookbook

By Andrea Passaglia

About This Book

• Understand and use Vue’s reactivity system, data binding, and computed properties
• Create fluid transitions in your application with Vue’s built-in transition system
• Use Vuex and Webpack to build medium-to-large scale SPAs and enhance your development workflow

Who This Book Is For

This book is for developers who want to learn about Vue.js through practical examples to quickly and efficiently build modern, interactive web applications. Prior experience and familiarity with JavaScript, HTML, and CSS are recommended as the recipes build upon that knowledge. It will also enable both new and existing Vue.js users to expand their knowledge of the framework.

• Language: English
• Publisher: Packt Publishing
• Release date: Apr 28, 2017
• ISBN: 9781786465061

Book preview

Title Page

Vue.js 2 Cookbook

Build modern, interactive web applications with Vue.js

Andrea Passaglia

BIRMINGHAM - MUMBAI

Vue.js 2 Cookbook

Copyright © 2017 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2017

Production reference: 1200417

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham 

B3 2PB, UK.

ISBN 978-1-78646-809-3

www.packtpub.com

Credits

About the Author

Andrea Passaglia was born in Genoa, in northern Italy. Interested about technology since his parents gave him a toy computer when he was a boy, he started studying web technologies at an early age. After obtaining his master's degree in computer engineering he worked on the design and implementation of web interfaces for companies of various sizes and in different industries (healthcare, fashion, tourism, and transport).

In 2016 he moves in the silicon valley of Europe to tackle new problems in the banking industry at the Edgeverve Dublin Research and Development Labs.

A backend technologist by trade, Vue.js is his first tool to bring to life his creations when it comes to the frontend.

Andrea is married to a lovely Russian girl from Siberia and they often cook together mixing culinary traditions.

I would like to thank Packt for giving me the opportunity to write this book--Narendra Tripathi, Smeet Thakkar, Siddharth Mandal, and the whole team for being so professional and supporting. A big thank you to Bogdan Bâlc for his attention to detail, and all the people that helped me with reviewing the book; I'm talking to Alesya Kholodova, Eamon McNamee, and Yomi Eluande. Thank you guys for your practical suggestions and useful additions to the book.

Support from my colleagues at the lab was invaluable, to you guys goes my gratitude for always asking How's the book going? It really meant a lot to me.

Thanks to my wife for constantly pushing me to write every day and everywhere; thanks to my family for your love and support.

About the Reviewer

Bogdan is a team lead with a passion for frontend technologies. He has worked on JavaScript for the past 8 years, from the emergence of jQuery and Ajax to modern full-fledged MVC frameworks. When he is not fiddling with some new JavaScript challenge, he spends his time playing sports and games with friends, and watching sports and movies.

Nowadays he channels most of his efforts into making WE3 Interactive one of the most successful and creative startups in Cluj.

He is so passionate about Vue.js that he has already helped publish another awesome book written by Olga Filipova: Learning Vue.js.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [e-mail] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www.packtpub.com/mapt

Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Customer Feedback

Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/1786468093.

If you'd like to join our team of regular reviewers, you can e-mail us at [e-mail]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!

Dedication

Con amore infinito, tuo figlio Andrea

Table of Contents

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

Getting Started with Vue.js

Introduction

Writing Hello World with Vue.js

Getting Ready

How to do it...

How it works...

There's more

Writing lists

Getting Ready

How to do it...

Range of numbers

Arrays

Arrays with index notation

Objects

How it works...

Range of numbers

Arrays

Objects

Creating a dynamic and animated list

Getting Ready

How to do it...

How it works...

There's more

Reacting to events such as clicks and keystrokes

Getting Ready

How to do it...

How it works...

Two-way data binding

There's more

Choosing a development environment

How to do it...

Just the browser

Adding dependencies with just the browser

TextEditor

Adding dependencies with a TextEditor

Node package manager (npm)

Adding dependencies with npm

IDE

Wrap up

Formatting your text with filters

Getting Ready

How to do it...

How it works...

Debugging your application with mustaches (for example, a JSON filter)

How to do it...

How it works...

X-raying your application with Vue developer tools

Getting Ready

How to do it...

Upgrading to Vue.js 2

How to do it...

How it works...

Deprecation of $broadcast, $dispatch, and the events option

Deprecation of array filters

Deprecation of Vue.config.delimiters

Renaming of life cycle hooks

Basic Vue.js Features

Introduction

Learning how to use computed properties

Getting ready

How to do it...

There's more...

Caching computed properties

Computed setters

Filtering a list with a computed property

Getting ready

How to do it...

How it works...

There's more...

Sorting a list with a computed property

Getting ready

How to do it...

How it works...

There's more...

Formatting currencies with filters

Getting ready

How to do it...

How it works...

There's more...

Formatting dates with filters

Getting ready

How to do it...

Displaying and hiding an element conditionally

Getting ready

How to do it...

How it works...

Adding styles conditionally

How to do it...

How it works...

Adding some fun to your app with CSS transitions

Getting ready

How to do it...

How it works...

There's more...

Outputting raw HTML

Getting ready

How to do it...

How it works...

There's more...

Creating a form with checkboxes

Getting ready

How to do it...

How it works...

There's more...

Creating a form with radio buttons

Getting ready

How to do it...

How it works...

There's more...

Creating a form with a select element

Getting ready

How to do it...

How it works...

There's more...

Transitions and Animations

Introduction

Integrating with third-party CSS animation libraries such as animate.css

Getting ready

How to do it...

How does it work...

Adding your own transition classes

Getting ready

How to do it...

How it works...

Animating with JavaScript instead of CSS

Getting ready

How to do it...

How it works...

There's more...

Transitioning on the initial render

Getting ready

How to do it...

How it works...

Transitioning between elements

Getting ready

How to do it...

How it works...

There's more...

Transitioning between more than two elements

Setting the key attribute dynamically

Letting an element leave before the enter phase in a transition

Getting ready

How to do it...

The two elements problem

Transition modes

How it works...

Adding entering and leaving transitions for elements of a list

Getting ready

How to do it...

How it works...

Transitioning elements that move in a list

Getting ready

How to do it...

How it works...

Animating the state of your components

Getting ready

How to do it...

How it works...

Packaging reusable transitions into components

Getting ready

How to do it...

Building the basic web page

Building the reusable transition

Using our transition with the elements in our page

How it works...

Dynamic transitions

Getting ready

How to do it...

How it works...

All About Components

Introduction

Creating and registering a component

Getting ready

How to do it...

How it works...

Scope of components

The render function

Passing data to your components with props

Getting ready

How to do it...

How it works...

Kebab case and camel case

There's more

Making components talk to each other

Getting ready

How to do it...

How it works...

Making components talk with Vuex

Getting ready

How to do it...

How it works...

There’s more

Reading a child's state

Getting ready

How to do it...

How it works...

Using ref with v-for

Using components in your own components

Getting ready

How to do it...

How it works...

Using mixins in your components

Getting ready

How to do it...

How it works...

Mixin order

There’s more

Content distribution with slots

Getting ready

How to do it...

How it works...

There’s more

Named slots

Scoped slots

Single file components with Webpack

Getting ready

How do do it...

How it works...

There’s more

Loading your components asynchronously

Getting ready

How to do it...

How it works...

Having recursive components

Getting ready

How to do it...

How it works...

Recursive component and local registration

Avoiding a stack overflows!

Reusable component checklist

Getting ready

How to do it...

How it works...

Vue Communicates with the Internet

Introduction

Sending basic AJAX requests with Axios

Getting ready

How to do it...

How it works...

Validating user data before sending it

Getting ready

How to do it...

How it works...

Creating a form and sending data to your server

Getting ready

How to do it...

How it works...

There's more...

Recovering from an error during a request

Getting ready

How to do it...

How it works...

Creating a REST client (and server!)

Getting ready

How to do it...

How it works...

Implementing infinite scrolling

Getting ready

How to do it...

How it works...

Processing a request before sending it out

Getting ready

How to do it...

How it works...

Preventing XSS attacks to your app

Getting ready

How to do it...

How it works...

Single Page Applications

Introduction

Creating an SPA with vue-router

Getting ready

How to do it…

How it works…

There's more…

Fetching data before switching route

Getting ready

How to do it…

How it works…

Using named dynamic routes

Getting ready

How to do it…

How it works…

Having more than one router-view in your page

Getting ready

How to do it…

How it works…

Compose your routes hierarchically

Getting ready

How to do it...

How it works…

Using route aliases

Getting ready

How to do it…

How it works…

Adding transitions between your routes

Getting ready

How to do it…

How it works…

Managing errors for your routes

Getting ready

How to do it…

How it works…

Adding a progress bar to load pages

Getting ready

How to do it…

How it works…

How to redirect to another route

Getting ready

How to do it…

How it works…

There's more…

Redirecting to 404s

Named redirecting

Redirecting with parameters

Dynamic redirecting

Saving scrolling position when hitting back

Getting ready

How to do it…

How it works…

Unit Testing and End-to-End Testing

Introduction

Using Jasmine for testing Vue

Getting ready

How to do it...

How it works...

There's more...

Adding some Karma to your workflow

Getting ready

How to do it...

How it works...

There's more...

Testing your application state and methods

Getting ready

How to do it...

How it works...

Testing the DOM

Getting ready

How to do it...

How it works...

Testing DOM asynchronous updates

Getting ready

How to do it...

How it works...

End-to-end testing with nightwatch

Getting ready

How to do it...

How it works...

Simulating a double-click in nightwatch

Getting ready

How it works...

How it works...

Different styles of unit testing

Getting ready

How to do it...

How it works...

Stubbing external API calls with Sinon.JS

Getting ready

How to do it...

How it works...

Measuring the coverage of your code

Getting ready

How to do it...

How it works...

Organize + Automate + Deploy = Webpack

Introduction

Extracting logic from your components to keep the code tidy

Getting ready

How to do it...

Creating a clean Webpack project

Building the compound interest calculator

How it works...

Bundling your component with Webpack

Getting ready

How to do it...

How it works...

There's more...

Organizing your dependencies with Webpack

Getting ready

How to do it...

How it works...

Using external components in your Webpack project

Getting ready

How to do it...

How it works...

Developing with continuous feedback with hot reloading

Getting ready

How to do it...

How it works...

Using Babel to compile from ES6

Getting ready

How to do it...

How it works...

Running a code linter while developing

Getting ready

How to do it...

How it works...

Using only one command to build both a minified and a development .js file

Getting ready

How to do it…

How it works...

Releasing your components to the public

Getting ready

How to do it...

How it works...

Advanced Vue.js – Directives, Plugins, and Render Functions

Introduction

Creating a new directive

Getting ready

How to do it...

How it works…

Using WebSockets in Vue

Getting ready

How to do it...

How it works...

Writing a plugin for Vue

Getting ready

How to do it...

How it works...

Rendering a simple component manually

Getting ready

How to do it...

How it works...

Rendering a component with children

Getting ready

How to do it...

How it works...

Using JSX to render a component

Getting ready

How to do it...

How it works...

There's more...

Creating a functional component

Getting ready

How to do it...

How it works...

Building a responsive table with higher-order components

Getting ready

How to do it...

How it works...

Large Application Patterns with Vuex

Introduction

Dynamically loading pages in your vue-router

Getting ready

How to do it...

How it works...

There's more...

Building a simple storage for the application state

Getting ready

How to do it...

How it works...

Understanding Vuex mutations

Getting ready

How to do it...

How it works...

There's more...

Listing your actions in Vuex

Getting ready

How to do it...

How it works...

Separating concerns with modules

Getting ready

How to do it...

How it works...

Building getters to help retrieve your data

Getting ready

How to do it...

How it works...

Accessing other getters

Passing an argument

Testing your store

Getting ready

How to do it...

Software requirements

Testing mutations

Testing actions

How it works...

Integrating with Other Frameworks

Introduction

Building universal applications with Electron

Getting ready

How to do it...

How it works...

Using Vue with Firebase

Getting ready

How to do it...

How it works...

Creating a real-time app with Feathers

Getting ready

How to do it...

How it works...

Creating a reactive app with Horizon

Getting ready

How to do it...

How it works...

Preface

Vue.js 2 is a minimal but powerful framework. It will empower you to quickly prototype small applications, and it won't get in the way when structuring large frontend systems. This is a cookbook and every paragraph is a recipe; just as with a regular cookbook, you can quickly skip to the recipe that interests you or read it cover to cover to become a great chef.

All the recipes (except a handful) represent working Vue apps, so at the end of the exercise you are never left empty handed. When I wrote them, I tried to give meaningful examples and sprinkle some fun where possible. All the recipes are slightly different when it comes to doing the same thing, so that you will learn something new even when implementing very similar recipes.

This book took about 6 months to write, and even in this short amount of time I had to go back and update pictures and the API that changed, as well as add new concepts. Still, many recipes are imbued with the everlasting concepts of reusability and good engineering, so I like to think that some parts of this will remain with you, the reader, as useful techniques to reuse in your apps.

Finally, while I made sure to complement every chapter with plenty of picture to illustrate the desired output, I think it is paramount for you to actually type and try out the recipes while learning.

Have fun building great things!

What this book covers

Chapter 1, Getting Started, is where you create your first Vue application and get familiar with the most common features and development tools.

Chapter 2, Basic Vue.js Features, is where you effortlessly build lists and  forms, and learn how to style them.

Chapter 3, Transitions and Animations, where you learn how transitions and animations work to bring more life to your apps. You will also integrate with external CSS libraries.

Chapter 4, Components!, is where you realize everything in Vue is a component and you can exploit this to reduce duplication and reuse your code.

Chapter 5, Communicate with the Internet, is where you make your first AJAX call and create forms and a full fledged REST client (and server!).

Chapter 6, Single Page Applications, is where you use vue-router to create static and dynamic routes to create a modern SPA.

Chapter 7, Unit Testing and End-To-End Testing, is where you learn to create professional software by adding Karma, Chai, Moka, Sinon.JS, and nightwatch to make sure you can refactor your app with confidence.

Chapter 8, Organize + Automate + Deploy = Webpack, is where you actually publish your accurately crafted components to npm and learn how Webpack and Vue play together in the process.

Chapter 9, Advanced Vue.js, is where you explore directives, plugins, functional components, and JSX.

Chapter 10, Large Application Patterns with Vuex, is where you structure your application with tested patterns using Vuex to make sure your apps are maintainable and performant.

Chapter 11, Integrating with External Frameworks, is where you build four different applications with Vue and Electron, Firebase, Feathers, and Horizon.

What you need for this book

To follow along with this book, you'll need a computer with an Internet connection. You can choose to work online on Chrome to complete the recipes. At some point, you will need at least a text editor; I highly recommend Microsoft Visual Studio Code for this job.

Who this book is for

This book has been tested on people who didn’t even know JavaScript. They were able to pick up Vue by reading the first chapter! Going forward, you will find concepts that are more and more advanced and, even if you are familiar with Vue 2, you will probably find some trick you didn't know about or some wise suggestion that will help you along the way.

This book, if followed from cover to cover, will turn you into a proficient Vue developer. On the other hand, if you already are, it provides a good reference for many different features and techniques that may come in handy from time to time. Finally, this book is also a valid migration guide if you have already experimented with Vue 1 and you feel overwhelmed by change.

Sections

In this book, you will find several headings that appear frequently (Getting ready, How to do it, How it works, There's more, and See also).

To give clear instructions on how to complete a recipe, we use these sections as follows:

Getting ready

This section tells you what to expect in the recipe, and describes how to set up any software or any preliminary settings required for the recipe.

How to do it…

This section contains the steps required to follow the recipe.

How it works…

This section usually consists of a detailed explanation of what happened in the previous section.

There's more…

This section consists of additional information about the recipe in order to make the reader more knowledgeable about the recipe.

See also

This section provides helpful links to other useful information for the recipe.

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: I'm going to update the ChasePlayerComponent class that already exists in the EngineTest project.

A block of code is set as follows:

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

Any command-line input or output is written as follows:

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: Open Webstorm and create a new Empty Project

Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail [e-mail], and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

Log in or register to our website using your e-mail address and password.

Hover the mouse pointer on the SUPPORT tab at the top.

Click on Code Downloads & Errata.

Enter the name of the book in the Search box.

Select the book for which you're looking to download the code files.

Choose from the drop-down menu where you purchased this book from.

Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR / 7-Zip for Windows

Zipeg / iZip / UnRarX for Mac

7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Vuejs-2-Cookbook. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books--maybe a mistake in the text or the code--we would be grateful if you could report this to us. By