Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Vue.js 2 Design Patterns and Best Practices

You're reading from   Vue.js 2 Design Patterns and Best Practices Build enterprise-ready, modular Vue.js applications with Vuex and Nuxt

Arrow left icon
Product type Paperback
Published in Mar 2018
Publisher Packt
ISBN-13 9781788839792
Length 344 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Paul Halliday Paul Halliday
Author Profile Icon Paul Halliday
Paul Halliday
Arrow right icon
View More author details
Toc

Table of Contents (14) Chapters Close

Preface 1. Vue.js Principles and Comparisons FREE CHAPTER 2. Proper Creation of Vue Projects 3. Writing Clean and Lean Code with Vue 4. Vue.js Directives 5. Secured Communication with Vue.js Components 6. Creating Better UI 7. HTTP and WebSocket Communication 8. Vue Router Patterns 9. State Management with Vuex 10. Testing Vue.js Applications 11. Optimization 12. Server-Side Rendering with Nuxt 13. Patterns

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.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime