book

Learning Vue

by Maya Shavin

December 2023

Beginner

350 pages

7h 38m

English

O'Reilly Media, Inc.

Book available

Read now

Unlock full access

Includes

Includes Quizzes

Conventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
What Is Vue.js?The Benefits of Vue in Modern Web DevelopmentInstalling Node.jsNPMYarnVue Developer ToolsVite.js as a Builder Management ToolCreate a New Vue ApplicationFile Repository StructureSummary
Virtual DOM Under the HoodThe Layout Update ProblemWhat Is Virtual DOM?How Virtual DOM Works in VueThe Vue App Instance and Options APIExploring the Options APIThe Template SyntaxCreating Local State with Data PropertiesHow Reactivity in Vue WorksTwo-Way Binding with v-modelUsing v-model.lazy ModifierBinding Reactive Data and Passing Props Data with v-bindBinding to Class and Style AttributesIterating over Data Collection Using v-forIterating Through Object PropertiesMake the Element Binding Unique with Key AttributeAdding Event Listener to Elements with v-onHandling Events with v-on Event ModifiersDetecting Keyboard Events with Key Code ModifiersConditional Rendering Elements with v-if, v-else, and v-else-ifConditional Displaying Elements with v-showDynamically Displaying HTML Code with v-htmlDisplaying Text Content with v-textOptimizing Renders with v-once and v-memoRegistering a Component GloballySummary
Vue Single File Component StructureUsing defineComponent() for TypeScript SupportComponent Lifecycle HookssetupbeforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmountunmountedMethodsComputed PropertiesWatchersObserving for Changes in Nested PropertiesUsing the this.$watch() MethodThe Power of SlotsUsing Named Slots with Template Tag and v-slot AttributeUnderstanding RefsSharing Component Configuration with MixinsScoped Styling ComponentsApplying CSS to a Child Component in Scoped StylesApplying Scoped Styles to Slot ContentAccessing a Component’s Data Value in Style Tag with v-bind() Pseudo-ClassStyling Components with CSS ModulesSummary
Nested Components and Data Flow in VueUsing Props to Pass Data to Child ComponentsDeclaring Prop Types with Validation and Default ValuesDeclaring Props with Custom Type CheckingDeclaring Props Using defineProps() and withDefaults()Communication Between Components with Custom EventsDefining Custom Events Using defineEmits()Communicate Between Components with provide/inject PatternUsing provide to Pass DataUsing inject to Receive DataTeleport APIImplementing a Modal with Teleport and the <dialog> ElementRendering Problem Using TeleportSummary
Setting Up Components with Composition APIHandling Data with ref() and reactive()Using ref()Using reactive()Using the Lifecycle HooksUnderstanding Watchers in Composition APIUsing computed()Creating Your Reusable ComposablesSummary
What Is Axios?Installing AxiosLoad Data with Lifecycle Hooks and AxiosAsync Data Requests in Run-Time: the ChallengeCreating Your Reusable Fetch ComponentConnect Your Application with an External DatabaseSummary
The Render Function and JSXUsing the Render FunctionUsing the h Function to Create a VNodeWriting JavaScript XML in the Render FunctionFunctional ComponentDefining Props and Emits for Functional ComponentAdding Custom Functionality Globally with Vue PluginsDynamic Rendering with the <component> TagKeeping Component Instance Alive with <keep-alive>Summary
What is Routing?Using Vue RouterInstalling Vue RouterDefining RoutesCreating a Router InstancePlugging the Router Instance Into the Vue ApplicationRendering the Current Page with the RouterView ComponentBuild a Navigation Bar with the RouterLink ComponentPassing Data Between RoutesDecoupling Route Parameters Using PropsUnderstanding Navigation GuardsGlobal Navigation GuardsRoute-Level Navigation GuardsComponent-Level Router GuardsCreating Nesting RoutesCreating Dynamic RoutesGoing Back and Forward with the Router InstanceHandling Unknown RoutesSummary
Understanding State Management in VueUnderstanding PiniaCreating a Pizzas Store for Pizza HouseCreating a Cart Store for Pizza HouseUsing the Cart Store in a ComponentAdding Items to the Cart from the Pizzas GalleryDisplaying Cart Items with ActionsRemoving Items from the Cart StoreUnit Testing Pinia StoresSubscribing Side Effects on Store ChangesSummary

Understanding CSS Transitions and CSS AnimationsTransition Component in Vue.jsUsing Custom Transition Class AttributesAdding Transition Effect on the Initial Render with appearBuilding Transition for a Group of ElementsCreating Route TransitionsUsing Transition Events to Control AnimationSummary
Introduction to Unit Testing and E2E TestingVitest as a Unit Testing ToolConfiguring Vitest Using Parameters and Config FileWriting Your First TestTesting Non-Lifecycle ComposablesTesting Composables with Lifecycle HookTesting Components Using Vue Test UtilsTesting Interaction and Events of a ComponentUsing Vitest with a GUIUsing Vitest with a Coverage RunnerEnd-to-End Testing with PlaywrightJSDebugging E2E Tests Using Playwright Test Extension for VSCodeSummary
CI/CD in Software DevelopmentContinuous IntegrationContinuous DeliveryContinuous DeploymentCI/CD Pipeline with GitHub ActionsContinuous Deployment with NetlifyDeploying with Netlify CLISummary
Client-Side Rendering in VueServer-Side Rendering (SSR)Server-Side Rendering with Nuxt.JsStatic Side Generator (SSG)Last Words

Overview

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