Quasar V1: Cross-Platform Apps (with Vue 2, Vuex & Firebase) from Udemy

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

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.

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

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."

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.

See salaries and explore the career path for 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.

See salaries and explore the career path for 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.

See salaries and explore the career path for 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.

See salaries and explore the career path for 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.

See salaries and explore the career path for User Experience (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.

See salaries and explore the career path for Computer Programmer

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.

See salaries and explore the career path for 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.

See salaries and explore the career path for User Interface (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.

See salaries and explore the career path for 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.

See salaries and explore the career path for 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.

See salaries and explore the career path for 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.

See salaries and explore the career path for 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.

See salaries and explore the career path for 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.

See salaries and explore the career path for 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.

See salaries and explore the career path for Database Administrator