Book Image

Vue.js 2 Cookbook

By : Andrea Passaglia
Book Image

Vue.js 2 Cookbook

By: Andrea Passaglia

Overview of this book

Vue.js is an open source JavaScript library for building modern, interactive web applications. With a rapidly growing community and a strong ecosystem, Vue.js makes developing complex single page applications a breeze. Its component-based approach, intuitive API, blazing fast core, and compact size make Vue.js a great solution to craft your next front-end application. From basic to advanced recipes, this book arms you with practical solutions to common tasks when building an application using Vue. We start off by exploring the fundamentals of Vue.js: its reactivity system, data-binding syntax, and component-based architecture through practical examples. After that, we delve into integrating Webpack and Babel to enhance your development workflow using single file components. Finally, we take an in-depth look at Vuex for state management and Vue Router to route in your single page applications, and integrate a variety of technologies ranging from Node.js to Electron, and Socket.io to Firebase and HorizonDB. This book will provide you with the best practices as determined by the Vue.js community.
Table of Contents (19 chapters)
Title Page
Credits
About the Author
About the Reviewer
www.PacktPub.com
Customer Feedback
Dedication
Preface

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:

new Vue({ 
  el: '#app', 
  methods: { 
    vueSubmit() { 
      console.info('fake AJAX request') 
    } 
  } 
})

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

data: { 
 userId: 1, 
 title: '', 
 body: '', 
 response: '...'
}

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

npm install axios

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"

Note

Warnings or important notes appear in a box like this.

Note

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 [email protected], 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:

  1. Log in or register to our website using your e-mail address and password.
  2. Hover the mouse pointer on the SUPPORT tab at the top.
  3. Click on Code Downloads & Errata.
  4. Enter the name of the book in the Search box.
  5. Select the book for which you're looking to download the code files.
  6. Choose from the drop-down menu where you purchased this book from.
  7. 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 doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.