Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Udemy

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

via Udemy

Overview

Use Vue 3 (Composition API), Quasar 2 & Pinia to build a Cross Platform App for Web, iOS, Android, Mac & Windows

What you'll learn:
  • 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)

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.

Syllabus

  • Introduction
  • Getting Started
  • Layout, Pages & Navigation
  • Entries Page Design
  • Add Entry
  • Swipe to Delete Entry
  • Pinia - Setup Store
  • Child Components
  • Edit Name & Amount
  • Mark as Paid
  • Sort Entries
  • Use Directives & Transitions to Improve the Experience
  • Settings Page
  • Dark Mode
  • LocalStorage - Save our Data
  • Platforms - Web
  • Platforms - Mac (Electron)
  • Platforms - Windows (Electron)
  • Platforms - iOS (Capacitor)
  • Platforms - Android (Capacitor)
  • Course Round Up

Taught by

Danny Connell

Reviews

4.8 rating at Udemy based on 169 ratings

Start your review of Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.