Building Real-World Web Applications with Vue.js 3: Build a portfolio of Vue.js and TypeScript web applications to advance your career in web development

Cover....1 Title Page....2 Copyright and credits....3 Contributors....5 Table of Contents....8 Preface....14 Part 1: Getting Started with Vue.js Development....22 Chapter 1: Introduction to Vue.js....24 Technical requirements....24 The need for Vue.js....25 Requirements and tooling....25 Online resources....26 Setting up the development environment....27 Integrated development environment....27 Vue.js DevTools....27 My first app....28 The project in the IDE....30 Your first coding steps....32 Summary....33 Chapter 2: Creating a Todo List App....34 A new project....35 Cleaning up the default installation....36 Building up the app....36 Creating the ListItem component....37 Creating the list....39 Making a list....40 Reactivity explained....42 Sorting the list....44 Preserving changes to the list....45 Single File Components....47 The Vue.js DevTools....48 Inspecting a component....48 Manipulating a component....50 Summary....51 Chapter 3: Building a Local Weather App....52 Technical requirements....52 Initializing the app....53 Working with different types of APIs....53 Handling data from a third-party API....57 Constructing the API call....57 Styling with Tailwind....60 Utility classes....62 Formatting data....64 Custom style use cases....65 Ensuring stability with Vitest....67 Vue Test Utils....67 Global test functions....69 A simple component test....70 Mocking external sources....72 Mocking for success....74 Unhappy path....75 Testing with APIs....76 Summary....80 Chapter 4: Creating the Marvel Explorer App....82 Technical requirements....82 Getting started with our new project....83 The Superhero connection....85 Marvelous routes in a single-page application....90 Optional parameters....92 Paging Dr Strange....93 A simple pagination component....93 Composables, assemble!....96 Refactoring useComics....96 Reassembling functionalities....98 Managing the roster....99 Searching for heroes....100 Adding search....102 An overview with superpowers....103 A different vision....103 Handling the error....105 Adding query parameters....107 Summary....109 Part 2: Intermediate Projects....110 Chapter 5: Building a Recipe App with Vuetify....112 Technical requirements....112 A new Vue project....113 Let’s get cooking....114 Quick development with Vuetify....117 Connecting the recipes to our app....120 A bit of additional setup....120 Our API connection....122 Selecting a recipe....124 Adding and removing a meal....126 Using Pinia for state management....133 Stateful applications....133 Adding Pinia....134 The first store....135 The meal planner store....137 Computed store values....143 Summary....150 Chapter 6: Creating a Fitness Tracker with Data Visualization....152 Technical requirements....152 Creating a client....153 Setting up the database....153 Handling the user....156 User store....156 Authenticating users....157 Protected routes....158 Logging out....160 App state....160 Centralized dialog....161 Centralized app menu....161 Exercise tracking....163 Selecting a date....165 Adding a routine....166 Saving to the database....170 Our hard work visualized....171 A view-based dashboard....172 History and overview....174 Graphs....176 Summary....183 Chapter 7: Building a Multiplatform Expense Tracker Using Quasar....186 Technical requirements....186 Setting up the database....187 Using Quasar to build a project....189 Authenticating with Supabase and Quasar....192 Routes and app structure....193 Expense tracking features....199 Managing categories....199 Adding expenses....200 Showing expenses and an overview....201 Building the app with the Quasar CLI....207 A custom icon....208 Packaging for different targets....208 Summary....210 Part 3: Advanced Applications....212 Chapter 8: Building an Interactive Quiz App....214 Technical requirements....214 Entities in the quiz app setup....215 Setting up the database....216 The SQA....217 Modules and auto-imports....218 File-based routing....218 Reintroducing two familiar friends....221 Dynamic file-based routes....223 Setting up the SQS....225 Nuxt API routes....225 Setting up a basic Node project....226 Executing scripts in parallel....228 Why sockets?....229 Completing the SQS....230 Creating the CQA....231 Setting up the app....232 Adding the socket client....234 Listening to socket events....234 Automated route changes....235 Player management in the lobby....236 We need some answers....238 Keeping and showing the score....240 Summary....241 Chapter 9: Experimental Object Recognition with TensorFlow....244 Technical requirements....245 Introduction to TensorFlow....245 Setting up the project....245 Performing and displaying a status check....246 Selecting an image....248 Adding a voice to the app....251 Learning from the prototype....253 Scavenge Hunter....253 Setting up the project....253 Starting a new game....256 Building the finish screen....258 Skipping to the end....259 Testing on a mobile device....260 Object recognition from the camera....262 Detecting and recognizing objects on a stream....262 Connecting detection....265 Wrapping up the game flow....266 Summary....268 Part 4: Wrapping Up....270 Chapter 10: Creating a Portfolio with Nuxt.js and Storyblok....272 Technical requirements....273 Setting up Storyblok....273 Initializing the Nuxt portfolio....276 Installing Nuxt modules....278 Working with multiple content types....283 Configuring the portfolio....284 Mapping content to code....286 Presenting the portfolio section....288 Modifying the content model....291 Updating existing types....291 Expanding the block properties....292 Mapping meta fields....295 Adding new features....296 Generating a standalone website....296 Publishing the static site....297 Automating the build and deployment on code change....298 Automating the build on content change....302 You made it!....304 Index....306 Other Books You May Enjoy....313