Fullstack Vue: The Complete Guide to Vue.js

625 Pages·2018·10.134 MB·English

by  Hassan Djirdeh, Nate Murray, Ari Lerner

Fullstack Vue
The Complete Guide to Vue.js and Friends
tt
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 transmitted in any form or by any means beyond the number of purchased copies,
except for a single backup or archival copy. The code may be used freely in your projects,
commercial or otherwise.
The 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
BookRevision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
GettheCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
JoinOurDiscordServer! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
BugReports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
BenotifiedofupdatesviaTwitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
We’dlovetohearfromyou! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
HowtoGettheMostOutofThisBook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Vue3.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
RunningCodeExamples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
CodeBlocksandContext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
InstructionforWindowsusers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Liveonlinecommunity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
GettingHelp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
EmailingUs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Getexcited! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
YourfirstVue.jsWebApplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
BuildingUpVote! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Developmentenvironmentsetup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
JavaScriptES6/ES7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Settinguptheview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Makingtheviewdata-driven. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Listrendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Sorting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Eventhandling(ourapp’sfirstinteraction) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
v-bindandv-onshorthandsyntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Congratulations! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Single-filecomponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
CONTENTS
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Settingupourdevelopmentenvironment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Gettingstarted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Single-FileComponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Breakingtheappintocomponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Managingdatabetweencomponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
SimpleStateManagement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
StepstobuildingVueappsfromscratch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Step1:Astaticversionoftheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Step2:Breakingtheappintocomponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Step3:HardcodeInitialStates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Step4:Createstatemutations(andcorrespondingcomponentactions) . . . . . . . . . . . . 76
TheCalendarApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Methodologyreview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
CustomEvents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
JavaScriptCustomEvents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
VueCustomEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
EventBus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Customeventsandmanagingdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
IntroductiontoVuex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
WhatisFlux? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Fluximplementations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Vuex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Refactoringthenote-takingapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
VuexStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Buildingthecomponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
VuexandServers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
TheServerAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
PlayingwiththeAPI. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Clientandserver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Preparingtheapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
TheVuexStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
productModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
cartModule. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Vuexandmediumtolargescaleapplications . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
CONTENTS
Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
FormHandling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Forms101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
TheBasicButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
TextInput . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
MultipleFields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Validations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
AsyncPersistence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Vuex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
FormModules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Whatisrouting? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Single-pageapplications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
BasicVueRouter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
DynamicRouteMatching. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
TheServerAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Startingpointoftheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Integratingvue-router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Supportingauthenticatedroutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Implementinglogin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
VueWatchers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
NavigationGuards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Recapandfurtherreading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
UnitTesting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
End-to-endvs.UnitTesting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Testingtools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
TestingabasicVuecomponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
TestingApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
vue-test-utils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
MoreassertionsforApp.vue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Writingtestsforaweatherapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Furtherreading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
CompositionAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
WhydoneedtheCompositionAPI? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
WhatistheCompositionAPI? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
CONTENTS
Buildingasimplelistingsapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
app/ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
Updating<App /> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Updating<ListingsList /> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Updating<ListingsListItem /> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
Notifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
DarkMode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
TheStore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
WhatisTypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Vue&TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512
AnnotatingProps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557
VueApollo&GraphQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
GraphQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
ConsumingGraphQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
TheGraphQLAPIwe’llbeworkingwith . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
VueApollo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
FullstackVueScreencast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
BuildingSimpleCoinCap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
Agenda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610
UpdateswiththenewAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611
Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
CONTENTS 1
Book Revision
Revision13-2021-02-01
Get the Code
Youcangetthecompletesamplecodeforthebookeither
1. InGumroad¹or
2. Viathisformonourwebsite²
Join Our Discord Server!
We’dlovetohangoutwithyouandchatVue,askquestions,andhelpeachother:https://newline.co/discord/vue³
Bug Reports
Ifyou’dliketoreportanybugs,typos,orsuggestionsjustemailusat:[e-mail].
Forfurtherhelpdealingwithissues,referto“HowtoGettheMostOutofThisBook”.
Be notified of updates via Twitter
Ifyou’dliketobenotifiedofupdatestothebookonTwitter,followusat@fullstackio⁴.
We’d love to hear from you!
Didyoulikethebook?Didyoufindithelpful?We’dlovetoaddyourfacetoourlistoftestimonials
onthewebsite!Emailusat:[e-mail].
¹https://gumroad.com/library
²https://www.newline.co/vue/code
³https://newline.co/discord/vue
⁴https://twitter.com/fullstackio
Foreword
Front-end web development has become astoundingly complex. If you’ve never used a modern
JavaScript framework, building your first app that just displays “Hello” can take a whole week!
That might sound ridiculous, but most frameworks assume knowledge of the terminal, advanced
JavaScript, and tools such as the Node Package Manager (NPM), Babel, Webpack, and sometimes
more.
Vue, refreshingly, doesn’t assume. We call it the “pro-
gressive” JavaScript framework because it scales down
as well as it scales up. If your app is simple, you can
use Vue just like jQuery - by dropping in a <script>
tag. But as your skills and needs grow more advanced,
Vue grows with you to make you more powerful and
productive.
Hassan provides a catalyst for that growth in this
book. Through project-driven learning, he’ll guide you
fromthesimplestexamplesthroughthenecessaryskills
for large-scale, enterprise applications. Along the way,
you’lllearnnotonlyhowtosolveavarietyofproblems
with Vue, but also the concepts and tools that have be-
come industry standards – no matter what framework
ChrisFritz-VueCoreTeam
youuse.
Welcometothecommunity,havefun,andenjoytheVue!
–ChrisFritz,@chrisvfritz⁵,VueCoreTeam
⁵https://twitter.com/chrisvfritz
How to Get the Most Out of This Book
Overview
This book aims to be the single most useful resource on learning Vue.js. By the time you’re done
reading this book, you (and your team) will have everything you need to build reliable, powerful
Vueapplications.
Vueisbuiltonthepremiseofsimplicitybybeingdesignedfromthegrounduptobeincrementally
adoptable.Afterthefirstfewchapters,you’llhaveasolidunderstandingofVue’sfundamentalsand
willbeabletobuildawidearrayofrich,interactivewebappswiththeframework.
But beyond Vue’s core, there are tools and libraries that exist in the Vue ecosystem that’s often
needed to build real-world production scale applications. Things like client-side routing between
pages,managingcomplexstate,andheavyAPIinteractionatscale.
Thisbookcanbebrokendownintothreeparts.
In Part I, we cover all the fundamentals with a progressive, example-driven approach. You’ll first
introduce Vue through a Content Delivery Network (CDN) before moving towards building
within Webpack bundled applications. You’ll gain a grasp of handling user interaction, working
withsingle-filecomponents,understandingsimplestatemanagement,andhowcustomevents
work.
We bookend the first part by introducing Vuex and how Vuex is integrated to manage overall
applicationdataarchitecture.
Part II of this book moves into more intermediate/advanced concepts that you’ll often see used
in large, production applications. We’ll integrate Vuex to a server-persisted app, manage rich
forms,buildamulti-pageappthatusesclient-siderouting,andfinallyexplorehowunittestscan
bewrittenwithVue’sofficialunittestinglibrary.
InPartIIIofthebook,wecoveradvancedtopicswithinVueandtheVueecosystem.We’llinvestigate
how to build reusable component logic with Vue’s Composition API, introduce the concept of
TypeScript and see how it can be used within a Vue app, and finally explore GraphQL and the
VueApollolibraryforintegratingGraphQLtoourVueapplications.
First, know that you do not need to read this book linearly from cover-to-cover. However, we’ve
orderedthecontentsofthebookinawaywefeelfitstheorderyoushouldlearntheconcepts.Some
sectionsinPartIIassumeyou’veacquiredcertainfundamentalconceptsfromPartI.Asaresult,we
encourageyoutolearnalltheconceptsinPartIofthebookfirstbeforedivingintoconceptsinPart
IIandmovingtowardstoPartIII.
HowtoGettheMostOutofThisBook 2
Second, keep in mind this package is more than just a book - it’s a course complete with example
codeforeverychapter.Below,we’lltellyou:
• howtoapproachthecodeexamplesand
• howtogethelpifsomethinggoeswrong
Vue 3.x
InSept.2020⁶,theVueframeworkwasupdatedandreleasedasversion3.0.Vue3.0providesasuite
of changes such as smaller bundle sizes, better TypeScript integration, new APIs for tackling large
scale use cases, and a solid foundation for long-term future iterations of the framework. Vue 3.0
continues to build on concepts that existed in Vue 2.x such as the Virtual DOM, render functions,
andserver-siderenderingcapabilities(i.e.Vue3.0isnot acompleterewriteofVue2.x).Inaddition,
version3.0wasrewrittentoprovidesignificantperformanceimprovementsoverv2.
This book covers, and will always cover, the latest release of Vue - which is currently labelled as
version3.x.
Running Code Examples
Thisbookcomeswithalibraryofrunnablecodeexamples.Thecodeisavailabletodownloadfrom
thesameplacewhereyoupurchasedthisbook.
Ifyouhaveanytroublefindingordownloadingthecodeexamples,[e-mail].
Webpack projects
For Webpack-bundled projects, we use the program npm⁷ to run examples. You can install the
applicationdependencieswith:
npm install
Andbootappswithoneofthefollowingcommands:
npm run start
or
⁶https://github.com/vuejs/vue-next/releases/tag/v3.0.0
⁷https://www.npmjs.com/