Fullstack Vue
The Complete Guide to Vue.js and Friends
Wri!en by Hassan Djirdeh, Nate Murray, and Ari Lerner
© 2018 Fullstack.io
All rights reserved. No portion of the book manuscript may be reproduced, stored in a retrieval
system, or transmi!ed in any form or by any means beyond the number of purchased copies,
except for a single backup or archival copy. "e code may be used freely in your projects,
commercial or otherwise.
"e authors and publisher have taken care in preparation of this book, but make no expressed
or implied warranty of any kind and assume no responsibility for errors or omissions. No
liability is assumed for incidental or consequential damagers in connection with or arising out
of the use of the information or programs container herein.
Published in San Francisco, California by Fullstack.io.
FULLSTACK
.io
Contents
Book Revision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Bug Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Be notified of updates via Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
We’d love to hear from you! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
How to Get the Most Out of This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Vue 2.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Running Code Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Code Blocks and Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Instruction for Windows users . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Emailing Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Get excited! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
I - Your first Vue.js Web Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Building UpVote! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Development environment setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
JavaScript ES6/ES7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Setting up the view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Making the view data-driven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
List rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Sorting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Event handling (our app’s first interaction) . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
v-bind and v-on shorthand syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Congratulations! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
II - Single-file components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Setting up our development environment . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
CONTENTS
Single-File Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Breaking the app into components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Managing data between components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Simple State Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Steps to building Vue apps from scratch . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Step 1: A static version of the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Step 2: Breaking the app into components . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Step 3: Hardcode Initial States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Step 4: Create state mutations (and corresponding component actions) . . . . . . . . . . 76
The Calendar App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Methodology review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
III - Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
JavaScript Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Vue Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Event Bus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Custom events and managing data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
IV - Introduction to Vuex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
What is Flux? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Flux implementations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Vuex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Refactoring the note-taking app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Vuex Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Building the components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
V - Vuex and Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
The Server API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Playing with the API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Client and server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Preparing the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
The Vuex Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
productModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
cartModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Vuex and medium to large scale applications . . . . . . . . . . . . . . . . . . . . . . . . 203
Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
CONTENTS
VI - Form Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Forms 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
The Basic Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Text Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Multiple Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Validations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Async Persistence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Vuex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Form Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
VII - Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
What is routing? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Single-page applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Basic Vue Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Dynamic Route Matching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
The Server API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Starting point of the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Integrating vue-router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Supporting authenticated routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Implementing login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Vue watch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Navigation Guards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Recap and further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
VIII - Unit Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
End-to-end vs. Unit Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Testing tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Testing a basic Vue component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Testing App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
vue-test-utils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
More assertions for App.vue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Writing tests for a weather app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
