Building Real-World Web Applications with Vue.js 3 9781837630394

Table of contents :
Building Real-World Web Applications with Vue.js 3
Contributors
About the author
About the reviewers
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Code in Action
Conventions used
Get in touch
Share Your Thoughts
Download a free PDF copy of this book
Part 1: Getting Started with Vue.js Development
1
Introduction to Vue.js
Technical requirements
The need for Vue.js
Requirements and tooling
Online resources
Setting up the development environment
Integrated development environment
Vue.js DevTools
My first app
The project in the IDE
Your first coding steps
Summary
2
Creating a Todo List App
A new project
Cleaning up the default installation
Building up the app
Creating the ListItem component
Creating the list
Making a list
Reactivity explained
Sorting the list
Preserving changes to the list
Single File Components
The Vue.js DevTools
Inspecting a component
Manipulating a component
Summary
3
Building a Local Weather App
Technical requirements
Initializing the app
Working with different types of APIs
Handling data from a third-party API
Constructing the API call
Styling with Tailwind
Utility classes
Formatting data
Custom style use cases
Ensuring stability with Vitest
Vue Test Utils
Global test functions
A simple component test
Mocking external sources
Mocking for success
Unhappy path
Testing with APIs
Summary
4
Creating the Marvel Explorer App
Technical requirements
Getting started with our new project
The Superhero connection
Marvelous routes in a single-page application
Optional parameters
Paging Dr Strange
A simple pagination component
Composables, assemble!
Refactoring useComics
Reassembling functionalities
Managing the roster
Searching for heroes
Adding search
An overview with superpowers
A different vision
Handling the error
Adding query parameters
Summary
Part 2: Intermediate Projects
5
Building a Recipe App with Vuetify
Technical requirements
A new Vue project
Let’s get cooking
Quick development with Vuetify
Connecting the recipes to our app
A bit of additional setup
Our API connection
Selecting a recipe
Adding and removing a meal
Using Pinia for state management
Stateful applications
Adding Pinia
The first store
The meal planner store
Computed store values
Summary
6
Creating a Fitness Tracker with Data Visualization
Technical requirements
Creating a client
Setting up the database
Handling the user
User store
Authenticating users
Protected routes
Logging out
App state
Centralized dialog
Centralized app menu
Exercise tracking
Selecting a date
Adding a routine
Saving to the database
Our hard work visualized
A view-based dashboard
History and overview
Graphs
Summary
7
Building a Multiplatform Expense Tracker Using Quasar
Technical requirements
Setting up the database
Using Quasar to build a project
Authenticating with Supabase and Quasar
Routes and app structure
Expense tracking features
Managing categories
Adding expenses
Showing expenses and an overview
Building the app with the Quasar CLI
A custom icon
Packaging for different targets
Summary
Part 3: Advanced Applications
8
Building an Interactive Quiz App
Technical requirements
Entities in the quiz app setup
Setting up the database
The SQA
Modules and auto-imports
File-based routing
Reintroducing two familiar friends
Dynamic file-based routes
Setting up the SQS
Nuxt API routes
Setting up a basic Node project
Executing scripts in parallel
Why sockets?
Completing the SQS
Creating the CQA
Setting up the app
Adding the socket client
Listening to socket events
Automated route changes
Player management in the lobby
We need some answers
Keeping and showing the score
Summary
9
Experimental Object Recognition with TensorFlow
Technical requirements
Introduction to TensorFlow
Setting up the project
Performing and displaying a status check
Selecting an image
Adding a voice to the app
Learning from the prototype
Scavenge Hunter
Setting up the project
Starting a new game
Building the finish screen
Skipping to the end
Testing on a mobile device
Object recognition from the camera
Detecting and recognizing objects on a stream
Connecting detection
Wrapping up the game flow
Summary
Part 4: Wrapping Up
10
Creating a Portfolio with Nuxt.js and Storyblok
Technical requirements
Setting up Storyblok
Initializing the Nuxt portfolio
Installing Nuxt modules
Working with multiple content types
Configuring the portfolio
Mapping content to code
Presenting the portfolio section
Modifying the content model
Updating existing types
Expanding the block properties
Mapping meta fields
Adding new features
Generating a standalone website
Publishing the static site
Automating the build and deployment on code change
Automating the build on content change
You made it!
Index
Why subscribe?
Other Books You May Enjoy
Packt is searching for authors like you
Download a free PDF copy of this book