Vue. js 3 for Beginners : Learn the Essentials of Vue. js 3 and Its Ecosystem to Build Modern Web Applications / Simone Cuomo and Tracy Lee.

Format:

Book

Author/Creator:

Cuomo, Simone, author.

Lee, Tracy, author.

Language:

English

Subjects (All):

Vue (Electronic resource).

Web applications--Development.

Software frameworks.

Physical Description:

1 online resource (302 pages)

Edition:

First edition.

Place of Publication:

Birmingham, England : Packt Publishing, [2024]

Summary:

Gain proficiency in Vue.js 3 and its core libraries, including Pinia, Vue Router, and Vitest, by developing a social media web application with detailed, hands-on instructions Key Features Discover best practices for building scalable and performant Vue.js applications Learn the basics of component-based architecture Familiarize yourself with Vue.js core libraries and ecosystem Purchase of the print or Kindle book includes a free PDF eBook Book Description Discover why Vue.js is a must-learn JavaScript framework for aspiring developers. If you're a beginner fascinated by Vue.js and its potential, then this book will show you how the progressive and versatile framework can help you build performant applications. Written by an accomplished software architect with over 12 years of experience, Vue.js 3 for Beginners provides a solid foundation in Vue.js and guides you at every step to create a robust social media application, component by component. Starting with a clean canvas using plain HTML and CSS, you'll learn new topics to build your application incrementally. Beyond the core features, you'll explore crucial parts of the Vue.js ecosystem, such as state management with Pinia, routing with Vue Router, and testing with Vitest, and Cypress. The structured GitHub repository ensures a smooth transition from one chapter to the next, offering valuable insights into advanced topics, techniques, and resources. This book is designed to serve as a practical reference guide, allowing you to quickly revisit specific topics when needed. By the end of the book, you'll have built a strong understanding of Vue.js and be ready to build simple applications effortlessly. What you will learn Gain practical knowledge of the Vue.js framework Deepen your understanding of Pinia, Vue Router, validation libraries, and their integration with Vue.js applications Explore the core concepts of Vue.js, including components, directives, and data binding Create scalable, maintainable applications from scratch Build applications using the script setup and the Composition API Debug your applications with the Vue debugger tool Who this book is for Vue.js for Beginners is for aspiring web developers, students, hobbyists, or anyone who wants to learn Vue.js from scratch and is eager to foray into front-end development using this modern and popular framework. Basic knowledge of HTML, CSS, and JavaScript is required to fully grasp the content of this Vue.js book.

Contents:

Intro

Title Page

Copyright and Credits

Dedication

Foreword

Contributors

Table of Contents

Preface

Part 1: Getting Started with Vue.js

Chapter 1: Exploring the Book's Layout and Companion App

Technical requirements

The companion app

The Companion App features

The application code

The core areas of a web application

Component-based architecture

One page at a time

From one page to many components

Atomic design

Separation of concern

Summary

Chapter 2: The Foundation of Vue.js

Vue.js reactivity fundamentals

Understanding the Vue.js lifecycle and hooks

Vue.js component structure

Single-file components

Options API versus Composition API - Two sides of the same coin

Sample components

Part 2: Understanding the Core Features of Vue.js

Chapter 3: Making Our HTML Dynamic

Building your first Vue.js project

Creating our first component

Introducing properties

Learning Vue.js reactive data with Refs and Reactive

Chapter 4: Utilizing Vue's Built-In Directives for Effortless Development

Displaying text with v-text and v-html

Applying dynamic text to our component using v-text

Modifying the inner HTML of an element with v-html

Handling element visibility with v-if and v-show

Hiding elements from the DOM with v-show

Keeping the DOM clean and performant with v-if

Simplifying your template with v-for

Chapter 5: Leveraging Computed Properties and Methods in Vue.js

Abstracting functionality using methods

Creating dynamic data using computed properties

Learning the difference between methods and computed properties

Technical differences

How to spot them in your component

Summary.

Chapter 6: Event and Data Handling in Vue.js

Exploring the Companion App changes

Folders and file changes

Logic changes

Deepening our knowledge of props

Props configurations

Creating a basic button

Handling native events in Vue.js

Event modifiers

Connecting components with custom events

Event arguments

Chapter 7: Handling API Data and Managing Async Components with Vue.js

Loading data from an API using the Vue.js life cycle

Loading social posts from an API

Fixing the SocialPost.vue properties' misalignment

Load comments on demand

Watching for changes in components using watch

Handling asynchronous components with &lt

Suspense&gt

Understanding asynchronous components

Turning a component into an asynchronous component

Rendering async components

Part 3: Expanding Your Knowledge with Vue.js and Its Core Libraries

Chapter 8: Testing Your App with Vitest and Cypress

The testing pyramids

Increased flexibility and the reduced risk of change

Unit testing with Vitest

Installing Vitest in your application

Writing our first unit test

E2E tests with Cypress

Installing Cypress into your project

Learning the E2E tests' file format and file location

Writing your first E2E test

Introducing advanced testing techniques

Mocking

Spying

shallowMount (unit tests only)

Chapter 9: Introduction to Advanced Vue.js Techniques - Slots, Lifecycle, and Template Refs

The power of slots

Adding default values to a slot

Slot versus property

Provide multiple slots with named slots

Accessing components elements with Template Refs

Focus an onMounted element

Access from native validation.

Deep diving into the lifecycle of a real app

Adding conditional rendering to the sidebar

Writing the logic to handle the sidebar states

Save and read the user preference in localStorage

Chapter 10: Handling Routing with Vue Router

Introducing vue-router

Learning about vue-router configuration

Creating our first view

Navigating between routes

Using the &lt

router-link&gt

component

Programmatic navigation

Dynamic route matching

Creating a user profile page

Creating a user profile route

Adding navigation using the route name

Reading route parameters in a route component

Learning about nested routes

Applying nested routes to the user

Reusing routes with alias and redirect

Chapter 11: Managing Your Application's State with Pinia

When to use state management

Learning about the structure of a Pinia store

Centralized sidebar state management with Pinia

Creating our first store

Creating a post store with Pinia

Implementing an Add Post action

Chapter 12: Achieving Client-Side Validation with VeeValidate

Understanding forms

Wrapping your form within the &lt

form&gt

element

Do not forget labels

There is more than just type="text"

Setting your form to be autocompleted

Two-way binding with v-model

Controlling your form using VeeValidate

Defining your form validation with VeeValidate

Using VeeValidate rules

Part 4: Conclusion and Further Resources

Chapter 13: Unveiling Application Issues with the Vue Devtools

Getting familiar with the Vue Devtools

Debugging components in your Vue Devtools

Use cases for the Vue Devtools information panel

Deep dive into the Vue Devtools Timeline tab.

Analyzing additional data with Vue Devtools plugins

The Pinia Vue Devtools plugin

The vue-router Vue Devtools plugin

Chapter 14: Advanced Resources for Future Reading

Available tools and resources

Vue.js documentation

Newsletter

Community members

Request For Comments - RFC

What is left for Vue.js?

Miscellaneous

Core features

Pinia's features

Vue-router features

Contribute back to the community

Let's look back at what we've achieved

All about Vue.js

From the basics and beyond

From component to components

Vue.js ecosystem

Just the tip of the iceberg

Index

About Packt

Other Books You May Enjoy.

Notes:

Includes bibliographical references and index.

Description based on publisher supplied metadata and other sources.

Description based on print version record.

ISBN:

1-80512-329-7

OCLC:

1450557306