Learning Vue Core Concepts and Practical Patterns for Reusable, Composable, Scalable User Interfaces (Maya Shavin) (Z-Library)

Maya Shavin Learning Vue Core Concepts and Practical Patterns for Reusable, Composable, and Scalable User Interfaces

JAVA SCRIPT “Maya proves to be a wonderful teacher, guiding the reader with engaging examples and expert knowledge.” —Edward Wong @arkangelofkaos “Embark on a journey to build modern, scalable Vue applications with state-of-art libraries and tools. Learning Vue is a 360-degree guide, offering in-depth knowledge and hands-on examples with component-based architecture, reactive data management, useful animations, and comprehensive testing strategies.” —Lipi Deepaakshi Patnaik Senior Software Developer, Zeta-Directi Learning Vue Twitter: @oreillymedia linkedin.com/company/oreilly-media youtube.com/oreillymedia Learn the core concepts of Vue.js, the modern JavaScript framework for building frontend applications and interfaces from scratch. With concise, practical, and clear examples, this book takes web developers step-by-step through the tools and libraries in the Vue.js ecosystem and shows them how to create complete applications for real-world web projects. You’ll learn how to handle data communication between components with Pinia architecture, develop a manageable routing system for a frontend project to control the application flow, and produce basic animation effects to create a better user experience. This book also shows you how to: • Create reusable and lightweight component systems using Vue.js • Bring reactivity to your existing static application • Set up a project using Vite.js, a build tool for frontend project code management • Build an interactive state management system for a frontend application with Pinia • Connect external data from the server to your Vue application • Control the application flow with static and dynamic routing using Vue Router • Fully test your application using Vitest and Playwright Maya Shavin, Senior Software Engineer at Microsoft, specializes in web and frontend development with Vue, TypeScript, and React. She’s passionate about good UX/UI practices, web accessibility, and web development. 9 7 8 1 4 9 2 0 9 8 8 2 9 5 6 5 9 9 US $65.99 CAN $82.99 ISBN: 978-1-492-09882-9

Maya Shavin Learning Vue Core Concepts and Practical Patterns for Reusable, Composable, and Scalable User Interfaces Boston Farnham Sebastopol TokyoBeijing

978-1-492-09882-9 [LSI] Learning Vue by Maya Shavin Copyright © 2024 Maya Shavin. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com. Acquisitions Editor: Amanda Quinn Development Editor: Michele Cronin Production Editor: Ashley Stussy Copyeditor: Piper Editorial Consulting, LLC Proofreader: Liz Wheeler Indexer: Potomac Indexing, LLC Interior Designer: David Futato Cover Designer: Karen Montgomery Illustrator: Kate Dullea December 2023: First Edition Revision History for the First Edition 2023-12-01: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781492098829 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Learning Vue, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. The views expressed in this work are those of the author and do not represent the publisher’s views. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.

Table of Contents Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix 1. Welcome to the Vue.js World!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 What Is Vue.js? 1 The Benefits of Vue in Modern Web Development 2 Installing Node.js 3 NPM 4 Yarn 5 Vue Developer Tools 6 Vite.js as a Builder Management Tool 9 Create a New Vue Application 9 File Repository Structure 11 Summary 12 2. How Vue Works: The Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Virtual DOM Under the Hood 13 The Layout Update Problem 14 What Is Virtual DOM? 15 How Virtual DOM Works in Vue 16 The Vue App Instance and Options API 18 Exploring the Options API 19 The Template Syntax 21 Creating Local State with Data Properties 22 How Reactivity in Vue Works 24 Two-Way Binding with v-model 26 Using v-model.lazy Modifier 30 Binding Reactive Data and Passing Props Data with v-bind 31 iii

Binding to Class and Style Attributes 33 Iterating over Data Collection Using v-for 35 Iterating Through Object Properties 38 Make the Element Binding Unique with Key Attribute 39 Adding Event Listener to Elements with v-on 40 Handling Events with v-on Event Modifiers 42 Detecting Keyboard Events with Key Code Modifiers 45 Conditional Rendering Elements with v-if, v-else, and v-else-if 46 Conditional Displaying Elements with v-show 49 Dynamically Displaying HTML Code with v-html 50 Displaying Text Content with v-text 51 Optimizing Renders with v-once and v-memo 51 Registering a Component Globally 54 Summary 55 3. Composing Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Vue Single File Component Structure 57 Using defineComponent() for TypeScript Support 60 Component Lifecycle Hooks 61 setup 63 beforeCreate 66 created 66 beforeMount 66 mounted 67 beforeUpdate 67 updated 67 beforeUnmount 67 unmounted 67 Methods 72 Computed Properties 75 Watchers 77 Observing for Changes in Nested Properties 79 Using the this.$watch() Method 82 The Power of Slots 83 Using Named Slots with Template Tag and v-slot Attribute 87 Understanding Refs 91 Sharing Component Configuration with Mixins 93 Scoped Styling Components 97 Applying CSS to a Child Component in Scoped Styles 101 Applying Scoped Styles to Slot Content 101 iv | Table of Contents

Accessing a Component’s Data Value in Style Tag with v-bind() Pseudo-Class 102 Styling Components with CSS Modules 103 Summary 105 4. Interactions Between Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Nested Components and Data Flow in Vue 107 Using Props to Pass Data to Child Components 108 Declaring Prop Types with Validation and Default Values 111 Declaring Props with Custom Type Checking 113 Declaring Props Using defineProps() and withDefaults() 116 Communication Between Components with Custom Events 117 Defining Custom Events Using defineEmits() 121 Communicate Between Components with provide/inject Pattern 123 Using provide to Pass Data 123 Using inject to Receive Data 124 Teleport API 125 Implementing a Modal with Teleport and the <dialog> Element 127 Rendering Problem Using Teleport 134 Summary 136 5. Composition API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Setting Up Components with Composition API 137 Handling Data with ref() and reactive() 138 Using ref() 138 Using reactive() 143 Using the Lifecycle Hooks 146 Understanding Watchers in Composition API 148 Using computed() 151 Creating Your Reusable Composables 154 Summary 158 6. Incorporating External Data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 What Is Axios? 159 Installing Axios 160 Load Data with Lifecycle Hooks and Axios 160 Async Data Requests in Run-Time: the Challenge 165 Creating Your Reusable Fetch Component 167 Connect Your Application with an External Database 170 Summary 172 Table of Contents | v

7. Advanced Rendering, Dynamic Components, and Plugin Composition. . . . . . . . . . . . . 173 The Render Function and JSX 173 Using the Render Function 174 Using the h Function to Create a VNode 175 Writing JavaScript XML in the Render Function 176 Functional Component 178 Defining Props and Emits for Functional Component 179 Adding Custom Functionality Globally with Vue Plugins 179 Dynamic Rendering with the <component> Tag 182 Keeping Component Instance Alive with <keep-alive> 183 Summary 185 8. Routing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 What is Routing? 187 Using Vue Router 188 Installing Vue Router 189 Defining Routes 191 Creating a Router Instance 193 Plugging the Router Instance Into the Vue Application 195 Rendering the Current Page with the RouterView Component 195 Build a Navigation Bar with the RouterLink Component 197 Passing Data Between Routes 199 Decoupling Route Parameters Using Props 203 Understanding Navigation Guards 204 Global Navigation Guards 204 Route-Level Navigation Guards 205 Component-Level Router Guards 207 Creating Nesting Routes 208 Creating Dynamic Routes 211 Going Back and Forward with the Router Instance 214 Handling Unknown Routes 215 Summary 216 9. State Management with Pinia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Understanding State Management in Vue 217 Understanding Pinia 219 Creating a Pizzas Store for Pizza House 220 Creating a Cart Store for Pizza House 224 Using the Cart Store in a Component 226 Adding Items to the Cart from the Pizzas Gallery 227 vi | Table of Contents

Displaying Cart Items with Actions 229 Removing Items from the Cart Store 233 Unit Testing Pinia Stores 235 Subscribing Side Effects on Store Changes 236 Summary 238 10. Transitioning and Animation in Vue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Understanding CSS Transitions and CSS Animations 239 Transition Component in Vue.js 240 Using Custom Transition Class Attributes 244 Adding Transition Effect on the Initial Render with appear 245 Building Transition for a Group of Elements 246 Creating Route Transitions 248 Using Transition Events to Control Animation 248 Summary 250 11. Testing in Vue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Introduction to Unit Testing and E2E Testing 251 Vitest as a Unit Testing Tool 253 Configuring Vitest Using Parameters and Config File 254 Writing Your First Test 256 Testing Non-Lifecycle Composables 261 Testing Composables with Lifecycle Hook 264 Testing Components Using Vue Test Utils 268 Testing Interaction and Events of a Component 272 Using Vitest with a GUI 273 Using Vitest with a Coverage Runner 275 End-to-End Testing with PlaywrightJS 280 Debugging E2E Tests Using Playwright Test Extension for VSCode 287 Summary 288 12. Continuous Integration/Continuous Deployment of Vue.Js Applications. . . . . . . . . . . 289 CI/CD in Software Development 289 Continuous Integration 290 Continuous Delivery 290 Continuous Deployment 290 CI/CD Pipeline with GitHub Actions 290 Continuous Deployment with Netlify 295 Deploying with Netlify CLI 298 Summary 298 Table of Contents | vii

13. Server-Side Rendering with Vue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Client-Side Rendering in Vue 299 Server-Side Rendering (SSR) 300 Server-Side Rendering with Nuxt.Js 306 Static Side Generator (SSG) 314 Last Words 315 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 viii | Table of Contents

Preface The JavaScript framework plays a significant role in modern web frontend develop‐ ment. When developing web projects, companies choose a framework for various reasons, including the quality of the final product, the cost of development, coding standard, and ease of development. Hence, learning to work with a JavaScript frame‐ work, such as Vue, is essential for any modern web developer (or frontend developer or full stack developer). This book is for programmers who want to learn and develop Web applications using Vue library, in JavaScript and TypeScript, from end to end. It focuses solely on how Vue and its ecosystem can help you build scalable and interactive web applications in the most straightforward and comfortable direction. While covering the basics, we will also get into Vue Router and Pinia for state management, testing, animation, deployment, and server-side rendering, making sure you are ready to move on and start developing complex Vue projects right away. It’s OK if you are not familiar with Vue or the concept of Virtual DOM. This book doesn’t assume any prior knowledge of Vue or any similar framework. I will introduce and guide you through all Vue’s basics from scratch. I will also walk you through the Virtual DOM concept and reactivity system in Vue in Chapter 2, as the foundation for the rest of the book. This book doesn’t require you to know TypeScript, though you will be better prepared if you are familiar with TypeScript basics. You will also be better prepared for the contents of the book if you have prior basic knowledge of HTML, CSS, and Java‐ Script. A solid foundation of these three is always crucial before diving to any web (or frontend) Javascript framework. Conventions Used in This Book The following typographical conventions are used in this book: ix

Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program ele‐ ments such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values deter‐ mined by context. This element signifies a tip or suggestion. This element signifies a general note. This element indicates a warning or caution. Using Code Examples Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/mayashavin/learning-vue-app. If you have a technical question or a problem using the code examples, please send email to bookquestions@oreilly.com. This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing examples from O’Reilly books does require permission. Answering a question by citing this book and quoting x | Preface

example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission. We appreciate, but generally do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Learning Vue by Maya Shavin (O’Reilly). Copyright 2024 Maya Shavin, 978-1-492-09882-9.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com. O’Reilly Online Learning For more than 40 years, O’Reilly Media has provided technol‐ ogy and business training, knowledge, and insight to help companies succeed. Our unique network of experts and innovators share their knowledge and expertise through books, articles, and our online learning platform. O’Reilly’s online learning platform gives you on-demand access to live training courses, in-depth learning paths, interactive coding environments, and a vast collection of text and video from O’Reilly and 200+ other publishers. For more information, visit http://oreilly.com. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-889-8969 (in the United States or Canada) 707-829-7019 (international or local) 707-829-0104 (fax) support@oreilly.com https://www.oreilly.com/about/contact.html We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at https://oreil.ly/learning-vue-1e. For news and information about our books and courses, visit https://oreilly.com. Find us on LinkedIn: https://linkedin.com/company/oreilly-media Preface | xi

Follow us on Twitter: https://twitter.com/oreillymedia Watch us on YouTube: https://youtube.com/oreillymedia Acknowledgments As I embarked on the journey of writing this book, my family was navigating a tumultuous period, full of highs and lows. Despite enjoying every moment, writing this book required a lot of time, effort, and dedication, and I wouldn’t be able to com‐ mit to it without the support from my family, particularly my husband, Natan. His encouragement, belief in my programming skills, humor about frontend develop‐ ment, parenting our children during my work travels, lending an ear to my daily grievances, and helping me balance work with personal life have been invaluable. Without Natan, I would not be where I am today. Just as quality code demands thorough review, this book’s excellence owes much to critical technical insights and encouragement from Jakub Andrzejewski, Chris Fritz, Lipi Patnaik, Edward Wong, and Vishwesh Ravi Shrimali. Your valuable feedback has been pivotal in sharpening my focus and elevating the quality of this work. My heartfelt appreciation goes to my O’Reilly team: Zan McQuade and Amanda Quinn, for guiding me through the acquisition process of Learning Vue, and to my exceptional editor, Michele Cronin. Michele, your insightful feedback, professional‐ ism, and empathy, particularly during the challenging final stages of the book, were extraordinary. The production editing skills of Ashley Stussy and the copyediting expertise of Beth Richards were crucial in elevating my manuscript to production quality. This book wouldn’t have materialized as envisioned without your collective efforts. I extend a special thank you to the Vue core team for developing such a great frame‐ work and ecosystem, and to the Vue community members and friends for their sup‐ port and inspiration. The knowledge and insights I gained from you are immeasurable and continue to enrich me daily. Finally, my profound gratitude to you, the readers. Choosing this book from the ple‐ thora of resources available, including countless videos and tutorials, demonstrates a trust in my work that I deeply appreciate. I hope Learning Vue serves as a valuable tool in your journey, whether you aspire to be a web, frontend, or full-stack developer. Thank you, from the bottom of my heart. And remember, in the world of web devel‐ opment, always “react with a Vue.” xii | Preface

CHAPTER 1 Welcome to the Vue.js World! Initially released in 2014, Vue.js has experienced rapid adoption, especially in 2018. Vue is a popular framework within the developer community, thanks to its ease of use and flexibility. If you are looking for a great tool to build and ship excellent perform‐ ant web applications to end users, Vue.js is the answer. This chapter highlights the core concepts of Vue.js and walks you through the tools you need for your Vue.js development environment. It also explores helpful tools that make your Vue.js development process more manageable. By the end of the chapter, you will have a working environment with a simple Vue.js application ready to start your journey in learning Vue.js. What Is Vue.js? Vue.js, or Vue, means view in French; it is a JavaScript engine for building progres‐ sive, composable, and reactive user interfaces (UI) in frontend applications. We will use the term Vue to indicate Vue.js from this point on. Vue is written on top of JavaScript and offers an organized mechanism to structure and build a web application. It also acts as the trans-compiler (transpiler) that com‐ piles and translates Vue code (as a Single File Component, which we will discuss fur‐ ther in “Vue Single File Component Structure” on page 57) into equivalent HTML, CSS, and JavaScript code in build time before deploying. In a standalone mode (with 1

1 The MVC pattern helps implement an application by separating its structure into the UI (View), the data (Model), and the controlling logic (Controller). While the View and the Controller can be two-way binding, only the Controller manipulates the Model. a generated script file), the Vue engine performs the code translation at run-time instead. Vue follows the MVVM (Model–View–ViewModel) pattern. Unlike MVC (Model– View–Controller),1 the ViewModel is the binder that binds data between the View and Model. Allowing direct communication for the view and model progressively enables the component’s reactivity. In short, Vue was created to focus only on the View layer but is incrementally adapta‐ ble to integrate with other external libraries for more complex usage. Since Vue focuses solely on the View layer, it empowers the development of single- page applications (SPAs). SPAs can move quickly and fluidly while communicating data continuously with the backend. The official website for Vue includes API documentation, installation, and primary use cases for reference. The Benefits of Vue in Modern Web Development A significant advantage of Vue is its well-written, easy-to-understand documentation. In addition, the ecosystem and supporting community built around Vue, such as Vue Router, Vuex, and Pinia, helps developers set up and run their projects with mini‐ mum effort. Vue APIs are straightforward and familiar to anyone who has worked with AngularJS or jQuery before. Its powerful template syntax minimizes the learning effort required and makes it easier to work with data or listen to Document Object Model (DOM) events in your application. Another significant benefit Vue offers is its size. The size of a framework is a substan‐ tial aspect of the application’s performance, especially the initial loading time on delivery. At the time of writing, Vue stands as the fastest and most lightweight frame‐ work (~10kB in size). This advantage results in less time-consuming downloading and better run-time performance from a browser perspective. With the release of Vue 3, the built-in support for TypeScript now offers developers the benefit of typing in types and making their codebase more readable, organized, and maintainable in the long term. 2 | Chapter 1: Welcome to the Vue.js World!

Installing Node.js Working with Vue requires setting up the development ecosystem and prior coding knowledge to keep up with the learning process. Node.js and NPM (or Yarn) are nec‐ essary development tools to install before you start working on any application. Node.js (or Node) is an open source JavaScript server environment built on Chrome’s V8 JavaScript run-time engine. Node allows developers to code and run JavaScript applications locally or in a hosted server, outside a browser. Chromium-based browsers like Chrome and Edge also use the V8 engine to interpret JavaScript code into efficient low-level com‐ puter code and execute it. Node is cross-platform supported and easy to install. If you are not sure you installed Node, open your terminal (or command prompt in Windows) and run the following command: node -v The output should be a Node version or “Command not found” if Node is not installed. If you haven’t installed Node, or your Node version is lower than 12.2.0, please visit the Node project website and download the installer for the latest version based on your operation system (Figure 1-1). Once the download finishes, click on the installer and follow the instructions to set it up. When installing Node, besides the node command, you also have the npm command added to the command-line tool. If you type the node -v command, you should see the installed version number displayed. Installing Node.js | 3

Figure 1-1. Latest version for download in Node’s official website NPM The Node Package Manager (NPM) is the default package manager for Node. It will be installed together with Node.js by default. It lets developers download and install other remote Node packages with ease. Vue and other frontend frameworks are examples of helpful Node packages. NPM is a powerful tool for developing complex JavaScript applications, with the abil‐ ity to create and run task scripts (to start a local development server, for instance) and automatically download project package dependencies. Similar to the Node version check, you can perform an NPM version check through the npm command: npm -v To update your NPM version, use the following command: npm install npm@latest -g 4 | Chapter 1: Welcome to the Vue.js World!

2 These are commonly known as NPM packages. 3 Facebook has been known as Meta since 2021. With parameter @latest, your current NPM tool automatically updates its version to the latest version. You can run npm -v again to ensure it is updated correctly. You can also replace the latest word to target any specific NPM version (in the format xx.x.x). Additionally, you need to indicate the installation at the global scope with the -g flag for the npm command to be available everywhere on your local machine. For example, if you run the command npm install npm@6.13.4 -g, the tool will tar‐ get the NPM package version 6.13.4 for installing and updating. NPM Version for This Book I recommend installing NPM version 7.x to be able to follow all the NPM code examples in this book. A Node project depends on a collection of Node packages2 (or dependencies) to be up and running. In the package.json file within the project directory, you can find these installed packages. This package.json file also describes the project, including the name, author(s), and other scripting commands applied to the project exclusively. When you run the command npm install (or npm i) within the project folder, NPM will refer to this file and install all the listed packages into a folder called node_mod‐ ules, ready for the project to use. Also, it will add a package-lock.json file to keep track of the package installed version and compatibility between common dependencies. To start a project from scratch with dependencies, use the following command within the project directory: npm init This command walks you through some questions related to the project and initial‐ izes an empty project with a package.json file containing your answers. You can search for any public open source packages at the NPM official website. Yarn If NPM is the standard package manager tool, then Yarn is an alternative and popular package manager developed by Facebook.3 Yarn is faster, more secure, and more reli‐ able due to its parallel downloading and caching mechanism. It is compatible with all NPM packages; thus it can be used as a drop-in replacement for NPM. Installing Node.js | 5

You can install the latest version of Yarn based on your operating system by visiting the Yarn official website. If you are working on a macOS computer and have Homebrew installed, you can install Yarn directly using the command: brew install yarn This command installs Yarn and Node.js (if not available) globally. You can also install Yarn globally using the NPM package management tool with the following command: npm i -g yarn You should now have Yarn installed on your machine and ready to use. To check if Yarn is installed and to verify its version, use the following command: yarn -v To add a new package, use the following command: yarn add <node package name> To install the dependencies for a project, instead of npm install, you only need to run the yarn command within the project directory. Once this finishes, similar to NPM, Yarn will also add a yarn.lock file in your project directory. We will use Yarn as our package manager tool for the code presen‐ ted in this book. At this point, you have set up your essential coding environment for Vue develop‐ ment. In the next section, we’ll look at the Vue Developer Tools and what they offer us in working with Vue. Vue Developer Tools Vue Developer Tools (or Vue Devtools) are the official tools to help you work with your Vue projects locally. These tools include extensions for Chrome and Firefox, and an Electron desktop application for other browsers. You should install one of these tools during the development process. 6 | Chapter 1: Welcome to the Vue.js World!