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!
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.
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.
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.
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:
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.
This section usually consists of a detailed explanation of what happened in the previous section.
This section consists of additional information about the recipe in order to make the reader more knowledgeable about the recipe.
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
"
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.
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.
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!
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 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.
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.