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...
Main Authors: | , |
---|---|
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 <
- script setup>
- (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 <
- script setup>
- (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