Vue.js 3 Cookbook: Discover actionable solutions for building modern web apps with the latest Vue features and TypeScript

555 Pages·2020·8.622 MB·English

by  Heitor Ramon Ribeiro

Vue.js 3 Cookbook
Discover actionable solutions for building modern web apps
with the latest Vue features and TypeScript
Heitor Ramon Ribeiro
BIRMINGHAM - MUMBAI
Vue.js 3 Cookbook
Copyright © 2020 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form
or by any means, without the prior written permission of the publisher, except in the case of brief quotations
embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented.
However, the information contained in this book is sold without warranty, either express or implied. Neither the
author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to
have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products
mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy
of this information.
Commissioning Editor: Pavan Ramchandani
Acquisition Editor: Ashitosh Gupta
Content Development Editor: Akhil Nair
Senior Editor: Hayden Edwards
Technical Editor: Deepesh Patel
Copy Editor: Safis Editing
Project Coordinator: Kinjal Bari
Proofreader: Safis Editing
Indexer: Manju Arasan
Production Designer: Nilesh Mohite
First published: September 2020
Production reference: 1180920
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-83882-622-2
www.packt.com
Packt.com
Subscribe to our online digital library for full access to over 7,000 books and videos, as well
as industry leading tools to help you plan your personal development and advance your
career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos
from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Fully searchable for easy access to vital information
Copy and paste, print, and bookmark content
Did you know that Packt offers eBook versions of every book published, with PDF and
ePub files available? You can upgrade to the eBook version at www.packt.com and as a print
book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
[email protected] for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up for a
range of free newsletters, and receive exclusive discounts and offers on Packt books and
eBooks.
Contributors
About the author
Heitor Ramon Ribeiro has been developing web applications for over 15 years, constantly
navigating between frontend and backend development. By following his passion for
UX/UI and programming, he chose to stay in frontend development.
Heitor has built enterprise applications for businesses using Vue.js and the principles of
clean architecture, shifting his course from legacy applications to the new world of single-
page applications (SPAs) and progressive web applications (PWAs). He thinks that
almost anything is possible today with a browser, and that JavaScript is the future of
programming.
When he's not programming or leading a frontend team, he's with his family having fun,
streaming their gaming sessions, or playing some first-person shooter games.
I would like to thanks my lovely wife, Raquel, for being with me every day helping and
supporting me throughout this process of publishing my first book. To my son, Marco,
your father loves you so much and does everything for you. To my family and friends who
helped me during the development of this book, especially Patrick Monteiro, who helped me
a lot.
To all the coworkers and companies that I've worked with over the last few years, who
helped me and understood the importance of this project for me.
About the reviewers
Swanand Kadam is the creator of the first-ever online programming language in Hindi,
built to improve coding literacy in rural India. He is an experienced web application and
PWA architect who has designed and developed e-commerce, employee management, and
custom software solutions to a range of businesses. Swanand is a consistent user of
technologies including Vue.js, Firebase, Node.js, Google Cloud, and NoSQL databases.
Swanand’s articles have been published in top tech publications including Better
Programming and Hackernoon. He is also an editor for InfoQ, where he talks about the
latest trends in the world of software development.
Tyler VanBlargan is a frontend developer, primarily working with Vue.js and helping
others learn about web development. When not working on new applications, Tyler can be
found photographing his pets and playing board games.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com
and apply today. We have worked with thousands of developers and tech professionals,
just like you, to help them share their insight with the global tech community. You can
make a general application, apply for a specific hot topic that we are recruiting an author
for, or submit your own idea.
Table of Contents
Preface 1
Chapter 1: Understanding Vue 3 and Creating Components 8
What is new in Vue 3 8
Improvements to the framework 9
Under the hood 9
Render engine 9
Exposed APIs 10
New custom components 10
Fragments 10
Teleport 11
Suspense 12
API changes 12
Some minor break changes 13
Goodbye filters, hello filters! The Vue filters API 13
The bus just left the station! The event bus API 13
No more global Vue – the mounting API 14
v-model, v-model, v-model – multiple v-model 14
Composition API 16
Technical requirements 17
Creating the base file 18
Upgrading your Vue 2 application to Vue 3 18
Getting ready 19
How to do it... 19
Using Vue-CLI to upgrade the project 19
Upgrading the project manually 20
Changing the starting files 21
How it works... 23
Creating components with multiple root elements 23
How to do it... 24
Creating the component with the <template> structure 24
Creating the component with the render function 25
How it works... 27
Creating components with attribute inheritance 28
How to do it... 28
How it works... 30
Using the reactivity and observable API outside the scope of Vue 31
How to do it... 31
How it works... 33
Creating a component using the composition API 34
How to do it... 35
How it works... 39
Table of Contents
See also 39
Chapter 2: Introducing TypeScript and the Vue Ecosystem 40
Technical requirements 41
Creating a TypeScript project 41
Getting ready 42
How to do it... 42
How it works... 43
See also 44
Understanding TypeScript 44
Getting ready 44
Types 45
String 45
Number 46
Boolean 46
Arrays 46
Tuple 47
Enum 47
Any 48
Void 48
Objects 48
Functions 49
Interfaces 50
Decorators 51
In conclusion 52
See also 53
Creating your first TypeScript class 53
Getting ready 53
How to do it... 54
How it works... 56
There's more... 56
See also 56
Creating your first project with Vue CLI 57
Getting ready 57
How to do it... 58
There's more... 60
See also 60
Adding plugins to a Vue CLI project with Vue UI 61
Getting ready 61
How to do it... 61
How it works... 65
Adding TypeScript to a Vue CLI project 65
Getting ready 65
How to do it... 65
How it works... 67
See also 68
[ ii ]
Table of Contents
Creating your first TypeScript Vue component with vue-class-
component 68
Getting ready 68
How to do it... 69
How it works... 71
See also 71
Creating a custom mixin with vue-class-component 71
Getting ready 71
How to do it... 72
Creating the Counter component 72
Extracting similar code for the mixin 74
How it works... 75
See also 76
Creating a custom function decorator with vue-class-component 76
Getting ready 76
How to do it... 76
How it works... 79
There's more... 79
See also 79
Adding custom hooks to vue-class-component 79
Getting ready 80
How to do it... 80
How it works... 83
See also 84
Adding vue-property-decorator to vue-class-component 84
Getting ready 84
How to do it... 85
How it works... 89
There's more... 89
See also 89
Chapter 3: Data Binding, Form Validations, Events, and Computed
Properties 90
Technical requirements 91
Creating the "hello world" component 91
Getting ready 91
How to do it... 92
How it works... 96
See also 96
Creating an input form with two-way data binding 97
Getting ready 97
How to do it... 97
How it works... 99
See also 100
Adding an event listener to an element 100
[ iii ]
Table of Contents
Getting ready 100
How to do it... 100
How it works... 103
See also 103
Removing the v-model from the input 103
Getting ready 104
How to do it... 104
How it works... 105
See also 105
Creating a dynamic to-do list 105
Getting ready 106
How to do it... 106
How it works... 109
See also 109
Creating computed properties and understanding how they work 110
Getting ready 110
How to do it... 110
How it works... 112
See also 112
Displaying cleaner data and text with custom filters 113
Getting ready 113
How to do it... 113
How it works... 116
See also 117
Adding form validation with Vuelidate 117
Getting ready 117
How to do it... 117
How it works... 121
See also 122
Creating filters and sorters for a list 122
Getting ready 122
How to do it... 122
How it works... 126
See also 126
Creating conditional filters to sort list data 127
Getting ready 127
How to do it... 127
How it works... 132
See also 132
Adding custom styles and transitions 132
Getting ready 133
How to do it... 133
How it works... 136
See also 137
Using vue-devtools to debug your application 137
[ iv ]