Front-end development projects with Vue.js 3 learn the fundamentals of building scalable web applications and dynamic user interfaces with Vue.js

Are you looking to use Vue.js 3 for building web apps but don't know where to begin? Frontend Development Projects with Vue.js 3 will help you get to grips with the core concepts of this JavaScript framework using practical examples that simulate real-world web projects. With this updated editi...

Full description

Bibliographic Details
Main Authors: Shavin, Maya, Camden, Raymond (Author)
Format: eBook
Language:English
Published: Birmingham, UK Packt Publishing Ltd. 2023
Edition:Second edition
Subjects:
Online Access:
Collection: O'Reilly - Collection details see MPG.ReNa
LEADER 12291nmm a2200445 u 4500
001 EB002154904
003 EBX01000000000000001293030
005 00000000000000.0
007 cr|||||||||||||||||||||
008 230404 ||| eng
050 4 |a QA76.73.J39 
100 1 |a Shavin, Maya 
245 0 0 |a Front-end development projects with Vue.js 3  |b learn the fundamentals of building scalable web applications and dynamic user interfaces with Vue.js  |c Maya Shavin, Raymond Camden 
250 |a Second edition 
260 |a Birmingham, UK  |b Packt Publishing Ltd.  |c 2023 
300 |a 628 pages  |b illustrations 
505 0 |a Using named slots to delegate rendering of multiple sections -- Using scoped slots to wrap prop-passing logic -- Exercise 4.04 -- Implementing a card component using named slots -- Understanding Vue refs -- Exercise 4.05 -- Wrapping Countable.js in Vue application -- Using events for child-parent communication -- Registering events with &lt -- script setup&gt -- (or setup hook) -- Activity 4.01 -- A local message view with reusable components -- Summary -- Chapter 5: The Composition API -- Technical requirements -- Creating components with the setup() lifecycle method -- Exercise 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() functions -- Working with data -- Setting 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 values -- Understanding composable lifecycle functions -- Exercise 5.06 -- using the lifecycle functions to control the data flow -- Creating your composable (custom hook) -- Exercise 5.07 -- creating your first composable -- Activity 5.01 -- creating a BlogView component with the Composition API -- Summary -- Chapter 6: Global Component Composition -- Technical requirements -- Understanding mixins -- Exercise 6.01 -- creating your mixin -- Understanding plugins -- Exercise 6.02 -- creating a custom Axios plugin -- Globally registering components -- Using non-SFC Vue components -- Understanding components -- Rendering dynamic components by name or component reference 
505 0 |a Caching a dynamic component state with keep-alive -- Exercise 6.03 -- creating a dynamic card layout with the component tag -- Writing functional components -- Activity 6.01 -- building a Vue.js application with plugins and reusable components -- Summary -- Chapter 7: Routing -- Technical requirements -- Understanding routing -- Understanding Vue Router -- Installing Vue Router -- Exploring the RouterView element -- Passing props to view -- Working with RouterView -- Setting up Vue Router -- Defining the routes -- Tips on loading components for route configuration -- Setting up the router instance -- Setting up a default layout for your app -- Exercise 7.01 -- implementing a Message Feed page using Vue Router -- Setting up navigation links with RouterLink -- Tip for implementing the Back button -- Exercise 7.02 -- adding the navigation link to the MessageFeed route -- Passing route parameters -- Understanding Router Hooks -- Setting up beforeEach Hooks -- Distinguishing between the beforeEach and beforeResolve Hooks -- The afterEach Hook -- Personalizing Hooks per route -- Setting up in-component Hooks -- Decoupling Params with Props -- Exercise 7.03: Passing the content of the selected message to a new message page and having it printed out -- Dynamic routing -- Catching error paths -- Exercise 7.04 -- implementing a message route for each message with the dynamic routing pattern -- Nested routes -- Exercise 7.05 -- building navigation tabs within the message view -- Using layouts -- Activity 7.01 -- creating a message SPA with dynamic, nested routing, and layouts -- Summary -- Chapter 8: Animations and Transitions -- Technical requirements -- Understanding Vue transitions -- Using the transition element -- Exploring transition classes -- An animation for a component -- Exploring custom transition classes -- Exploring JavaScript Hooks for transitions 
505 0 |a Transitioning groups of elements -- Creating a moving effect while transitioning a list -- Configuring an animation on initially rendering -- Exercise 8.02 -- sorting a list of messages with an animation -- Examining transition routes -- Exercise 8.03 -- creating a transition effect for each route navigated -- Using the GSAP library for animation -- Installing GSAP -- Basic tweens -- Exercise 8.04 -- tweening with GSAP -- Modifying the look and feel with easing -- Modifying the look and feel with stagger -- Using Timeline -- Activity 8.01 -- building a messages app with transitions and GSAP -- Summary -- Part 3: Global State Management -- Chapter 9: The State of Vue State Management -- Technical requirements -- Understanding the component architecture and the problem of the state -- Holding the state in a common ancestor component -- Exercise 9.01 -- adding an occupation field to the profile card generator -- Exercise 9.02 -- adding a Clear button to the profile card generator -- Adding simple state management -- Exercise 9.03 -- moving the Clear button to the application header profile card generator and updating the Clear logic -- Activity 9.01 -- adding Organization, Email, and Phone Number fields to a profile card generator -- Deciding when to use a local state or global state -- Summary -- Chapter 10: State Management with Pinia -- Technical requirements -- What Pinia is -- Installing Pinia -- Using Pinia to create a store -- Exercise 10.01 -- building a Color Preview app with a shared state -- Adding and using getters in your Pinia store -- Exercise 10.02 -- improving the Color Preview app with getters -- Additional getter features -- Working with Pinia actions -- Exercise 10.03 -- adding lightening and darkening features to the Color Preview app -- Debugging Pinia in Devtools -- Activity 10.01 -- creating a simple shopping cart and price calculator 
505 0 |a Understanding computed properties -- Exercise 2.01 -- implementing computed data into a Vue component -- Understanding computed setters -- Exercise 2.02 -- using computed setters -- Exploring watchers -- Exercise 2.03 -- using watchers to set new values -- Watching nested properties -- Exercise 2.04 -- watching nested properties of a data object -- Exploring async methods and data fetching -- Exercise 2.05 -- using asynchronous methods to retrieve data from an API -- Comparing methods, watchers, and computed properties -- Exercise 2.06 -- handling the search functionality using a Vue method, a watcher, and computed props -- Activity 2.01 -- creating a blog list using the Contentful API -- Summary -- Chapter 3: Vite and Vue Devtools -- Technical requirements -- Using Vite -- Exercise 3.01 -- setting up a Vue project -- Using Vue Devtools -- Components tab -- Timeline tab -- Exercise 3.02 -- debugging a Vue application using Devtools -- Activity 3.01 -- creating a Vue application with Pinia and Router using Vite -- Summary -- Part 2: Building Your First Vue App -- Chapter 4: Nesting Components (Modularity) -- Technical requirements -- Passing props -- Defining a simple component that accepts props -- Passing props to a component -- Exercise 4.01 -- Implementing a Greeting component -- Binding reactive data to props -- Exercise 4.02 -- Passing reactive data that changes frequently to props -- Understanding prop types and validation -- Primitive prop validation -- Understanding union and custom prop types -- Custom validation of arrays and objects -- Understanding required props -- Setting the default props value -- Registering props in &lt -- script setup&gt -- (setup hook) -- Exercise 4.03 -- Validating an Object property -- Understanding slots, named slots, and scoped slots -- Passing markup to a component for rendering 
505 0 |a Cover -- Title page -- Copyright and credits -- Contributors -- Table of Contents -- Preface -- Part 1: Introduction and Crash Course -- Chapter 1: Starting Your First Vue Project -- Technical requirements -- Understanding Vue as a framework -- Angular versus Vue -- React versus Vue -- Advantages of using Vue for your project -- Working with Vue -- Understanding the Vue instance -- Setting up a Vite-powered Vue application -- Vue's SFC architecture -- Exercise 1.01 -- building your first component -- Exploring data properties as a local state -- Writing components with script setup -- Exercise 1.02 -- interpolation with conditionals -- Understanding Vue directives -- Exercise 1.03 -- exploring basic directives (v-text, v-once, v-html, v-bind, v-if, v-show) -- Enabling two-way binding using v-model -- Exercise 1.04 -- experimenting with two-way binding using v-model -- Understanding data iteration with v-for -- Basic iteration using v-for -- Exercise 1.05 -- using v-for to iterate through an array of strings -- Iterating through an array of objects -- Exercise 1.06 -- using v-for to iterate through an array of objects and using their properties in v-if conditions -- Iterating through a keyed collection (Object) -- Exercise 1.07 -- using v-for to loop through the properties of Object -- Exploring methods -- Exercise 1.08 -- triggering methods -- Exercise 1.09 -- returning data using Vue methods -- Understanding component lifecycle hooks -- Exercise 1.10 -- using a Vue lifecycle to control data -- Styling components -- Exercise 1.11 -- importing SCSS into a scoped component -- Setting up state-driven dynamic CSS in Vue 3 -- Understanding CSS modules -- Exercise 1.12 -- styling Vue components using CSS modules -- Activity 1.01 -- building a dynamic shopping list app using Vue -- Summary -- Chapter 2: Working with Data -- Technical requirements 
653 |a JavaScript (Langage de programmation) 
653 |a Web site development / http://id.loc.gov/authorities/subjects/sh98004795 
653 |a Sites Web / Développement 
653 |a JavaScript (Computer program language) / http://id.loc.gov/authorities/subjects/sh96004880 
653 |a Vue (Electronic resource) / http://id.loc.gov/authorities/names/n2007023322 
653 |a Applications Web 
653 |a Web applications / fast 
653 |a Vue (Electronic resource) / fast 
653 |a JavaScript (Computer program language) / fast 
653 |a Web applications / http://id.loc.gov/authorities/subjects/sh2012001728 
653 |a Web site development / fast 
700 1 |a Camden, Raymond  |e author 
041 0 7 |a eng  |2 ISO 639-2 
989 |b OREILLY  |a O'Reilly 
500 |a Includes index 
776 |z 9781803234991 
856 4 0 |u https://learning.oreilly.com/library/view/~/9781803234991/?ar  |x Verlag  |3 Volltext 
082 0 |a 005.2/762 
520 |a Are you looking to use Vue.js 3 for building web apps but don't know where to begin? Frontend Development Projects with Vue.js 3 will help you get to grips with the core concepts of this JavaScript framework using practical examples that simulate real-world web projects. With this updated edition, you'll experience all aspects of the new and improved Vue.js 3 as you work on mini projects such as a chat interface, a shopping cart, a price calculator, a to-do app, and a profile card generator for storing contact details. These realistic projects are presented as bite-size exercises that you can enjoy even as you challenge yourself. Throughout the book, you'll discover how to manage data in Vue components, define communication interfaces between components, and handle static and dynamic routing to control application flow. You'll also work with Vite and Vue DevTools and learn how to handle transition and animation effects for an engaging user experience. Finally, you'll see how to test your app and deploy it to the web. By the end of this Vue.js book, you'll have the skills that enable you to work like an experienced Vue developer to build professional apps that can be used by others and have the confidence to tackle real-world frontend web development problems