Frontend development projects with Vue. js 3 : learn the fundamentals of building scalable web applications and dynamic user interfaces with Vue. js / Maya Shavin, and Raymond Camden.

Format:

Book

Author/Creator:

Shavin, Maya, author.

Camden, Raymond, author.

Language:

English

Subjects (All):

Vue (Electronic resource).

JavaScript (Computer program language).

Web site development.

Web applications.

Physical Description:

1 online resource (628 pages)

Edition:

Second edition.

Place of Publication:

Birmingham, England : Packt Publishing, Limited, [2023]

Biography/History:

Shavin Maya: Maya is Senior Software Engineer in Microsoft, working extensively with JavaScript and frontend frameworks and based in Israel. She holds a B. Sc in Computer Sciences, B. A in Business Management, and an International MBA from University of Bar-Ilan, Israel. She has worked with JavaScript and latest frontend frameworks such as React, Vue. js, etc to create scalable and performant front-end solutions at companies such as Cooladata and Cloudinary, and currently Microsoft. She founded and is currently the organizer of the VueJS Israel Meetup Community, helping to create a strong playground for Vue. js lovers and like-minded developers. Maya is also a published author, international speaker and an open-source library maintainer of frontend and web projects. Camden Raymond: Raymond Camden is a developer advocate for IBM. His work focuses on the MobileFirst platform, Bluemix, hybrid mobile development, Node. js, HTML5, and web standards in general. He is a published author and presents at conferences and user groups on a variety of topics. Raymond can be reached at his blog, on Twitter, or via email. He is the author of many development books, including Apache Cordova in Action and Client-Side Data Storage. Gurney Clifford: Clifford Gurney is a solution-focused and results-oriented technical lead at a series-A funded startup. A background in communication design and broad exposure to leading digital transformation initiatives enriches his delivery of conceptually designed front-end solutions using Vue JS. Cliff has presented at the Vue JS Melbourne meetups and collaborates with other like-minded individuals to deliver best in class digital experience platforms. Francesco Hugo Di: Hugo Di Francesco is a software engineer who has worked extensively with JavaScript. He holds a MEng degree in mathematical computation from University College London (UCL). He has used JavaScript across the stack to create scalable and performant platforms at companies such as Canon and Elsevier and in industries such as print on demand and mindfulness. He is currently tackling problems in the travel industry at Eurostar with Node. js, TypeScript, React, and Kubernetes while running the eponymous Code with Hugo website. Outside of work, he is an international fencer, in the pursuit of which he trains and competes across the globe.

Summary:

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.

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

Chapter 3: Vite and Vue Devtools

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

Part 2: Building Your First Vue App

Chapter 4: Nesting Components (Modularity)

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.

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

(or setup hook)

Activity 4.01 - A local message view with reusable components

Chapter 5: The Composition API

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

Chapter 6: Global Component Composition

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

Chapter 7: Routing

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

Chapter 8: Animations and Transitions

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

Part 3: Global State Management

Chapter 9: The State of Vue State Management

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

Chapter 10: State Management with Pinia

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.

Notes:

Includes index.

Description based on print version record.

ISBN:

9781803236315

1803236310

OCLC:

1373988309