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

Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia), available at $54.99, has an average rating of 4.58, with 149 lectures, based on 33 reviews, and has 190 subscribers.

You will learn about How to create a money management app using Vue 3 & Quasar 2 How to manage the apps 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) This course is ideal for individuals who are Vue 3 Developers looking to create Mobile & Desktop apps that can be deployed to the various app stores (or distributed online) It is particularly useful for Vue 3 Developers looking to create Mobile & Desktop apps that can be deployed to the various app stores (or distributed online).

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

Summary

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

Price: $54.99

Average Rating: 4.58

Number of Lectures: 149

Number of Published Lectures: 149

Number of Curriculum Items: 149

Number of Published Curriculum Objects: 149

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

How to create a money management app using Vue 3 & Quasar 2

How to manage the apps 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)

Who Should Attend

Vue 3 Developers looking to create Mobile & Desktop apps that can be deployed to the various app stores (or distributed online)

Target Audiences

Vue 3 Developers looking to create Mobile & Desktop apps that can be deployed to the various app stores (or distributed online)

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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction & Course App: Moneyballs

Lecture 2: What is Quasar?

Lecture 3: Vue 3 & Composition API Basics

Lecture 4: Editor & Software Setup

Lecture 5: Chrome & Vue Devtools

Chapter 2: Getting Started

Lecture 1: Install Node.js and Quasar CLI

Lecture 2: Create & launch a new Quasar Project in the Browser

Lecture 3: Folder structure – Layouts, Pages, Routes & more

Lecture 4: Download Source Code

Chapter 3: Layout, Pages & Navigation

Lecture 1: Customize Layout

Lecture 2: Colors & Style

Lecture 3: Pages & Routes

Lecture 4: Navigation

Lecture 5: Active Navigation State

Lecture 6: Improve Drawer width and Breakpoint

Lecture 7: Download Source Code

Chapter 4: Entries Page Design

Lecture 1: Entries List

Lecture 2: Currency formatting

Lecture 3: Composable – useCurrencify

Lecture 4: Composable – useAmountColorClass

Lecture 5: Improve the Entry Text

Lecture 6: Add Entry Form

Lecture 7: Balance Bar

Lecture 8: Computed Property – Balance

Lecture 9: Download Source Code

Chapter 5: Add Entry

Lecture 1: Connect Fields to Reactive Object

Lecture 2: Submit Form & Add Entry

Lecture 3: Fix the Balance Error

Lecture 4: Reset Form & Tidy Code

Lecture 5: Refocus Name Field

Lecture 6: Download Source Code

Chapter 6: Swipe to Delete Entry

Lecture 1: Swipe to Delete with SlideItem

Lecture 2: Prompt before Delete

Lecture 3: Delete the Entry

Lecture 4: Improve the Dialog Message with HTML

Lecture 5: Show a Deleted Notification

Lecture 6: Download Source Code

Chapter 7: Pinia – Setup Store

Lecture 1: State Management & Pinia

Lecture 2: Options vs Setup Stores

Lecture 3: Setup a Pinia Setup Store

Lecture 4: Move Data into Pinia State

Lecture 5: Move Computed Balance into Pinia Getter

Lecture 6: Add Entry Pinia Action

Lecture 7: Delete Entry Pinia Action

Lecture 8: Tidy Up the Entries Page

Lecture 9: Download Source Code

Chapter 8: Child Components

Lecture 1: Balance

Lecture 2: Add Entry

Lecture 3: Entry

Lecture 4: Nothing Here Fallback

Lecture 5: Download Source Code

Chapter 9: Edit Name & Amount

Lecture 1: Setup QPopupEdit for Name

Lecture 2: QPopupEdit – Customization & Style

Lecture 3: Setup QPopupEdit for Amount

Lecture 4: Update the Name & Amount

Lecture 5: Download Source Code

Chapter 10: Mark as Paid

Lecture 1: Mark as Paid

Lecture 2: Paid Entry Style

Lecture 3: Display the Paid Balance

Lecture 4: Paid Balance Getter

Lecture 5: Download Source Code

Chapter 11: Sort Entries

Lecture 1: Install Sortable.js (Vue 3 version)

Lecture 2: Show Sort Handles

Lecture 3: Add a Toggle Button for Sort Handles

Lecture 4: Only Sort on Handles

Lecture 5: Update the State on Reorder

Lecture 6: Fix the Style

Lecture 7: Download Source Code

Chapter 12: Use Directives & Transitions to Improve the Experience

Lecture 1: Directive – selectAll

Lecture 2: Context Menu Issue

Lecture 3: Transition – Nothing Here

Lecture 4: Transition – Balance Bar

Lecture 5: Download Source Code

Chapter 13: Settings Page

Lecture 1: Create a Settings Store

Lecture 2: Prompt to Delete Toggle

Lecture 3: Make the Delete Prompt Optional

Lecture 4: Show Running Balance – Setting & Styles

Lecture 5: Show Running Balance – Getter

Lecture 6: Show Running Balance – Fix Style Issues

Lecture 7: Change Currency Symbol

Lecture 8: Update useCurrencify Composable

Lecture 9: Download Source Code

Chapter 14: Dark Mode

Lecture 1: Add Dark Mode Settings

Lecture 2: Dark Plugin

Lecture 3: Paid Entry Styles

Lecture 4: Composable – useLightOrDark

Instructors

Danny Connell
Indie App Developer & Instructor

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 5 votes

4 stars: 7 votes

5 stars: 21 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!