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

Overview

Grab your chance to learn Vue.js 3-the modern JavaScript framework that simplifies building scalable web applications. Through practical exercises and engaging real-world projects, this book breaks down essential concepts and workflows. By completing this book, you will gain the confidence and skills to create professional, intuitive user interfaces for your applications.

What this Book will help me do

Understand Vue.js 3 core concepts by building a variety of hands-on projects.
Learn to efficiently structure and modularize Vue components for scalable applications.
Implement state management using Pinia to handle data operations and shared states.
Explore the integration of external APIs and libraries, enabling rich interactions and animations.
Prepare for production by practicing unit and end-to-end testing, as well as deployment activities.

Author(s)

Maya Shavin, Raymond Camden, Clifford Gurney, and Hugo Di Francesco bring years of experience with Vue.js and frontend development to this book. Their combined expertise in cutting-edge JavaScript frameworks and passion for teaching make this a comprehensive and insightful guide. They focus on practical techniques and real-world scenarios to demystify complex topics.

Who is it for?

This book is ideal for frontend developers interested in learning Vue.js, whether you're new to JavaScript frameworks or already familiar with other frameworks like React or Angular. Readers should have a working knowledge of HTML, CSS, and JavaScript, along with some familiarity with Node.js package management. The book is geared towards those who want to enhance their skills and build scalable frontend applications.

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