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

Become a VueJS professional through practical projects like building a to-do list, weather app, recipe app, fitness tracker, quiz app, and more Key Features Increase your prospects of securing employment as a web developer Familiarize yourself with the Vue ecosystem and build more advanced applications by leveraging the fundamentals Progress at your own pace and build a personal project using a modern tech stack Purchase of the print or Kindle book includes a free PDF eBook Book Description In the ever-evolving web development landscape, Vue.js stands out with its intuitive design and progressive framework, empowering developers to create interactive and dynamic web applications. This book will help you stay in the forefront of modern web technologies by mastering Vue.js through hands-on projects and practical applications. Building Real-World Web Applications with Vue.js 3 is your guide to exploring the core concepts of Vue.js, setting up your development environment, and creating your first Vue.js application. You’ll progress by building a recipe app using Vuetify, followed by leveraging data visualization to create a fitness tracker featuring dynamic dashboards using external databases and Vue-ChartJS. You'll then get to grips with multiplatform development with Quasar to deploy your app. As you develop an interactive quiz app, you’ll be introduced to server-side logic with Nuxt.js, WebSockets for real-time communication, and client-server differentiation. Additionally, you’ll study experimental object recognition using TensorFlow, leveraging machine learning and camera input, and conclude by creating a portfolio website with Nuxt and Storyblok. By the end of this book, you'll have the knowledge and confidence to create your own Vue.js applications and build a portfolio to showcase your Vue.js skills to potential employers. What you will learn Master VueJS fundamentals and best practices Build real-world applications and create a portfolio Use VueRouter Cover Title Page Copyright and credits Contributors Table of Contents Preface Part 1: Getting Started with Vue.js Development Chapter 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 Chapter 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 Chapter 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 Chapter 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 Chapter 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 Chapter 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 Chapter 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 Chapter 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 Chapter 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 Chapter 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 Other Books You May Enjoy Become a VueJS professional through practical projects like building a to-do list, weather app, recipe app, fitness tracker, quiz app, and moreBook DescriptionIn the ever-evolving web development landscape, Vue.js stands out with its intuitive design and progressive framework, empowering developers to create interactive and dynamic web applications. This book will help you stay in the forefront of modern web technologies by mastering Vue.js through hands-on projects and practical applications.Building Real-World Web Applications with Vue.js 3 is your guide to exploring the core concepts of Vue.js, setting up your development environment, and creating your first Vue.js application. You’ll progress by building a recipe app using Vuetify, followed by leveraging data visualization to create a fitness tracker featuring dynamic dashboards using external databases and Vue-ChartJS. You'll then get to grips with multiplatform development with Quasar to deploy your app.As you develop an interactive quiz app, you’ll be introduced to server-side logic with Nuxt.js, WebSockets for real-time communication, and client-server differentiation. Additionally, you’ll study experimental object recognition using TensorFlow, leveraging machine learning and camera input, and conclude by creating a portfolio website with Nuxt and Storyblok.By the end of this book, you'll have the knowledge and confidence to create your own Vue.js applications and build a portfolio to showcase your Vue.js skills to potential employers.What you will learn• Master VueJS fundamentals and best practices• Build real-world applications and create a portfolio• Use VueRouter and manage state with Pinia• Implement Vuetify for rapid UI development• Develop multiplatform apps with Quasar Framework• Create interactive quizzes using WebSocket connections• Apply TensorFlow for object recognition• Build a portfolio website with Nuxt and Storyblok CMS