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

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

Show steps

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

Show steps

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.

Show steps

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

Show steps

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

Show steps

Reinforces the principles of component-based development and deepens understanding of Vue.js's component system.

Browse courses on Component-Based Development

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

Show steps

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

Show steps

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.

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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.

Show steps

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.

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

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

NativeScript for Angular Mobile Development

Save

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.

NativeScript for Angular Mobile Development:...

Kindle Edition