book

Frontend Development Projects with Vue.js 3 - Second Edition

Name: Frontend Development Projects with Vue.js 3 - Second Edition
ISBN: 9781803234991

by Maya Shavin, Raymond Camden, Clifford Gurney, Hugo Di Francesco

March 2023

Beginner to intermediate

628 pages

11h 13m

English

Packt Publishing

Read now

Unlock full access

Frontend Development Projects with Vue.js 3
ContributorsAbout the authorsAbout the reviewer
Preface
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesDownload the color imagesConventions usedGet in touchShare Your ThoughtsDownload a free PDF copy of this book
Part 1: Introduction and Crash Course
Chapter 1: Starting Your First Vue Project
Technical requirementsUnderstanding Vue as a frameworkAngular versus VueReact versus VueAdvantages of using Vue for your projectWorking with VueUnderstanding the Vue instanceSetting up a Vite-powered Vue applicationVue’s SFC architectureExercise 1.01 – building your first componentExploring data properties as a local stateWriting components with script setupExercise 1.02 – interpolation with conditionalsUnderstanding Vue directivesExercise 1.03 – exploring basic directives (v-text, v-once, v-html, v-bind, v-if, v-show)Enabling two-way binding using v-modelExercise 1.04 – experimenting with two-way binding using v-modelUnderstanding data iteration with v-forBasic iteration using v-forExercise 1.05 – using v-for to iterate through an array of stringsIterating through an array of objectsExercise 1.06 – using v-for to iterate through an array of objects and using their properties in v-if conditionsIterating through a keyed collection (Object)Exercise 1.07 – using v-for to loop through the properties of ObjectExploring methodsExercise 1.08 – triggering methodsExercise 1.09 – returning data using Vue methodsUnderstanding component lifecycle hooksExercise 1.10 – using a Vue lifecycle to control dataStyling componentsExercise 1.11 – importing SCSS into a scoped componentSetting up state-driven dynamic CSS in Vue 3Understanding CSS modulesExercise 1.12 – styling Vue components using CSS modulesActivity 1.01 – building a dynamic shopping list app using VueSummary
Chapter 2: Working with Data
Technical requirementsUnderstanding computed propertiesExercise 2.01 – implementing computed data into a Vue componentUnderstanding computed settersExercise 2.02 – using computed settersExploring watchersExercise 2.03 – using watchers to set new valuesWatching nested propertiesExercise 2.04 – watching nested properties of a data objectExploring async methods and data fetchingExercise 2.05 – using asynchronous methods to retrieve data from an APIComparing methods, watchers, and computed propertiesExercise 2.06 – handling the search functionality using a Vue method, a watcher, and computed propsActivity 2.01 – creating a blog list using the Contentful APISummary
Chapter 3: Vite and Vue Devtools
Technical requirementsUsing ViteExercise 3.01 – setting up a Vue projectUsing Vue DevtoolsComponents tabTimeline tabExercise 3.02 – debugging a Vue application using DevtoolsActivity 3.01 – creating a Vue application with Pinia and Router using ViteSummary
Part 2: Building Your First Vue App
Chapter 4: Nesting Components (Modularity)
Technical requirementsPassing propsDefining a simple component that accepts propsPassing props to a componentExercise 4.01 – Implementing a Greeting componentBinding reactive data to propsExercise 4.02 – Passing reactive data that changes frequently to propsUnderstanding prop types and validationPrimitive prop validationUnderstanding union and custom prop typesCustom validation of arrays and objectsUnderstanding required propsSetting the default props valueRegistering props in <script setup> (setup hook)Exercise 4.03 – Validating an Object propertyUnderstanding slots, named slots, and scoped slotsPassing markup to a component for renderingUsing named slots to delegate rendering of multiple sectionsUsing scoped slots to wrap prop-passing logicExercise 4.04 – Implementing a card component using named slotsUnderstanding Vue refsExercise 4.05 – Wrapping Countable.js in Vue applicationUsing events for child-parent communicationRegistering events with <script setup> (or setup hook)Activity 4.01 – A local message view with reusable componentsSummary
Chapter 5: The Composition API
Technical requirementsCreating components with the setup() lifecycle methodExercise 5.01 – creating a greeting component with setup()Creating a component with setup() and h()Exercise 5.02 – creating a dynamic greeting component with the setup() and h() functionsWorking with dataSetting a reactive local state with ref()Setting a reactive local state with reactive()Exercise 5.03 – binding a component with ref() and reactive()Computing a reactive state from another local state with computed()Exercise 5.04 – implementing computed data with computed()Using watchers with watch()Exercise 5.05 – using watchers to set new valuesUnderstanding composable lifecycle functionsExercise 5.06 – using the lifecycle functions to control the data flowCreating your composable (custom hook)Exercise 5.07 – creating your first composableActivity 5.01 – creating a BlogView component with the Composition APISummary
Chapter 6: Global Component Composition
Technical requirementsUnderstanding mixinsExercise 6.01 – creating your mixinUnderstanding pluginsExercise 6.02 – creating a custom Axios pluginGlobally registering componentsUsing non-SFC Vue componentsUnderstanding componentsRendering dynamic components by name or component referenceCaching a dynamic component state with keep-aliveExercise 6.03 – creating a dynamic card layout with the component tagWriting functional componentsActivity 6.01 – building a Vue.js application with plugins and reusable componentsSummary

Chapter 7: Routing
Technical requirementsUnderstanding routingUnderstanding Vue RouterInstalling Vue RouterExploring the RouterView elementPassing props to viewWorking with RouterViewSetting up Vue RouterDefining the routesTips on loading components for route configurationSetting up the router instanceSetting up a default layout for your appExercise 7.01 – implementing a Message Feed page using Vue RouterSetting up navigation links with RouterLinkTip for implementing the Back buttonExercise 7.02 – adding the navigation link to the MessageFeed routePassing route parametersUnderstanding Router HooksSetting up beforeEach HooksDistinguishing between the beforeEach and beforeResolve HooksThe afterEach HookPersonalizing Hooks per routeSetting up in-component HooksDecoupling Params with PropsExercise 7.03: Passing the content of the selected message to a new message page and having it printed outDynamic routingCatching error pathsExercise 7.04 – implementing a message route for each message with the dynamic routing patternNested routesExercise 7.05 – building navigation tabs within the message viewUsing layoutsActivity 7.01 – creating a message SPA with dynamic, nested routing, and layoutsSummary
Chapter 8: Animations and Transitions
Technical requirementsUnderstanding Vue transitionsUsing the transition elementExploring transition classesAn animation for a componentExploring custom transition classesExploring JavaScript Hooks for transitionsTransitioning groups of elementsCreating a moving effect while transitioning a listConfiguring an animation on initially renderingExercise 8.02 – sorting a list of messages with an animationExamining transition routesExercise 8.03 – creating a transition effect for each route navigatedUsing the GSAP library for animationInstalling GSAPBasic tweensExercise 8.04 – tweening with GSAPModifying the look and feel with easingModifying the look and feel with staggerUsing TimelineActivity 8.01 – building a messages app with transitions and GSAPSummary
Part 3: Global State Management
Chapter 9: The State of Vue State Management
Technical requirementsUnderstanding the component architecture and the problem of the stateHolding the state in a common ancestor componentExercise 9.01 – adding an occupation field to the profile card generatorExercise 9.02 – adding a Clear button to the profile card generatorAdding simple state managementExercise 9.03 – moving the Clear button to the application header profile card generator and updating the Clear logicActivity 9.01 – adding Organization, Email, and Phone Number fields to a profile card generatorDeciding when to use a local state or global stateSummary
Chapter 10: State Management with Pinia
Technical requirementsWhat Pinia isInstalling PiniaUsing Pinia to create a storeExercise 10.01 – building a Color Preview app with a shared stateAdding and using getters in your Pinia storeExercise 10.02 – improving the Color Preview app with gettersAdditional getter featuresWorking with Pinia actionsExercise 10.03 – adding lightening and darkening features to the Color Preview appDebugging Pinia in DevtoolsActivity 10.01 – creating a simple shopping cart and price calculatorSummary
Part 4: Testing and Application Deployment
Chapter 11: Unit Testing
Technical requirementsUnderstanding testing and the need to test codeDifferent types of testingBuilding your first testTesting componentsExercise 11.01: Building and unit testing a tag list componentTesting component methodsExercise 11.02: Building and testing an ellipsis methodTesting Vue routingExercise 11.03: Building a tag page and testing its routingTesting state management with PiniaExercise 11.04: Building and testing a cookie disclaimer bannerSnapshot testingActivity 11.01: Adding a simple search-by-title page with testsSummary
Chapter 12: End-to-End Testing
Technical requirementsUnderstanding E2E testing and its use casesConfiguring Cypress for a Vue.js applicationUsing Cypress to interact with and inspect a Vue.js UIExercise 12.01 – adding a New Comment button and a corresponding E2E testTriggering and waiting for UI updates with CypressExercise 12.02 – adding new comment editor input and a Submit functionalityExercise 12.03 – adding a submitting state to the new comment editorIntercepting HTTP requestsExercise 12.04 – POST comment to the API on submissionActivity 12.01 – adding the ability to set a user’s email and testSummary
Chapter 13: Deploying Your Code to the Web
Technical requirementsExploring the benefits of CI/CD as part of an agile software development processBuilding our apps for productionUsing GitLab CI/CD to test our codeExercise 13.01 – adding a lint step to our GitLab CI/CD pipelineDeploying to NetlifyExercise 13.02 – deploying a site to Netlify from GitHubDeploying to AWS using S3 and CloudFrontExercise 13.03 – deploying to S3 from GitLab CI/CDActivity 13.01 – adding CI/CD to a Book Search app with GitLab and deploying it to NetlifySummary
Index
Why subscribe?
Other Books You May EnjoyPackt is searching for authors like youShare Your ThoughtsDownload a free PDF copy of this book

Content preview from Frontend Development Projects with Vue.js 3 - Second Edition

8 Animations and Transitions

In the previous chapter, you learned about routes and how to set up an essential routing navigation system using Vue Router. Empowering a smooth transition between different routes or providing your application with the proper animation effects when users interact with it is the next level to achieve.

Throughout this chapter, you will explore the essentials of Vue transitions—how to create your transitions, including single-element animations and animations that use a group of elements, and how to combine them with external libraries for further custom animations. You will also learn how to create full-page animations with transition routes.

By the end of the chapter, you will be ready to implement and handle the ...

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

Front-End Development Projects with Vue.js

Publisher Resources

ISBN: 9781803234991

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Frontend Development Projects with Vue.js 3 - Second Edition

by Maya Shavin, Raymond Camden, Clifford Gurney, Hugo Di Francesco

8

Animations and Transitions

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.