Quinten Joran / Квинтен Йоран - Building Real-World Web Applications with Vue.js 3 / Создание реальных веб-приложений с помощью Vue.js 3 [2023, PDF, EPUB, ENG]

Примеры страниц (скриншоты)

Оглавление

Preface xiii
Part 1: Getting Started with Vue.js Development
1
Introduction to Vue.js 3
Technical requirements 3
The need for Vue.js 4
Requirements and tooling 4
Online resources 5
Setting up the development environment 6
Integrated development environment 6
Vue.js DevTools 6
My first app 7
The project in the IDE 9
Your first coding steps 11
Summary 12
2
Creating a Todo List App 13
A new project 14
Cleaning up the default installation 15
Building up the app 15
Creating the ListItem component 16
Creating the list 18
Making a list 19
Reactivity explained 21
Sorting the list 23
Preserving changes to the list 24
Single File Components 26
The Vue.js DevTools 27
Inspecting a component 27
Manipulating a component 29
Summary 30
3
Building a Local Weather App 31
Technical requirements 31
Initializing the app 32
Working with different types of APIs 32
Handling data from a third-party API 36
Constructing the API call 36
Styling with Tailwind 39
Utility classes 41
Formatting data 43
Custom style use cases 44
Ensuring stability with Vitest 46
Vue Test Utils 46
Global test functions 48
A simple component test 49
Mocking external sources 51
Mocking for success 53
Unhappy path 54
Testing with APIs 55
Summary 59
4
Creating the Marvel Explorer App 61
Technical requirements 61
Getting started with our new project 62
The Superhero connection 64
Marvelous routes in a single-page
application 69
Optional parameters 71
Paging Dr Strange 72
A simple pagination component 72
Composables, assemble! 75
Refactoring useComics 75
Reassembling functionalities 77
Managing the roster 78
Searching for heroes 79
Adding search 81
An overview with superpowers 82
A different vision 82
Handling the error 84
Adding query parameters 86
Summary 88
Part 2: Intermediate Projects
5
Building a Recipe App with Vuetify 91
Technical requirements 91 A new Vue project 92
Let’s get cooking 93
Quick development with Vuetify 96
Connecting the recipes to our app 99
A bit of additional setup 99
Our API connection 101
Selecting a recipe 103
Adding and removing a meal 105
Using Pinia for state management 112
Stateful applications 112
Adding Pinia 113
The first store 114
The meal planner store 116
Computed store values 122
Summary 129
6
Creating a Fitness Tracker with Data Visualization 131
Technical requirements 131
Creating a client 132
Setting up the database 132
Handling the user 135
User store 135
Authenticating users 136
Protected routes 137
Logging out 139
App state 139
Centralized dialog 140
Centralized app menu 140
Exercise tracking 142
Selecting a date 144
Adding a routine 145
Saving to the database 149
Our hard work visualized 150
A view-based dashboard 151
History and overview 153
Graphs 155
Summary 162
7
Building a Multiplatform Expense Tracker Using Quasar 165
Technical requirements 165
Setting up the database 166
Using Quasar to build a project 168
Authenticating with Supabase
and Quasar 171
Routes and app structure 172
Expense tracking features 178
Managing categories 178
Adding expenses 179
Showing expenses and an overview 180
Building the app with the
Quasar CLI 186
A custom icon 187
Packaging for different targets 187
Summary 189
Part 3: Advanced Applications
8
Building an Interactive Quiz App 193
Technical requirements 193
Entities in the quiz app setup 194
Setting up the database 195
The SQA 196
Modules and auto-imports 197
File-based routing 197
Reintroducing two familiar friends 200
Dynamic file-based routes 202
Setting up the SQS 204
Nuxt API routes 204
Setting up a basic Node project 205
Executing scripts in parallel 207
Why sockets? 208
Completing the SQS 209
Creating the CQA 210
Setting up the app 211
Adding the socket client 213
Listening to socket events 213
Automated route changes 214
Player management in the lobby 215
We need some answers 217
Keeping and showing the score 219
Summary 220
9
Experimental Object Recognition with TensorFlow 223
Technical requirements 224
Introduction to TensorFlow 224
Setting up the project 224
Performing and displaying a status check 225
Selecting an image 227
Adding a voice to the app 230
Learning from the prototype 232
Scavenge Hunter 232
Setting up the project 232
Starting a new game 235
Building the finish screen 237
Skipping to the end 238
Testing on a mobile device 239
Object recognition from the camera 241
Detecting and recognizing objects
on a stream 241
Connecting detection 244
Wrapping up the game flow 245
Summary 247
Part 4: Wrapping Up
10
Creating a Portfolio with Nuxt.js and Storyblok 251
Technical requirements 252
Setting up Storyblok 252
Initializing the Nuxt portfolio 255
Installing Nuxt modules 257
Working with multiple content types 262
Configuring the portfolio 263
Mapping content to code 265
Presenting the portfolio section 267
Modifying the content model 270
Updating existing types 270
Expanding the block properties 271
Mapping meta fields 274
Adding new features 275
Generating a standalone website 275
Publishing the static site 276
Automating the build and deployment
on code change 277
Automating the build on content change 281
You made it! 283
Index 285
Other Books You May Enjoy 292