What this book covers
Chapter 1, Vue.js Principles and Comparisons, introduces the readers to Vue.js and motivates them to use it as a framework to create web applications. The reader will gain an understanding of the differences between Vue.js in comparison to other popular frameworks, such as React and Angular.
Chapter 2, Proper Creation of Vue Projects, looks at the appropriate way to create a Vue project. This includes the use of Webpack, Babel/TypeScript (for ES6), .vue files, linting, and more.
Chapter 3, Writing Clean and Lean Code with Vue, takes a deeper look at the Vue.js instance and different reserved properties, such as data, computed, and watch, as well as creating getters and setters. This chapter especially considers when to use computed properties and when to use watched properties. It also outlines why templates should be kept especially lean for easier maintenance.
Chapter 4, Vue.js Directives, introduces the fact that the developers have access to a powerful set of directives, such as v-for, v-if, v-model, and others when writing reactive Vue applications. This chapter looks at each directive in detail, as well as best practices and patterns. Furthermore, the reader is introduced to using shorthand syntax for event binding.
Chapter 5, Secured Communication with Vue.js Components, takes a more advanced look at Vue components, with a look at component communication. We’ll take a look at passing properties, as well as validating for prop types and considering the different types of properties and data flows.
Chapter 6, Creating Better UI, focuses on the common UI patterns of Vue. It takes another look at how v-model can be used to gain input from the user, along with a glance at binding to inputs such as text, checkbox, radio buttons, and so on. It also looks at drop-down and dynamic inputs. Finally, the chapter covers form submission and various modifiers, such as lazy binding, number typecasting, and string trimming.
Chapter 7, HTTP and WebSocket Communication, covers the best practices for integrating HTTP into Vue.js applications. It takes a look at Axios and a variety of methods for sending HTTP requests (that is, root instance/component/ nav guards). This chapter also takes a look at using socket.io, along with the creation of a basic Node/ Express API for real-time integration.
Chapter 8, Vue Router Patterns, describes how routing is a vitally important part of any SPA. This chapter focuses on the Vue route and looks at routing a user between multiple pages. It goes through everything from matching paths and components to dynamic matching with navigation parameters, regular expressions, and more.
Chapter 9, State Management with Vuex, demonstrates state management with Vuex. It starts by looking at the Flux architecture and unidirectional data flow. Then, it takes a look at Vuex, a state management system for Vue. The chapter also looks at implementing this in an application, as well as common pitfalls and usage patterns. It goes on to the Vue-devtools to capture actions and Vue instance data.
Chapter 10, Testing Vue.js Applications, demonstrates that testing is a vital part of any project, regardless of the framework or language. This chapter looks at testing our application and how to write testable code. We'll then look at testing our application with Jasmine and Karma, as well as testing our Vuex code when testing mutations.
Chapter 11, Optimization, outlines deploying a Vue application and any potential performance optimizations. It then looks at converting an application to a Progressive Web App (PWA) and adding ServiceWorkers, offline support, and more. It also looks at ways in which the overall bundle size can be reduced, and at performance wins with SVG.
Chapter 12, Server-Side Rendering with Nuxt, showcases using Nuxt to create Vue applications that are server-side rendered. The project will be created by using the Vue CLI, and we’ll look at everything from configuration to routing, middleware, and testing Nuxt, all the way through to deployment.
Chapter 13, Patterns, assists the reader with common anti-patterns and allows them to avoid these principles when writing Vue.js applications. A style guide is proposed, as well as key issues such as the use of $parent, $ref coupling issues, inline expressions, and others.