Vue.js in Action

by Erik Hanchett, Benjamin Listwon

Overview

Summary
Web pages are rich with data and graphics, and it's challenging to maintain a smooth and quick user experience. Vue.js in Action teaches you how to build a fast, flowing web UI with the Vue.js framework. As you move through the book, you'll put your skills to practice by building a complete web store application with product listings, a checkout process, and an administrative interface.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the technology
Vue.js is a lightweight frontend framework, offering easy two-way data binding, a reactive UI, and a common-sense project structure. It uses UI patterns and modern HTML to deliver impossibly fast page loads and silky smooth transitions—all from a tiny code footprint. It’s a delight to develop in Vue using ordinary JavaScript and its integrated Vuex state management tool.

About the book
Vue.js in Action is your guide to building modern web apps. You’ll start by exploring the reactive UI model while you get comfortable with Vue’s unique features. Then, you’ll go deeper as you build a shopping cart with an admin interface and the ability to manage stock! Finally, you’ll extend your app, adding transitions, tests, and other key features until it’s production ready.

What's inside

Clearly annotated code and illustrations
Modeling data and consuming APIs
Easy state management with Vuex
Creating custom directives

About the reader
Written for web developers with some experience in JavaScript, HTML, and CSS.

About the author
Erik Hanchett and Benjamin Listwon are experienced web engineers and fearless explorers of new ideas.

Product Details

ISBN-13:	9781617294624
Publisher:	Manning
Publication date:	10/07/2018
Edition description:	1st Edition
Pages:	375
Product dimensions:	7.30(w) x 9.20(h) x 0.80(d)

About the Author

Erik Hanchett is a software developer who loves all things JavaScript.

Benjamin Listwon is an experienced designer and developer living in Seattle.

Table of Contents

Foreword ix

Preface x

Acknowledgments xii

About this book xiv

About the author xviii

About the cover illustration xix

Part 1 Getting to Know Vue.Js 1

1 Introducing Vue.js 3

1.1 On the shoulders of giants 4

The Model-View-Controller pattern 4

The Model-View-ViewModel pattern 6

What's a reactive application? 7

A JavaScript calculator 8

A Vue calculator 10

Comparison of JavaScript and Vue 11

How does Vue facilitate MVVM and reactivity? 12

1.2 Why Vue.js? 13

1.3 Future thoughts 14

2 The Vue instance 16

2.1 Our first application 17

The root Vue instance 17

Making sure our application is running 19

Displaying something inside our view 22

Inspecting properties in Vue 23

2.2 The Vue lifecycle 25

Adding lifecycle hooks 26

Exploring the lifecycle code 27

Keeping the lifecycle code, or not 28

2.3 Displaying a product 29

Defining product data 29

Marking up the product view 30

2.4 Applying output filters 33

Write the filter Junction 33

Adding the filter to our markup and testing different values 34

Part 2 The View and ViewModel 37

3 Adding interactivity 39

3.1 Shopping cart data starts with adding an array 40

3.2 Binding to DOM events 41

Event binding basics 41

Bind an event to the Add to cart button 42

3.3 Adding a cart item button and count 44

When to use a computed property 45

Examining update events with computed properties 46

Displaying a cart item count and testing 51

3.4 Adding user affordance to our button 53

Keeping an eye on inventory 53

Working with computed properties and inventory 54

v-show directive basics 55

Using v-if and v-else to display a disabled button 56

Adding the cart item button as a toggle 59

Using v-if to display a checkout page 60

Comparing v-show with v-if/v-else 61

4 Forms and inputs 63

4.1 Using v-model binding 64

4.2 A look at value binding 71

Binding values to our check box 72

Working with value bindings and radio buttons 73

Learning the v-for directive 75

The v-for directive without the optional key 77

4.3 Learning modifiers with the application 78

Using the number modifier 79

Trimming the input values 80

The lazy v-model modifier 81

5 Conditionals, looping, and lists 83

5.1 Show an available inventory message 84

Adding how many are left with v-if 84

Adding more messaging with v-else and v-else-if 86

5.2 Looping our products 88

Adding a star rating with v-for range 88

Binding an HTML class to our star rating 90

Setting up our products 92

Importing products from product.json 94

Refactoring our app with the v-for directive 95

5.3 Sorting records 100

6 Working with components 103

6.1 What are components? 104

Creating components 104

Global registration 105

Local registration 106

6.2 Relationships in components 107

6.3 Using props to pass data 108

Literal props 108

Dynamic props 109

Prop validation 112

6.4 Defining a template component 115

Using inline template strings 115

Text/x-template script elements 116

Using single-file components 117

6.5 Working with custom events 118

Listening to events 118

Modifying child props using .sync 120

7 Advanced components and routing 122

7.1 Working with slots 123

7.2 A look at named slots 126

7.3 Scoped slots 128

7.4 Creating a dynamic components app 130

7.5 Setting up async components 132

7.6 Converting the pet store app using Vue-CLI 134

Creating a new application with Vue-CLI 135

Setting up our routes 137

Adding CSS, Bootstrap, and Axios to our application 138

Setting up our components 139

Creating the Form component 141

Adding the Main component 143

7.7 Routing 145

Adding a product route with parameters 146

Setting up a router-link with tags 149

Setting up a router-link with style 150

Adding a child edit route 152

Using redirection and wildcards 154

8 Transitions and animations 157

8.1 Transitions basics 157

8.2 Animations basics 162

8.3 JavaScript hooks 164

8.4 Transitioning components 167

8.5 Updating the pet store application 170

Adding a transition to the pet store application 170

Adding an animation to the pet store application 171

9 Extending Vue 174

9.1 Reusing functionality with mixins 175

Global mixins 179

9.2 Learning custom directives with examples 180

Global custom directives with modifiers, values, and orgs 183

9.3 Render functions and JSX 185

Bender function example 186

JSX example 189

Part 3 Modeling Data, Consuming APIs, and Testing 195

10 Vuex 197

10.1 Vuex, what is it good for? 198

10.2 Vuex state and mutations 200

10.3 Getters and actions 203

10.4 Adding Vuex to Vue-CLI with the pet store app 206

Vuex installation in Vue-CLI 206

10.5 Vuex helpers 210

10.6 A quick look at modules 212

11 Communicating with a server 215

11.1 Server-side rendering 216

11.2 Introducing Nuxt.js 217

Creating a music search app 218

Creating a project and installing dependencies 220

Creating our building blocks and components 222

Updating the default layout 226

Adding a store using Vuex 226

Using middleware 227

Generating routes using Nuxt.js 228

11.3 Communicating with a server using Firebase and VuexFire 233

Setting up Firebase 234

Setting up our pet store app with Firebase 236

Updating Vuex with authentication state 239

Updating the header component with authentication 240

Updating Main.vue to use Firebase Realtime database 243

12 Testing 246

12.1 Creating test cases 247

12.2 Continuous integration, delivery, and deployment 248

Continuous integration 248

Continuous delivery 249

Continuous deployment 249

12.3 Types of tests 249

12.4 Setting up our environment 250

12.5 Creating our first test case with vue-test-utils 252

12.6 Testing components 256

Testing props 256

Testing text 257

Testing CSS classes 258

Testing with a mocked Vuex 259

12.7 Setting up the Chrome debugger 260

Appendix A Setting up your environment 265

Appendix B Solutions to chapter exercises 271

Index 275