Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Vue JS

Quasar Framework: Cross-Platform Vue JS Vuex & Firebase Apps

Use Quasar, Vue JS 2, Vuex & Firebase to build a Cross Platform, Single Codebase App for Web, iOS, Android, Mac, Windows
Rating: 4.7 out of 54.7 (1,491 ratings)
5,137 students
Created by Danny Connell
Last updated 1/2021
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • How to create a real-world, cross-platform app for web, iOS, Android, Mac and Windows using Quasar Framework and Firebase
  • How to manage the state of your app using Vuex
  • How to create a back-end for the app using Firebase Realtime Database - including user authentication, reading and writing data
  • All the essentials of Quasar Framework and VueJS
Curated for the Udemy for Business collection

Course content

36 sections • 260 lectures • 15h 25m total length

  • Preview03:26
  • What is Quasar?
    Preview03:30
  • What is Vue.js?
    Preview07:16

  • Preview00:25
  • Install Node.js and Quasar CLI
    Preview01:40
  • Preview02:41
  • Auto-import Components & Directives
    00:25
  • Preview03:26

  • Preview00:37
  • Preview01:55
  • Binding Data to the View
    Preview01:54
  • Two-way Data Binding with v-model
    Preview00:59
  • Preview02:31
  • Events - Keyboard & more
    Preview05:42
  • Preview02:23
  • Preview02:43
  • Computed Properties
    Preview05:38
  • Preview03:23
  • Directives
    Preview02:33
  • Binding to Attributes & CSS
    Preview05:11
  • Preview02:02
  • Preview03:15
  • Preview04:15
  • Practise Vue.js Basics
    1 question

  • Module Introduction
    00:49
  • Displaying Lists with v-for
    02:25
  • Displaying more details
    05:17
  • Child Components
    04:03
  • Passing Data to Child Components - Props
    02:10
  • Passing Data to Child Components - Slots
    00:52
  • Keys
    01:39
  • Practise Vue.js Lists & Components
    1 question

  • Module Introduction
    00:20
  • Pages and Routes
    04:04
  • Add Page Navigation to Sidebar (Drawer)
    06:59
  • Tab Navigation for Mobile
    06:11
  • Consolidating Navigation Data
    05:23
  • Only show Drawer on Desktop, Tabs on Mobile
    03:51
  • Adding some Style to the Layout
    07:21
  • Add SCSS support
    02:01
  • Customise Theme with Theme Builder
    01:42
  • Module Code
    00:06

  • Module Introduction
    00:22
  • Display a List of Tasks
    07:15
  • Add Due Date and Time
    07:31
  • Add some Style to the List of Tasks
    04:02
  • Module Code
    00:06

  • Introduction to Vuex
    03:38
  • Setup a Vuex Store
    03:05
  • Add Tasks Data to the Vuex Store / Vue Devtools Chrome Extension
    02:15
  • Create a Getter for the Tasks Data
    04:01
  • Change Tasks Array into an Object Structure
    03:00
  • Put Task into a Child Component
    04:07
  • Module Code
    00:06

  • Module Introduction
    00:23
  • Set Completed Status in Vuex Store
    10:16
  • Delete Task - Add Delete Button & Confirm Dialog
    06:20
  • Delete Task - Delete the Task from the State
    04:22
  • Module Code
    00:06

  • Module Introduction
    00:34
  • Add Task - Button & Modal
    08:00
  • Add Task - Customize the Modal
    04:07
  • Add the Fields
    09:02
  • Form Validation & Submission
    08:24
  • Vuex - Add Task when Form Submitted
    10:11
  • A Few Improvements
    12:40
  • Module Code
    00:06

  • Module Introduction
    00:27
  • Add Task - Reusable Components (1/5): Modal Header
    03:15
  • Add Task - Reusable Components (2/5): Task Name
    05:08
  • Add Task - Reusable Components (3/5): Due Date
    03:55
  • Add Task - Reusable Components (4/5): Due Time
    02:42
  • Add Task - Reusable Components (5/5): Buttons
    02:58
  • Edit Task - Add the Button & Show the Modal
    04:09
  • Edit Task - Customise & Setup the Modal
    05:59
  • Module Code
    00:06
  • Practice Vuex, Forms, Quasar Components & Vue.js
    1 question

Requirements

  • Basic HTML and CSS knowledge is required
  • Basic JavaScript knowledge is beneficial but not required
  • Basic VueJS knowledge is beneficial but not required
  • A Mac for development is preferred

Description

In this course I’ll show you how to use Quasar Framework (along with Vue JS 2, Vuex & Firebase) to create real-world, cross-platforms apps using a single Vue JS codebase; and get these apps production-ready and deployed to all the major platforms - Web, iOS, Android, Mac & Windows.

Throughout this course we'll create a real-world app called Awesome Todo. In this app we can add, edit or delete tasks and mark them as completed. 

We can also sort tasks by name or date and search through tasks using a search bar.

It's also going to have a Settings page, with 2 real settings which change the way the app works - and which persist when app is closed and restarted (or the browser reloaded on the web version). It will also have a help page, a "visit our website" link and an "email us" link.

The app will have its own back-end created using a Firebase Realtime Database. Users can register, log in and see their data sync in realtime across all of their devices.

We'll get the app production ready for all the different platforms - web, iOS, Android, Mac & Windows.

You'll learn all of the basics of Quasar Framework, including the Quasar CLI, Quasar Components, Quasar Plugins, Quasar Directives, Platform Detection, Layouts, Theming & various Quasar Utilities.

I'll also show you all of the basics of Vue.js, including Data Binding, Events, Computed Properties, Components, Directives, Filters, Lists & Lifecycle Hooks.

You'll learn how to manage the state of your app using Vuex, where I'll cover State, Mutations, Actions & Setters.

I'll cover all of the basics of Firebase, including Authentication, Reading data, Writing data & protecting your data with Database Rules.

By the end of this course, you will be able to create your own real-world apps, with real back-ends which work on all the different platforms.


Who this course is for:

  • Anyone who wants to create real-world, cross platform apps using a single VueJS codebase.
  • Web Developers who want to use their existing skills to create a real-world app on many different platforms (Web, iOS, Android, Mac & Windows)

Featured review

Aidan Dennehy
Aidan Dennehy
17 courses
11 reviews
Rating: 5.0 out of 5a year ago
I think so - I like the style of the instructor - time will tell. -- After 25% - liking this - alot to learn. After 42% - excellent - learning alot, like the instructor Danny. After 72% - fantastic - lots of information, needs practice but I feel worth it. Excellent course Danny - I will watch out for more.

Instructor

Danny Connell
Indie App Developer & Instructor
Danny Connell
  • 4.7 Instructor Rating
  • 2,046 Reviews
  • 6,583 Students
  • 4 Courses

I spent 7 years working for various companies in the UK as a Web Developer (both front- and back-end) becoming highly skilled in HTML, CSS, JavaScript, jQuery, PHP and many more.

After becoming more interested in apps, I worked for 2 years as a Hybrid App Developer, creating cross-platform apps for the charity sector using technologies including Angular, Ionic, Vue.js and more.

I created my own successful app called Fudget (for iOS, Android, Mac & Windows) which is the highest user-rated personal finance app on iOS with over 1.5 million downloads. This eventually enabled me to leave my job and become a full-time Indie App Developer, working on my own apps.

I have a young but successful YouTube channel where I also share coding tutorials.

I'm super excited to share my knowledge on Udemy!

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.