About this book

Before you dive into learning how to make Vue.js applications, let’s talk about a few things you should know first.

In this book we’ll look at everything you need to know to become proficient in Vue.js. The goal of the book is to get you the knowledge you need so you can jump into any Vue.js application without hesitation.

While doing research for this book, I heard repeatedly that the official Vue.js guides were the best resource for learning Vue.js. While the official guides are great, and I highly recommend you check them out as additional references while you learn Vue.js, they don’t cover everything, and they’re not perfect. As I wrote the book, I took it upon myself to go beyond what the official guides covered. I made the examples more understandable and relatable, so you could more easily adapt the concepts to your own projects. Where I thought a topic was beyond the scope of the book, or not important enough, I added a reference where you can learn more about it inside the official guides.

This book can be used in a couple of different ways. You can read it from front to back. In that instance, you’ll get the full breadth of what Vue.js has to offer. Or you can use this book as a reference manual to look up whatever concept you need more information on. Either way is acceptable and fine.

Later in the book we’ll transition to creating Vue.js apps using a build system. Don’t worry, I’ve included instructions on how to get started with a Vue.js build tool called Vue-CLI in appendix A. One of the most important benefits of Vue-CLI is that it helps us create more complex Vue.js applications without having to worry about building or transpiling our code.

Throughout the book we’ll create a Vue.js pet store application. Certain chapters use the pet store example more than others. I did this on purpose, so you could easily learn a concept without having to learn how it works with the pet store app. But people who prefer to learn with a real application still have that option.

Audience

This book is for anyone who’s interested in learning Vue.js and has JavaScript, HTML, and CSS experience. I don’t expect you to have much knowledge on this but knowing the basics, such as arrays, variables, loops, and HTML tags will help. As for CSS, we’ll use Bootstrap 3, a CSS library. However, you don’t need to know anything about Bootstrap to follow along with the examples. It’s only there to help with styling.

Early in the book, I introduce the example code using ECMAScript 2015, otherwise known as ES6. It would be a good idea to look it over before you start this book. For the most part, I use only a few ES6 features, such as arrow functions and ES6 imports. I’ll warn you in the book when we make this transition.

Roadmap

The book is broken into three parts, each building upon the previous one. Part 1 is keyed toward getting to know Vue.js. In chapters 1 and 2 we’ll create our first Vue.js application. We’ll look at what a Vue.js instance is and how it relates to our application.

In part 2, chapters 3–9, we’ll look more closely at the View and ViewModel. In this section we dive into several of the meatiest parts of Vue.js. Part 1 is more of an appetizer to Vue.js, while part 2 is the main course. You’ll learn the intricacies of how to create a Vue.js application. We’ll begin by learning the reactive model, and we’ll create a pet store application that we’ll use throughout the rest of the book.

We’ll add in forms and inputs and how to bind information using Vue.js’s powerful directives, then look at conditionals, looping, and forms.

Chapters 6 and 7 are extremely important. We’ll learn how to break a Vue.js app into several logical parts using components, and we’ll have a first look at the build tools you’ll need to create Vue.js apps.

Chapter 7 also covers routing. In earlier chapters, we use simple conditionals to navigate our application. With the addition of routing, we can properly move around our application and pass information between routes.

Chapter 8 introduces you to the powerful animations and transitions you can perform using Vue.js. These features are baked into the language and are nice features you should check out.

In chapter 9 we’ll learn how to use mixins and custom directives to easily extend Vue without repeating ourselves.

Part 3 is all about modeling data, consuming APIs, and testing. In chapters 10 and 11, we begin with a deep dive into Vue’s state management system called Vuex. We’ll then look at how we can start communicating to a backend server, and we’ll learn more about Nuxt.js, a server-side rendered framework.

Chapter 12 is dedicated to testing. In any professional environment, you’ll need to know testing, and we’ll look at the essentials you must know.

Book Forum

Purchase of Vue.js in Action includes free access to a private web forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the author and from other users. To access the forum, go to https://forums.manning.com/forums/vue-js-in-action. You can also learn more about Manning’s forums and the rules of conduct at https://forums.manning.com/forums/about.

Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the author can take place. It is not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the author some challenging questions lest his interest stray! The forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.

Source code

This book contains many examples of source code, both in numbered listings and inline with normal text. In both cases, source code is formatted in a fixed-width font like this to separate it from ordinary text. Sometimes boldface is used to highlight code that has changed from previous steps in the chapter, such as when a new feature is added to an existing line of code.

In many cases, the original source code has been reformatted; we’ve added line breaks and reworked indentation to accommodate the available page space in the book. In rare cases, even this was not enough, and listings include line-continuation markers (). Additionally, comments in the source code have often been removed from the listings when the code is described in the text. Code annotations accompany many of the listings, highlighting important concepts.

The source code for this book is available to download from the publisher’s website (www.manning.com/books/vue-js-in-action) and from my personal GitHub repository (https://github.com/ErikCH/VuejsInActionCode). You can also find more instructions on downloading the code and setting up your programming environment in appendix A.

While going through the book, you’ll notice I often split the source code into separate files. I’ve included both the completed file and the separated files in each chapter with the source code, so you can follow along. If you find a bug in the code, feel free to send over a pull request to my GitHub. I’ll maintain the repo, and I’ll leave a comment in the readme with any updates.

Software requirements

To make things easy, all the code in this book will work on any modern browser. I’ve tested it personally on Firefox 58, Chrome 65, and Microsoft Edge 15. I wouldn’t recommend trying to run any of my apps on older browsers, because you’ll certainly run into problems. Vue.js itself doesn’t support IE8 and below. It must have a ECMAScript 5 compliant browser.

In several of the earlier chapters, I use a few ES6 features. You’ll need to have a modern web browser to run those examples.

The pet store app we’ll create throughout the book will work on a mobile browser. However, the pet store application isn’t optimized for mobile, so I recommend you run the examples on a desktop computer.

You don’t have to worry about your operating system. If the web browser runs, you should be fine. There are really no other requirements.

Online resources

As I mentioned earlier, the Vue.js official guides are great to use as references while you’re working the examples in the book. You can find the guides at https://vuejs.org/v2/guide/. They’re continually being updated.

There’s a curated list of awesome things related to Vue.js on the GitHub page https://github.com/vuejs/awesome-vue. Here, you can find links to Vue.js podcasts, additional Vue.js resources, third-party libraries, and even companies that use Vue.js. I highly recommend checking it out.

The Vue.js community is huge and is continuously growing. One of the best places to talk to other Vue.js developers is the official Vue.js forum at https://forum.vuejs.org/. Here you can discuss or get help on anything Vue.

If you’re looking for more video tutorials, my channel, http://erik.video on YouTube, covers a ton of information on Vue.js and JavaScript in general. Check it out!

More info?

In this 300-page book I cover a large amount of material. Please, don’t hesitate to reach out to me, the author, if you’re getting stuck, or you need help. If I can’t help you, I’ll at least point you in the right direction. Don’t be shy. You’ll find those of us in the Vue.js community are approachable to beginners.

Also, as you go through the book, try to take several of the concepts you learn and implement them yourself. One of the best ways of learning is doing. For example, instead of following along with the pet store app, try to create your own ecommerce site. Use the book as guide rails to make sure you don’t get stuck.

One last thing: have fun. Be creative and make something cool. Make sure to hit me up on twitter @ErikCH if you do!