book

Learning Vue

Name: Learning Vue
Author: Maya Shavin
ISBN: 9781492098829

by Maya Shavin

December 2023

Beginner

350 pages

7h 38m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Includes

Quizzes

Preface
Conventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
1. Welcome to the Vue.js World!
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
2. How Vue Works: The Basics
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
3. Composing Components
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
4. Interactions Between Components
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
5. Composition API
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
6. Incorporating External Data
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
7. Advanced Rendering, Dynamic Components, and Plugin Composition
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
8. Routing
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
9. State Management with Pinia
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

10. Transitioning and Animation in Vue
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
11. Testing in Vue
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
12. Continuous Integration/Continuous Deployment of Vue.Js Applications
CI/CD in Software DevelopmentContinuous IntegrationContinuous DeliveryContinuous DeploymentCI/CD Pipeline with GitHub ActionsContinuous Deployment with NetlifyDeploying with Netlify CLISummary
13. Server-Side Rendering with Vue
Client-Side Rendering in VueServer-Side Rendering (SSR)Server-Side Rendering with Nuxt.JsStatic Side Generator (SSG)Last Words
Index
About the Author

Content preview from Learning Vue

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 performant 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 progressive, composable, and reactive user interfaces (UI) in frontend applications.

Note

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 compiles and translates Vue code (as a Single File Component, which we will discuss further in “Vue Single File Component Structure”) into equivalent HTML, CSS, and JavaScript code in build time before deploying. In a standalone mode (with a generated script file), the Vue engine performs the code translation at run-time instead.

Vue follows the MVVM (Model–View–ViewModel ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781492098812Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design