Frontend 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...
| Other Authors: | , |
|---|---|
| Format: | eBook |
| Language: | Inglés |
| Published: |
Birmingham, England :
Packt Publishing, Limited
[2023]
|
| Edition: | Second edition |
| Subjects: | |
| See on Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009729737106719 |
Table of Contents:
- 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.
- 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.
- 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.
- Summary.
