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
Table of Contents:
  • 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
  • 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
  • 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
  • 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
  • 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