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 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) 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 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)
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!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024