Vue.js 2 Design Patterns and Best Practices by Halliday, Paul -- Read -- Imperial Library of Trantor

Index

Title Page Copyright and Credits

Vue.js 2 Design Patterns and Best Practices

Packt Upsell

Why subscribe? PacktPub.com

Contributors

About the author About the reviewer Packt is searching for authors like you

Preface

Who this book is for What this book covers To get the most out of this book

Download the example code files Download the color images Conventions used

Get in touch

Reviews

Vue.js Principles and Comparisons

Prerequisites

Windows Mac

Installing Node via Homebrew

Editor Browser

Installing the Vue devtools

Vue CLI

How Vue.js compares

React Angular Mobile development Server-Side Rendering (SSR) Conclusion

Summary

Proper Creation of Vue Projects

Visual Studio Code extensions

Vetur Vue 2 Snippets

Vue CLI

JavaScript modules

Vue-loader

Loading modules without Webpack

VueJS devtools TypeScript and Vue

Lifecycle hooks Properties Computed

RxJS and Vue

What is RxJS?

Integrating with Vue

Summary Proxying

How 'this' works within JavaScript How Vue handles 'this'

Data properties Computed properties Watched properties Lifecycle hooks Vue.js and the Virtual DOM

DOM Virtual DOM

Summary

Writing Clean and Lean Code with Vue

Proxying

How 'this' works within JavaScript How Vue handles 'this'

Data properties Computed properties Watched properties Lifecycle hooks Vue.js and the Virtual DOM

DOM Virtual DOM

Summary

Vue.js Directives

Model Iteration with v-for Bindings

Adding secondary properties Style bindings

DOM events and v-on

Key modifiers Event modifiers

Conditionally showing DOM elements

v-show v-if v-else v-else-if

Filters

Locally registered filters Globally registered filters

Summary

Secured Communication with Vue.js Components

Your first Vue component

Registering components globally Scoped styles Registering a component locally

Component communication

Configuring property values Custom events Sending event values

Event Bus Slots

Defaults Named slots

Summary

Creating Better UI

Animations CSS animations

Animate.css

Using Animate.css

Transitions

Transition states

Form validation

What is Vuelidate? Using Vuelidate

Displaying form errors Password validation Form submission

Render/functional components

Rendering elements

Attributes Components and props JSX

Summary

HTTP and WebSocket Communication

HTTP

Installing JSON server HTTP GET HTTP POST HTTP PUT HTTP DELETE

Real-time chat application with Node and Socket.io

What is Socket.io? Server setup Client connections

Setting up Vue and Socket.io

Determining connection status

Creating a connection status bar

Navigation bar Message list Adding messages to the list

Server-side events with Socket.io

Nodemon

Summary

Vue Router Patterns

Single Page Applications Using the router

Creating routes Dynamic routes

Route props

Component Navigation Guards

beforeRouteUpdate beforeRouteEnter beforeRouteLeave

Global router hooks

beforeEach beforeResolve afterEach Resolution stack

Programmatic navigation

router.replace router.go

Lazy loading routes

An SPA project

Enabling the router Defining routes Creating the UserList route Getting data from an API Creating a detail page Child routes

Summary

State Management with Vuex

What is Vuex?

State Management Pattern (SMP) Thinking about state

Using Vuex

Creating a new store Defining action types Actions Mutations Getters Combining elements Payloads

Vuex and Vue devtools Modules and scalability Summary

Testing Vue.js Applications

Why testing? Unit testing

Setting up vue-test-utils Creating a TodoList Writing tests Vue options Adding new features Click events Testing events

Using Wallaby.js for a better testing experience Summary

Optimization

Progressive Web Applications (PWAs)

Web application manifest Testing on a device

Firebase deployment Continuous Integration (CI)

Unit tests Creating a Git repository Connecting to Travis CI

Configuring Travis

Automatic deployment to Firebase

Service worker Summary

Server-Side Rendering with Nuxt

Nuxt

Creating a Nuxt project Directory structure Nuxt configuration Navigation

Navigating between routes

Layouts The Mock REST API asyncData Categories Category detail Error page Plugins Adding recipes Transitions Building for production

Static SPA mode

Summary

Patterns

Components

Communication – Anti-pattern

What can we change about this to make it better?

Children mutating props – Anti-pattern

What should we do instead? Mutating property arrays

Using data as an object - Anti-Pattern Naming components – Anti-pattern Template expressions Pattern – Container/Presentational components Prop validation Understanding reactivity

Summary

← Prev
Back
Next →

← Prev
Back
Next →