We may earn an affiliate commission when you visit our partners.
Course image
Danny Connell

In this course I’ll show you how to use Quasar Framework V1 (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.

Read more

In this course I’ll show you how to use Quasar Framework V1 (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.

NOTE: This course is for Quasar V1 (with Vue 2). Quasar V2 (with Vue 3) is not covered in this course.

Enroll now

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

What's inside

Learning objectives

  • How to create a real-world, cross-platform app for web, ios, android, mac and windows using quasar framework v1 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 v1 and vuejs 2

Syllabus

Get an overview of the course and an overview of Quasar Framework & Vue.js

In this video I'll introduce the course, demonstrate the app we'll be building (Awesome Todo) and explain everything I'll be covering throughout the course.

Read more
What is Quasar?
What is Vue.js?
Getting started
Module Introduction
Install Node.js and Quasar CLI
Create & launch a new Quasar Project in the Browser
Update: Quasar V1 Documentation
Auto-import Components & Directives
Folder structure - Layouts, Pages, Routes & more
In this module you will understand all of the basics of Vue.js
Anatomy of a Vue Single File Component
Binding Data to the View
Two-way Data Binding with v-model
Events & Methods - Click
Events - Keyboard & more
Showing and Hiding Elements - v-show
Conditional Rendering - v-if & v-else
Computed Properties
Filters
Directives
Binding to Attributes & CSS
Lifecycle Hooks - Introduction
Lifecycle Hooks - In Action
Refs
Practise Vue.js Basics
You will be able to display lists of data and break your components up into child components.
Displaying Lists with v-for
Displaying more details
Child Components
Passing Data to Child Components - Props
Passing Data to Child Components - Slots
Keys
Practise Vue.js Lists & Components
In this module we will setup pages and routes for our app, add navigation and give it some style
Pages and Routes
Add Page Navigation to Sidebar (Drawer)
Tab Navigation for Mobile
Consolidating Navigation Data
Only show Drawer on Desktop, Tabs on Mobile
Adding some Style to the Layout
Add SCSS support
Customise Theme with Theme Builder
Module Code
In this module we'll create a list of tasks using Quasar Components.
Display a List of Tasks
Add Due Date and Time
Add some Style to the List of Tasks
We will use Vuex to create a centralised Store for our data and associated methods.
Introduction to Vuex
Setup a Vuex Store
Add Tasks Data to the Vuex Store / Vue Devtools Chrome Extension
Create a Getter for the Tasks Data
Change Tasks Array into an Object Structure
Put Task into a Child Component
In this module, we'll discover how to manipulate State data in the Vuex Store using Actions & Mutations
Set Completed Status in Vuex Store
Delete Task - Add Delete Button & Confirm Dialog
Delete Task - Delete the Task from the State
In this module we'll add an Add Task dialog, add some fields and validate the fields before sending the task data to the Vuex Store for adding to the State.
Add Task - Button & Modal
Add Task - Customize the Modal
Add the Fields
Form Validation & Submission
Vuex - Add Task when Form Submitted
A Few Improvements
In this module we'll add the ability to Edit a task, as well as discovering more about Child Components and Update & Sync
Add Task - Reusable Components (1/5): Modal Header
Add Task - Reusable Components (2/5): Task Name
Add Task - Reusable Components (3/5): Due Date
Add Task - Reusable Components (4/5): Due Time
Add Task - Reusable Components (5/5): Buttons
Edit Task - Add the Button & Show the Modal
Edit Task - Customise & Setup the Modal
Practice Vuex, Forms, Quasar Components & Vue.js
In this module we'll split the tasks into separate lists, add beautiful headings to the list and display a "Not tasks to do!" banner when all tasks are complete.
Create Getters for Todo and Completed Tasks
Display Todo and Completed Tasks in Separate Lists
Add Headings to the Task Lists
Make the Heading Background Color Adjustable
Conditionally Show & Hide the Task Lists
Add a "No tasks to do today!" Banner
Use Global Event Bus to fix the "No tasks" Banner Button
In this module we'll improve our app with a Search Bar.

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Introduces real-world app development and industry-level cross-platform deployment for web, iOS, Android, desktop, and more
Employs in-demand technologies like Vue.js, Vuex, Firebase, and Quasar Framework
Provides a flexible course outline that allows for individual progress and learning style
Incorporates live, hands-on exercises and examples to reinforce understanding and practical application of concepts
Provides opportunities to build, deploy, and see your creation functioning in the real world, fostering a sense of accomplishment and practical, hands-on experience

Save this course

Save Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase) to your list so you can find it easily later:
Save

Reviews summary

Best course yet

According to students, the course is well-received with students saying it's the best course yet. Danny presents and explains content clearly and concisely without yammering on. He responds to comments in a timely manner.
Practice projects are helpful.
"Even the practice projects are helpful :)"
Danny responds to comments in a timely manner.
"He also responds to comments in a timely manner."
Danny presents and explains content clearly and concisely.
"Super Amazing!"
"Danny does a great job of presenting and explaining a very nice project"
"He explains things clearly without yammering on."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase) with these activities:
Review HTML, CSS, and JavaScript basics
Refresh your understanding of the fundamental web development technologies used in conjunction with Quasar Framework.
Browse courses on HTML
Show steps
  • Review HTML tutorials or documentation
  • Review CSS tutorials or documentation
  • Review JavaScript tutorials or documentation
Explore Quasar Framework documentation
Provides a foundation in Quasar Framework's features and capabilities, enhancing understanding of its core concepts.
Show steps
  • Visit Quasar Framework documentation website
  • Review key sections such as Installation, Components, Directives, and Plugins
  • Experiment with code examples and demos
Attend a meetup or conference related to Quasar Framework, Vuex, or Firebase.
Connect with other developers and learn about the latest trends.
Show steps
  • Find a meetup or conference related to Quasar Framework, Vuex, or Firebase.
  • Register for the event.
  • Attend the event.
12 other activities
Expand to see all activities and additional details
Show all 15 activities
Practice Quasar CLI commands
Practice using the Quasar CLI to create, build, and run Quasar projects.
Browse courses on CLI
Show steps
  • Create a new Quasar project using the Quasar CLI
  • Build the project using the Quasar CLI
  • Run the project using the Quasar CLI
Create multiple Vue.js components
Reinforces the principles of component-based development and deepens understanding of Vue.js's component system.
Show steps
  • Design a simple Vue.js application with multiple components
  • Create child and parent components with data binding and event handling
  • Implement reusable components across multiple pages
Follow tutorials on Quasar Framework
Enhance your understanding of Quasar Framework by following tutorials that provide hands-on guidance.
Show steps
  • Find tutorials on the Quasar Framework website
  • Follow the tutorials step-by-step
  • Experiment with the code and try out different features
Practice CSS Flexbox and Grid
Flexbox and Grid are essential CSS layout tools for modern web development.
Browse courses on CSS Flexbox
Show steps
  • Take an online course or tutorial on CSS Flexbox and Grid.
  • Build a simple web page using Flexbox or Grid to practice your skills.
  • Use Flexbox or Grid to improve the layout of an existing web page.
Attend a workshop on Quasar Framework, Vuex, or Firebase.
Learn from experts and get hands-on experience.
Show steps
  • Find a workshop that covers Quasar Framework, Vuex, or Firebase.
  • Register for the workshop.
  • Attend the workshop.
Participate in Quasar Framework discussion forums
Engage with the Quasar community by participating in discussion forums, asking questions, and sharing your experiences.
Show steps
  • Find Quasar Framework discussion forums
  • Join the forums and create an account
  • Ask questions and participate in discussions
Join a Quasar Framework community forum or discussion group
Fosters collaboration and knowledge exchange, allowing students to connect with others in the field and gain diverse perspectives.
Browse courses on Community Engagement
Show steps
  • Join a relevant Quasar Framework community forum or discussion group
  • Participate in discussions, ask questions, and share knowledge
  • Collaborate with peers on projects or troubleshooting
  • Connect with potential mentors or collaborators
Build a Quasar Framework project with Vuex and Firebase
Build a complete web application using the same technologies used in this course.
Show steps
  • Find a Quasar Framework tutorial that covers Vuex and Firebase.
  • Follow the tutorial to build a simple web application.
  • Customize the application to your own liking.
Create a blog post or video tutorial on Quasar Framework
Solidify your understanding of Quasar Framework by creating content that shares your knowledge with others.
Show steps
  • Choose a topic related to Quasar Framework
  • Research and gather information
  • Write a blog post or create a video tutorial
  • Publish your content and share it with the community
Develop a Quasar Framework application for a specific purpose
Provides hands-on experience with Quasar Framework and Vue.js, solidifying understanding through real-world application.
Browse courses on Full-stack Development
Show steps
  • Identify a specific problem or use case
  • Design and plan the application architecture
  • Develop the UI using Quasar Framework and Vue.js
  • Implement functionality using Vuex and Firebase
  • Deploy the application to a platform
Participate in a hackathon or coding challenge related to Quasar Framework
Test your skills and collaborate with others in a competitive environment while working with Quasar Framework.
Show steps
  • Find a hackathon or coding challenge related to Quasar Framework
  • Form a team or participate individually
  • Develop a solution using Quasar Framework
  • Submit your project and compete for prizes or recognition
Write a blog post about your experience building a Quasar Framework app with Vuex and Firebase.
Share your knowledge and help others learn about these technologies.
Show steps
  • Choose a topic for your blog post.
  • Write a draft of your blog post.
  • Edit and proofread your blog post.
  • Publish your blog post.

Career center

Learners who complete Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase) will develop knowledge and skills that may be useful to these careers:
Web Developer
Web Developers design and create websites. This course provides a solid foundation in web development, covering topics such as HTML, CSS, JavaScript, and responsive design. You will also learn how to use Quasar Framework to create cross-platform web applications. This course will help you gain the skills you need to become a successful Web Developer.
Desktop Developer
Desktop Developers create and maintain software applications for desktop computers. This course will teach you how to use Quasar Framework to create cross-platform desktop applications. You will also learn about the unique challenges of desktop development, such as different operating systems and window management. This course will help you gain the skills you need to become a successful Desktop Developer.
Front-End Developer
Front-End Developers are responsible for the user interface and functionality of a website or application. This course will provide you with a strong foundation in front-end development, covering topics such as HTML, CSS, JavaScript, and responsive design. You will also learn how to use Quasar Framework to create interactive and user-friendly front-end applications. This course will help you gain the skills you need to become a successful Front-End Developer.
Mobile Developer
Mobile Developers create and maintain mobile applications for smartphones and tablets. This course will teach you how to use Quasar Framework to create cross-platform mobile applications. You will also learn about the unique challenges of mobile development, such as device fragmentation and touch screen interfaces. This course will help you gain the skills you need to become a successful Mobile Developer.
User Experience (UX) Designer
UX Designers focus on the user experience of websites and applications. This course will provide you with a strong foundation in UX design, covering topics such as user research, interaction design, and information architecture. You will also learn how to use Quasar Framework to create user-friendly and intuitive UX designs. This course will help you gain the skills you need to become a successful UX Designer.
Computer Programmer
Computer Programmers write and test code that makes computer applications and software run. This course helps build a foundation in web, mobile, and desktop software development. Through hands-on tasks, you will learn about essential programming principles and the latest programming languages, including Vue.js, Vuex, and Quasar Framework. Furthermore, you will gain practical experience in using Firebase to manage data. This comprehensive approach to software development will help you become a versatile Computer Programmer who can work on a wide range of projects.
Back-End Developer
Back-End Developers are responsible for the server-side logic and data management of a website or application. This course will provide you with a solid foundation in back-end development, covering topics such as Node.js, Express.js, and MongoDB. You will also learn how to use Firebase to manage data. This course will help you gain the skills you need to become a successful Back-End Developer.
User Interface (UI) Designer
UI Designers create the visual elements of websites and applications. This course will provide you with a strong foundation in UI design, covering topics such as user experience (UX), visual design, and prototyping. You will also learn how to use Quasar Framework to create beautiful and user-friendly UI designs. This course will help you gain the skills you need to become a successful UI Designer.
Product Manager
Product Managers are responsible for the overall vision and strategy of a product. This course will provide you with a strong foundation in product management, covering topics such as product strategy, roadmapping, and user research. You will also learn how to use Quasar Framework to create user-friendly and successful products. This course will help you gain the skills you need to become a successful Product Manager.
Software Architect
Software Architects design and develop the overall architecture of software systems. This course will provide you with a strong foundation in software architecture, covering topics such as system design, software patterns, and software quality. You will also learn how to use Quasar Framework to create scalable and maintainable software systems. This course will help you gain the skills you need to become a successful Software Architect.
Data Analyst
Data Analysts collect, analyze, and interpret data to help businesses make better decisions. This course will provide you with a strong foundation in data analysis, covering topics such as data visualization, statistical analysis, and machine learning. You will also learn how to use Firebase to manage and analyze data. This course will help you gain the skills you need to become a successful Data Analyst.
Full-Stack Developer
Full Stack Developers are responsible for the entire software development process, from design to deployment. This course will provide you with a strong foundation in full stack development, covering topics such as front-end development, back-end development, and database management. You will also learn how to use Quasar Framework to create complete and scalable web applications. This course will help you gain the skills you need to become a successful Full Stack Developer.
Data Scientist
Data Scientists use data to solve complex problems and make predictions. This course will provide you with a strong foundation in data science, covering topics such as machine learning, artificial intelligence, and big data. You will also learn how to use Firebase to manage and analyze data. This course will help you gain the skills you need to become a successful Data Scientist.
Software Engineer
Software Engineers apply engineering principles to the design, development, and maintenance of software systems. This course will provide you with a strong foundation in software engineering, covering topics such as software design, software development, and software testing. You will also learn how to use Quasar Framework to create reliable and maintainable software systems. This course will help you gain the skills you need to become a successful Software Engineer.
Database Administrator
Database Administrators are responsible for the management and performance of databases. This course will provide you with a strong foundation in database administration, covering topics such as database design, database optimization, and data security. You will also learn how to use Firebase to manage and administer databases. This course will help you gain the skills you need to become a successful Database Administrator.

Reading list

We've selected six books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase).
Provides a comprehensive overview of NativeScript, an open-source cross-platform mobile development framework, and how to use it to build cross-platform mobile applications for iOS and Android.
Provides a comprehensive guide to Vue.js, covering topics such as component-based architecture, state management, and testing.
Provides a practical guide to using Vue.js for building user interfaces.
Provides a collection of recipes for solving common problems encountered when developing Vue.js applications.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase).
Vue JS 2.0 - Mastering Web Apps
Most relevant
Build Web Apps with Vue JS 3 & Firebase
Most relevant
Vue JS Essentials with Vuex and Vue Router
Most relevant
Vue.js Essentials - 3 Course Bundle
Most relevant
Complete Vuejs Course: Vue.js + Nuxt.js + PHP + Express.js
Most relevant
The complete VUE JS course ( 2024 edition )
Most relevant
Vue: Getting Started
Most relevant
Master Vuejs from scratch (incl Vuex, Vue Router)
Most relevant
State Management with Vuex 4
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser