Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia) from Udemy

In this course, you'll learn how to use Vue 3, the Composition API, Quasar V2 and Pinia to create a beautiful cross-platform money management app called Moneyballs - for Web, iOS, Android, Mac & Windows.

In this app, we can add both income and expense entries and keep track of our spending.

All of our income entries are in green and all of our expense entries are in red, with the amounts beautifully formatted as currency.

We can:

View a balance bar along the bottom, which always shows the overall balance of all of our entries.
Edit our entries in place by clicking on the name or the amount field.
Mark an entry as paid by swiping right (and see the balance of our paid entries).
Reorder our entries.
Swipe left to delete our entries.

Moneyballs also has a Settings page with a bunch of different settings.

We can:

Disable the prompt to delete - so that when we swipe left on an entry - it's deleted immediately.
Show a Running Balance, which is displayed under all our entries.
Change the Currency Symbol.
We even have a Dark Mode with a completely different color scheme.

And if we quit and restart our app (or reload the webpage) - all of our entries data and settings data is maintained.

While creating Moneyballs you're also going to use:

Pinia Setup Stores
Quasar Plugins
Custom Directives
Custom Composables
Capacitor plugins
Tons of Quasar Components
And much more...

And we're going to get this app running and working on five different platforms:

Web Browser
iOS
Android
Mac
Windows

iOS & Android apps generated with Quasar (& Capacitor) can actually be deployed to the App Store & Play Store and monetized with in-app purchases, subscriptions and ads.

Mac & Windows apps generated with Quasar (& Electron) can be deployed to the Mac & Windows stores, or distributed online.

For this course, I recommend using a Mac and having a basic understanding of JavaScript, Vue 3 and the Composition API.

What's inside

Learning objectives

How to create a money management app using vue 3 & quasar 2
How to manage the app's state management using pinia (setup stores)

How to to deploy the app to mac & windows apps (using electron)
How to deploy the app to ios & android apps (using capacitor)

How to create a money management app using vue 3 & quasar 2
How to manage the app's state management using pinia (setup stores)
How to to deploy the app to mac & windows apps (using electron)
How to deploy the app to ios & android apps (using capacitor)

Syllabus

Introduction

Introduction & Course App: Moneyballs

What is Quasar?

Vue 3 & Composition API Basics

Career center

Learners who complete Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia) will develop knowledge and skills that may be useful to these careers:

Cross Platform Application Developer

A Cross Platform Application Developer designs and builds software that runs seamlessly across multiple operating systems and devices from a single codebase. This course is exceptionally well-suited for aspiring Cross Platform Application Developers, as it directly teaches the creation of a money management app for Web, iOS, Android, Mac, and Windows platforms. Learners gain hands-on experience with critical tools like Quasar V2, Capacitor, and Electron, which are fundamental for achieving true cross-platform functionality. The curriculum covers everything from initial setup and UI design using Quasar Components, to managing application state with Pinia Setup Stores, ensuring data persistence, and adapting the user experience across diverse environments. This specific training in deploying to five distinct platforms provides a unique and highly sought-after advantage for entering this dynamic career field.

See salaries and explore the career path for Cross Platform Application Developer

Vuejs Developer

A Vuejs Developer specializes in building user interfaces and single-page applications using the Vue.js framework. This course provides a deep dive into advanced Vue 3 concepts, making it highly pertinent for anyone looking to excel as a Vuejs Developer. Through building the Moneyballs app, learners become proficient with the Composition API, a core feature of Vue 3, and leverage Pinia for robust state management. The practical application of custom directives and custom composables within the course further solidifies a learner's ability to create efficient, modular, and maintainable Vue.js applications. This focused experience with a leading JavaScript framework is invaluable for securing roles demanding expertise in Vue.js development.

See salaries and explore the career path for Vuejs Developer

Mobile Application Developer

A Mobile Application Developer creates software programs for smartphones, tablets, and other mobile devices. This course is highly relevant for aspiring Mobile Application Developers, as it specifically covers the deployment of the Moneyballs app to iOS and Android using Quasar and Capacitor. Learners will gain practical experience in taking a web-based application and transforming it into native-like mobile experiences. Understanding how to set up development environments, handle navigation, and adapt UI elements for mobile screens are core competencies developed. This hands-on process of generating and deploying apps to the App Store and Play Store provides crucial experience for entering the mobile development landscape.

See salaries and explore the career path for Mobile Application Developer

Frontend Engineer

A Frontend Engineer is responsible for implementing the visual and interactive elements that users see and interact with in a web or application interface. This course offers substantial preparation for a career as a Frontend Engineer by focusing on building a comprehensive user interface for the Moneyballs app. Learners will master Vue 3 and the Composition API for reactive UI development, Quasar V2 for component-based design and styling, and Pinia for efficient state management. The curriculum covers intricate UI features such as balance bars, editable entries, swipe gestures for actions, and dynamic settings pages, all crucial skills for building rich and responsive user experiences.

See salaries and explore the career path for Frontend Engineer

Web Application Developer

A Web Application Developer designs and implements interactive software applications that run in a web browser. This course offers direct experience relevant to a Web Application Developer role, as it focuses on creating the Moneyballs app which is first and foremost a web application. Learners acquire expertise in building sophisticated user interfaces with Vue 3 and Quasar V2, handling data input and display, and managing application state using Pinia. The course's emphasis on responsive design, currency formatting, and interactive elements like editing and sorting entries, provides a strong foundation for developing feature-rich and user-friendly web applications capable of handling complex data interactions.

See salaries and explore the career path for Web Application Developer

Desktop Application Developer

A Desktop Application Developer builds software programs that run locally on desktop operating systems like Mac and Windows. This course is highly beneficial for individuals pursuing a career as a Desktop Application Developer, as it teaches the deployment of the Moneyballs app to Mac and Windows using Quasar and Electron. Learners gain practical insight into packaging web technologies into standalone desktop applications, understanding the process of distribution. The curriculum’s focus on maintaining data and settings across restarts, along with implementing features like dark mode and custom currency settings, directly translates to the skills required for creating robust and user-friendly desktop software solutions.

See salaries and explore the career path for Desktop Application Developer

User Experience Engineer

A User Experience Engineer bridges design and development to create intuitive, efficient, and enjoyable user interactions within software. This course provides practical experience invaluable for a User Experience Engineer by focusing on crafting a highly interactive and user-centric money management app. Learners will implement features like swipe-to-delete, in-place editing, and reordering entries, which directly enhance usability. The creation of a settings page with options for delete prompts, running balance, and dark mode demonstrates an understanding of user customization. This detailed attention to interaction design and feedback within the course prepares one to translate UX principles into functional application features.

See salaries and explore the career path for User Experience Engineer

User Interface Developer

A User Interface Developer focuses on the visual and interactive aspects of an application, ensuring it is aesthetically pleasing and intuitive to use. This course offers comprehensive preparation for a User Interface Developer role by deeply engaging with UI design and implementation using Quasar V2 components with Vue 3. Learners will explore styling, colors, layout structures, and component customization. Specific examples from the Moneyballs app, such as currency formatting, balance bars, entry lists, and interactive forms, underscore the practical skills gained in building diverse UI elements. The ability to create a dark mode and manage different color schemes further enhances a learner's UI development capabilities.

See salaries and explore the career path for User Interface Developer

JavaScript Developer

A JavaScript Developer specializes in using JavaScript, a foundational programming language for web and cross-platform development, to build dynamic applications. This course strongly reinforces the skills necessary to become a proficient JavaScript Developer. While building a cross-platform money management app, learners continuously apply JavaScript principles through Vue 3's Composition API, Pinia's state management, and the creation of custom composables and directives. The course's recommendation for a basic understanding of JavaScript highlights its central role, providing practical, project-based experience that solidifies core programming logic and problem-solving abilities within a modern development stack.

See salaries and explore the career path for JavaScript Developer

Software Engineer Application Development

A Software Engineer Application Development role involves designing, developing, testing, and deploying robust software applications across various platforms. This course helps build a foundation for a Software Engineer Application Development career by guiding learners through the entire process of creating a functional, multi-platform money management application. From initial setup and folder structure to implementing complex features like state management with Pinia, handling user interactions, and deploying to web, mobile, and desktop environments, the course covers a full application lifecycle. This holistic approach to building a real-world product equips learners with practical engineering principles for creating deployable software.

See salaries and explore the career path for Software Engineer Application Development

Application State Management Specialist

An Application State Management Specialist focuses on designing and implementing efficient systems for handling an application's data flow and state across its various components. This course is highly relevant for an Application State Management Specialist through its in-depth coverage of Pinia Setup Stores, a modern and powerful state management library for Vue 3 applications. Learners will move data, computed properties, and actions into a Pinia store, demonstrating how to centralize and organize application state effectively. This expertise in managing complex data, such as income, expense entries, and user settings, is crucial for building scalable and maintainable applications with clear data integrity.

See salaries and explore the career path for Application State Management Specialist

Financial Technology Frontend Developer

A Financial Technology Frontend Developer builds the user-facing applications for financial services, often dealing with sensitive data, transactions, and complex displays. This course is particularly tailored for a Financial Technology Frontend Developer due to its focus on creating a money management app called Moneyballs. Learners will implement features such as income and expense tracking, balance displays, currency formatting, and the ability to edit and categorize entries. Understanding how to securely manage and display financial data accurately, alongside building intuitive interfaces for financial interactions, provides a directly applicable skillset for roles within the fintech industry.

See salaries and explore the career path for Financial Technology Frontend Developer

Technical Product Builder

A Technical Product Builder takes a product concept from ideation through to a fully functional and deployable application, often with a hands-on coding approach. This course helps build a foundation for a Technical Product Builder role by guiding learners through the complete process of building the Moneyballs money management app. From designing the user interface and implementing core functionalities like adding, editing, and deleting entries, to managing application state and deploying across web, iOS, Android, Mac, and Windows, learners experience the full product development cycle. This end-to-end project experience is critical for developing a product-oriented mindset.

See salaries and explore the career path for Technical Product Builder

Full Stack Developer Frontend Biased

A Full Stack Developer Frontend Biased possesses strong frontend development skills while also understanding the broader architecture of an application, including deployment aspects. This course helps build a foundation for a Full Stack Developer Frontend Biased path by providing extensive experience in building a complete frontend application, including its deployment to multiple target environments. While it does not cover backend development, the comprehensive understanding of Vue 3, state management with Pinia, cross-platform deployment via Capacitor and Electron, and persistence of data and settings, prepares learners to integrate with backend services. This broad application knowledge is valuable for understanding the holistic product delivery process.

See salaries and explore the career path for Full Stack Developer Frontend Biased

Open Source Contributor Quasar Framework

An Open Source Contributor Quasar Framework actively participates in developing and improving the Quasar framework or related ecosystem projects. This course may be useful for an Open Source Contributor Quasar Framework because it provides a deep, hands-on understanding of Quasar V2, its components, plugins, and how it integrates with Vue 3. By building a complex application like Moneyballs, learners gain practical insights into the framework's capabilities and potential areas for enhancement. This in-depth experience can foster the specific technical expertise needed to engage with the Quasar community, report issues, suggest features, or even contribute code to the framework's core or its associated libraries.

See salaries and explore the career path for Open Source Contributor Quasar Framework