Web Development


Weather App with Vue JS & Quasar (for Mobile, Desktop & Web)

Use Vue JS to create a Beautiful Weather App for Web, iOS, Android, Mac & Windows - with Quasar, using a Single Codebase

4.70 (124 reviews)


1.5 hours


May 2020

Last Update
Regular Price

The Complete Guide to Vue.Js

What you will learn

How to create a beautiful, cross-platform weather app for Android, iOS, Mac, Windows & Web using Vue JS & Quasar Framework

How to get the user's location on all devices

How to create Icons & Splashscreens for all devices

How to launch the app for development on Mac, Windows, iOS & Android

How to setup simulators for iOS & Android

How to debug your app on all platforms

How to launch & debug the app on Real iOS & Android devices

A quick introduction to creating Cross-Platform apps with Vue JS & Quasar Framework


In this short course, I'll show you how to use Vue JS (and Quasar Framework) to create a gorgeous Weather App from scratch - and get it running and working on 5 different platforms - Web, iOS, Android, Mac & Windows.

In this app we can get the user's location and display the weather where they are (using the OpenWeatherMap API) all within a beautifully designed layout.

We can also search for a location using the Search Bar.

We'll create beautiful Icons & Splashscreens for all the different devices.

We'll setup Simulators for testing on Android & iOS

And setup a Virtual Machine using Virtualbox for testing on Windows.

We'll even get the app running on Real iOS & Android devices.

If you want a quick introduction to creating Cross-Platform Apps using Vue JS, then this is the course for you.


Weather App with Vue JS & Quasar (for Mobile, Desktop & Web)
Weather App with Vue JS & Quasar (for Mobile, Desktop & Web)
Weather App with Vue JS & Quasar (for Mobile, Desktop & Web)
Weather App with Vue JS & Quasar (for Mobile, Desktop & Web)



Introduction & Course App

What is Quasar?

Getting Started

Install Node.js and Quasar CLI

Create & Launch a New Quasar Project

Folder Structure - Layouts, Pages & Routes

Install Vue Devtools on Chrome

Vue.js Basics

Clean up the Project

Layout & Design

Layout - Remove Header & Drawer

Add a Gradient Background

Design - Search Bar

Design - Location, Weather Description & Temperature

Design - Add Image & Skyline

Design - Start Screen

Get Location & Weather

Get User's Location

Setup OpenWeatherMap API

Get Weather by Coordinates

Display Data in View

Get Weather By Search

Finishing Touches

Different Backgrounds for Day & Night

Add Loading Screens

Icons & Splash Screens

Install IconGenie

Generate Icons & Splashscreens

Create an NPM Script for Easy Icon & Splash Generation

Platforms - Mac (Electron)

Module Introduction / If You Don't Have a Mac

Launch App on Mac for Development

Add a Geolocation Fallback for Electron

src-electron folder

Generate Mac Icons

Build for Mac

Publishing to Mac App Store

Platforms - Windows (Electron)

Module Introduction

Install Virtualbox

Install Windows 10 Virtual Machine

Setup Virtual Machine & Enable File Sharing

How to work on the Windows version of your app

Build the App for Windows

Launch App on Windows 10 Virtual Machine

Publishing to the Windows Store

Platforms - iOS (Cordova)

Module Introduction / If You Don't Have a Mac

Install Cordova and Xcode

Launch App on iOS Simulator for Development

Generate Icons & Splashscreens

Debug with Safari Dev Tools

Src-cordova folder

Install Cordova Geolocation Plugin

Simulator - Run on Different iOS Devices

Develop on a Real iOS Device

Build the App for Production

Publishing to iOS App Store

Platforms - Android (Cordova)

Module Introduction

Install Android Studio and SDK

Add Android to your Path (Mac Users)

Install Additional Software & Set Environment Variables (Windows Users)

Setup Android Virtual Device

Launch on Android Simulator

Generate Icons & Splash Screens

Debug with Chrome Dev Tools

Fix Error On Simulator

Develop on a Real Android Device

Build the App for Production

Publish to Google Play Store

Finished Source Code

Finished Source Code

More Quasar

More Quasar


Istvan22 February 2021

I think is a great short intro into mobile APP development. Has a lot's of things to learn & experiment. Thanks!

Thomas21 February 2021

The Quasar Framework is by far the most cost and time efficient way to get digital products in app, web and desktop format out there.

Fritz29 January 2021

alot of the content is out of date. I've struggled with getting chrome to give location (did one time, then quit, but i got safari to do it if i enable https). the IOS simulator has white space on bottom, and the keyboard doesn't come up right (gets stuck midway). sdkmanager pukes and only worked if i enable the new CLI tools and uninstall the old ones. several other minor things i needed to work around.

Durojaye30 December 2020

This is basically the dumb down version of the previous course. I'm a little unimpressed but since the other courses have been good so far, this is just a bit lack lustre

飯塚翔27 November 2020

quasar やAPIを使ってるのはいいんですが、最後のIOS,Android、Windowsは講座通りやってもエラーが出まくってしまい、調べても英語ばっかりなので、途中で断念しました。 ios デプロイとかは、専用で勉強した方がいいかもしれません。 結構新しい講座だったのかも??

Diego24 August 2020

This is a great introduction course to Quasar Framework! And Danny is an awesome teacher. I enjoyed and learned a lot.

Jens25 July 2020

This course is a short and quick one. I kind of addition to his other Quasar course. I like how Danny has put an incredible amount of information in just 1,5 hours. Danny is very good at explaining all the steps to get your first quasar app running and uploaded to the stores. I also like the way he teaches: Very focussed and without bells and whistles. For me Dannys courses are essential for all vue/quasar-developers.

Massimiliano18 July 2020

Good instructor. Well done course! I hope this or the other course will be updated with Capacitor as well

No22 June 2020

Awesome course. Instructor explains everything clearly without cutting corners. Learned a ton of things in short time.

Sam9 June 2020

Great - this is my third or fourth course with Danny and it is fast, informative, well organized and well presented.

BernabéGarcía7 June 2020

My only complain is that the teacher sometimes is a bit fast. If the videos would last 30 seconds it would be great, at least for me. And now the good things: 1) One thing I love is that he always shows or write in the screen WHERE IS THE DOCUMENTATION!. Which is great. Most courses wrote you or explain you what's the code but almost no one tells you "well, here it's the documentation, read this, and what I am doing is because I am reading this." Basically because this is what it's usually done. I am a junior web developer, but mostly I read the documentation before I write code, before I install with npm or yarn, etc, etc. Also I love what Quasar does. To generate mobile, web and electron is wonderful. The only thin I've missed is something like vue-router, react-router, Angular Router. A way to navigate a SPA. But anyway, this app has only one page. I will try to learn more with the 14 hour Quasar course. So, thank you Danny.

Related Courses

Mobile Development class : Build NewsFeed Android App and Wordpress API
Mobile Development class : Build NewsFeed Android App and Wordpress API
Android Mobile Development Bootcamp - Part 2: Activities, Intents & The Android Manifest
Android Mobile Development Bootcamp - Part 2: Activities, Intents & The Android Manifest
Android Mobile Development Bootcamp 2021 - Start making apps today!
Android Mobile Development Bootcamp 2021 - Start making apps today!


Udemy ID


Course created date


Course Indexed date
Angelcrc Seven
Course Submitted by