Create an App for Android, iOS, Mac & Windows - in 30 MINUTES!

How to Create an App for Android, iOS, Mac & Windows - in 30 MINUTES!
My Quasar Course: dannys.link/quasar
In this video, I'll show you how to create a BEAUTIFUL Todo List App from scratch - and get it running & working on FIVE DIFFERENT PLATFORMS - Android, iOS, Mac, Windows & Web Browser - in 30 GOD DAMN MINUTES!
👉 FREE: Watch the first 23 Videos of my Quasar Framework Course: dannys.link/quasar
👉 My VSCode Setup: dannys.link/vscodesetup
👉 Download Fudget: www.fudget.com
👉 DONT CLICK THIS: dannys.link/dontclick
How can it be possible to create an app on FIVE DIFFERENT PLATFORMS in 30 minutes?
Well, it's made possible by Quasar Framework, an incredible new framework which allows you to create a Vue.js app with a SINGLE codebase and deploy it to:
(1) the Web - as a Single Page Application (SPA), a Progressive Web App (PWA) or a Server-side Rendered App (SSR)
(2) a Mobile App - using Cordova - both iOS & Android
(3) a Desktop App - using Electron - for Mac, Windows & Linux
It also has over 100 different Material Components such as Buttons, Lists & Form Components - almost anything you'll need for most apps!
It also has tons of different utilities & plugins such as date formatting, data storage and hot-reloading - which means when you save your work, you see the change instantly - EVEN when developing Mobile & Desktop Apps!
It even has Platform Detection - which means you can display a particular element only on Mobile, then display a different element only on Desktop - OR - you can fire a particular block of JavaScript code only on Mobile - then a different block of code only on Desktop.
Quasar Framework is THE BEST Cross-Platform solution in THE WORLD right now!

[@MakeAppswithDanny]

Thanks for watching! Leave a comment telling us what you think of Quasar! 👉 FREE: Watch the first 23 Videos of my Quasar Framework Course: dannys.link/quasar 👉 My VSCode Setup: dannys.link/vscodesetup 👉 Download Fudget: www.fudget.com 👉 DONT CLICK THIS: dannys.link/dontclick

[@janpospisil3257]

Hi Danny , nice video , but i have problem compile with new created application. Whole problem i posted on quasar forum : forum.quasar-framework.org/topic/7896/problem-with-creating-new-project-dev-not-running . Please could you help me? Thank you very much for your time.

Hey there, nice videos, however due my company compliance I can't reach out your courses with the provided links, please is there any other way to reach your courses?

[@user-fc8de8lc6w]

Hello. Can this awsome framework be used with react instead vuejs ?

[@MakeAppswithDanny]

@@user-fc8de8lc6w No, it's purely Vue.js 👍

[@fernwood]

This is such a great demo. I've been coding since 1980 and have seen it all. From my perspective, Quasar is reaching the apex of development.

[@FaithOfGod]

As such an experienced coder is than any tips you can give? I started with coding robotics and now am getting into app development what can I expect to see with the switch?

[@ernestlu2022]

loslos nimo \

[@papyrifer]

Great video! This also serves as a great (partial) review of your course, as after a while I needed a refresher, and it's also great to see a few things updated.

[@MakeAppswithDanny]

Thanks papyrifer! 👍

[@roblesrt]

I purchased your course and loving it!

[@MakeAppswithDanny]

Thanks Robert! 👍

[@chandragie]

Just started learning Quasar and your video is awesomely clear and helpful. Thanks Danny!

[@MakeAppswithDanny]

Thanks Chandra!

[@mjunek]

As someone who discovered Quasar an hour ago, this 45 minute intro is fantastic. Very clear and very well presented. And I lost count at the number of times you said poo, so I'm cracking up :)

[@MakeAppswithDanny]

Thanks Michael 😂

[@AceixSmart]

nice video explanation! i'm starting a new project and want to use quasar. it looks really good

[@realtebo]

I taken your udemy course. It's absolutely the best course I've taken until now. It's complete, clear, concise, full working and engagin. It's a must.

[@MakeAppswithDanny]

Thanks Mirko 👍

[@eanesazurara318]

Absolutely Fantastic. Really great tutorial. Easy to understand and showing many possibilities of using Quasar to create real applications. Congratulations.

[@MakeAppswithDanny]

Thanks Eanes! 👍

[@dhmsimons]

Please consider adding "Highlight Matching Tag" to your plugins in VS-Code. It will greatly enhance visability of tag-groups in the template section of a compontent. Love your channel, learned a lot already! Keep it up Danny!

[@MakeAppswithDanny]

thanks Dirk! I’ll give that extension a try. Only just moved to VSCode from Sublime so still getting to grips with it 👍

[@dhmsimons]

You'll love it!

[@mpu-easy9568]

Danny, you are the best! Quasar is really a groundbreaking technology. And it's so damned fast. An app like that within 30 minutes with XCode, C#, Qt, Java or whatever? Impossible! And cross platform as well? Totally impossible! Only quasar can deliver this. I never enjoyed programming more than with this framework.

[@MakeAppswithDanny]

Couldn’t agree more mate! Quasar is manna from the development god! 👍

[@mpu-easy9568]

@@MakeAppswithDanny Haha, you're right! And each time god (Razvan) is throwing manna at me, I even get an email! Usually saying: Believer, here is an update with new stuff and some fixes.

[@GuilhermeSchmidtRossi]

Amazing work. You'r fast, and easy to understand. I'll pay happly for your courses man, and this is just my obligation based in your skills. Thx a lot man...

[@MakeAppswithDanny]

Thanks Guilherme, much appreciated! 👍

[@axamon1]

That's awesome! Good work, perfect speed to learn and be amazed. Quasar really got my attention.

[@MakeAppswithDanny]

Great to hear Alberto!

[@xylxylxylxyl]

Very excellent. I have been making apps with apache cordova and vue for a while. I decided to find a library which had components already made as it's a bit time consuming for something I felt like was recreating the wheel. I saw quasar and looked up a showcase of it and stumbled upon this video. Watched the entire video. Really cool stuff.

[@MakeAppswithDanny]

Thanks. I hope you enjoy Quasar 👍

[@Sk8Muski]

Thank you so much, I already knew Angular, but I'm getting into Quasar and Vuejs, so thank you so much, I understand a lot with your video!

[@MakeAppswithDanny]

Great to hear! 👍

[@TheMrIPV]

I want to understand why I haven't found You sooner? Thank You so much! It's amazing work!

[@MakeAppswithDanny]

Thanks Paavali 👍

[@mariaaee]

LOVE QUASAR! Nice tutorial, and really helpful! Thanks alot!

[@MakeAppswithDanny]

Thanks Mari! 👍

[@sarder2008]

Bought your course and started studying for more :) thanks for the awesome course..

[@MakeAppswithDanny]

Awesome, thank you!

[@geminisdos3247]

I saw the entire documentary where you appear, i think will purchase your full course

[@MakeAppswithDanny]

Thanks Geminis. Hope to see you in the course 👍

[@TristanRega]

This is great, I learn 10x faster when someone just straight codes!! Thanks broski! Will be checking out your other vids

[@MakeAppswithDanny]

Thanks Tristan! Yeah, I don't usually go this fast, but I think I will do more videos like this. Maybe an "app in 30 minutes" series / playlist. What do you think? 👍

[@TristanRega]

@@MakeAppswithDanny would absolutely love those! also, do you ever build in aws? I'm to piece together how to get aws amplify cli working with quasar since they have a vue add on for it. trying to figure out how to implement a 'serverless' infrastructure for my initial foundation to start building on -- maybe you can point me in the right direction? -- also def buying the course this weekend, really appreciate the work you put into all this! very helpful.

[@MakeAppswithDanny]

@@TristanRega Thanks for joining the course. Unfortunately, I don't know anything about AWS Amplify at the moment. 👍

[@noexit21]

Shoutout Danny you are an inspiration to anybody who shares the passion for code.

[@MakeAppswithDanny]

Thanks Andy!

[@CCosse-um6jc]

The no-wasted-time format is really nice (edit: and of course the entire content)

[@MakeAppswithDanny]

Thanks C!

[@RichardHowes]

Brilliant to see what you can achieve in such a short time!!

[@MakeAppswithDanny]

Thanks Richard!

[@seancharles1595]

This is surely the standard for all crash-course videos. Danny,. this is the best video for getting stated with anything that I can recall seeing in years. What software did you use for the video recording etc?

[@MakeAppswithDanny]

Wow thanks Sean! I use ScreenFlow for both recording and editing. It’s an amazing piece of software. You just hit record and it records your webcam, screen and microphone. When you hit stop it brings you straight into the editor with separate tracks, ready for editing 👍

[@girishrathor]

The best demo for Quasar.. I am loving this framework and this demo got me on fast-track.. thanks Danny. Are you able to share what plugin you use for those html code.. I can see 'Emmet abbreviation' shown in the editor when you are typing the code. Sorry I am new to visual studio code.. thanks a lot for a great demo!!

[@MakeAppswithDanny]

Thanks for the kind words Girish! Yeah, I'm just using Emmet which is a plugin that's installed in VSCode by default. Tells you how to use it here: code.visualstudio.com/docs/editor/emmet

[@mohsensayari2358]

you and quasar was awesome, thanks

[@MakeAppswithDanny]

Thanks Mohsen! 👍

[@AyushMandowara_xx7]

This video will be a little fast for someone who has no idea about frontend frameworks. but if you keep pausing and coding and keep making progress, you start understand the ideas behind the methods. and the full thing (coding the app for web) can be done in about 2 hours. I learned a bunch of things from this tutorial, like v-if, v-for, @click event triggering, using methods. I think many of the things in Quasar can be directly applied to vue as well, although don't take my word for it. Thank you very much for making this tutorial!

[@MakeAppswithDanny]

Thanks Ayush that's very kind 👍

[@Dipenparmar12]

Awesome tutorial Denny. Thanks.

[@MakeAppswithDanny]

Glad it was helpful! Thanks! 👍

[@sergioalejandro8466]

Very helpful video, it's great the power of Quasar, thanks Danny.

[@MakeAppswithDanny]

Thanks Sergio! Yes I love Quasar!

[@Konarali]

Watched this video and bought the course immediately. Looking forward to making cross-platform apps!

[@MakeAppswithDanny]

Thanks Konarali. I hope you enjoy the course!

[@hmmmpaws]

Totally loved the video, and was able to really apply what I've learnt about Vue and also navigate through Quasar navigation.

[@MakeAppswithDanny]

Great to hear!

[@Epitaph64]

Thanks for making this video, it is quite informative and easy to follow for new users.

[@MakeAppswithDanny]

Glad it was helpful!

[@IvanIsayev]

thanks a lot for your vscode setup. 🙏🏼

[@MakeAppswithDanny]

No worries, Ваня 👍

[@apavel3458]

Really great video, very impressive. Going to try Quasar

[@MakeAppswithDanny]

Thanks! Hope you enjoy Quasar! 👍

[@tehedx]

Great video, love the speed of how much attention you pay to the components. If it's too quick for anyone, let them just pause and look into the docs theirselves.

[@MakeAppswithDanny]

Thanks Edgar. I don’t usually go quite this fast. 👍

[@lukmannakib7497]

Can you tell me where to find the source file for ios app, I have built it successfully now want to run in my iphone

[@thgick]

Great! Thanks Danny. 👍 It would be nice if you would also introduce the new capacitor mode on occasion.

[@MakeAppswithDanny]

Thanks Thomas. Yeah, I'll have to look into that...

[@thgick]

Great! :)

[@igorflores1322]

I just started to learn Quasar and ur video was very helpfull to understand some basics, thanks a lot!!

[@MakeAppswithDanny]

My pleasure Igor! 👍

[@tbugaevsky]

Looks promising, thank you!

[@MakeAppswithDanny]

Hope you like Quasar!

[@arwinchua7322]

sir thank you so much for this awesome tutorial on learning the basics of both vue and quasar. I have learned a lot. I have subscribed and liked the video

[@MakeAppswithDanny]

Glad you learned a lot. Thanks for the sub! 👍

[@wadkantrips9352]

super userful and well designed! thanks

[@MakeAppswithDanny]

Thanks!

[@Steve_102s]

Awesome Tutorial Danny.. I only discovered Quasar thanks to you.. Its Brilliant !

[@MakeAppswithDanny]

Thanks Stephen. Yeah Quasar is something else!

[@bodamat]

Very good tutorial. Thank you! I see, that you use vs code too :)

[@MakeAppswithDanny]

Thanks man! 👍 Yeah I’m enjoying VSCode so far. Thinking of trying to create an extension that splits HTML attributes onto new lines like you see me do in my videos (I’m using a separate app for this now, Keyboard Maestro).

[@atmark666]

this is fantastic. please make more video like this.

[@MakeAppswithDanny]

Thanks. More coming soon 👍

[@ziuamintii9138]

Holy shit - this is amazing! Well done mate! Chapeau! Definitely you made me look into Electron/Quasar. Keep up the good work!

[@MakeAppswithDanny]

Thanks for watching Ziua!

[@ziuamintii9138]

@@MakeAppswithDanny i already bought 3 classes from udemy :) well done!

[@lukmannakib7497]

Just completed it, really liked it. Although a little few things skipped that should not be a problem for any body who got this far. So great Job. Can you please now give a direction about the best practices using database for both offline and online apps when using Quasar

[@ayoubjdair]

Yes please

[@phillipuchen]

Awesome demo, I'd recommend other developer this framework as well!

[@MakeAppswithDanny]

Thanks Li-Pu 👍

[@baswazz]

I really liked the tutorial learned a lot in a short time.

[@MakeAppswithDanny]

Thanks Bas! 👍

[@MakeAppswithDanny]

@Auom 120 Swnasiqubulotosife You can learn more about this in this series: kzbin.info/www/bejne/paHQn5ptodGJgJI

[@wolflow429]

Good stuff man! Thank you.

[@MakeAppswithDanny]

No problem, thanks!

[@ioannhide3355]

So cool for practice )) Thanks!!!

[@MakeAppswithDanny]

Thanks Ioann!

[@rupakg3]

Awesome session. I am really impressed

[@MakeAppswithDanny]

Thanks Rupak!

[@Torres158]

This is great! Now taking the Udemy course

[@jrgenkarlsson2783]

Great job , no nonsense . Excellent

[@MakeAppswithDanny]

Thanks Jørgen!

[@successmotivation83]

Quasar is really great. I'm excited to start working with it

[@MakeAppswithDanny]

Great Daniel. Hope you enjoy it as much as I have 👍

[@successmotivation83]

@@MakeAppswithDanny Right

[@leandrojuren]

[Vue Router warn]: can no longer be used directly inside or . Use slot props instead:

[@juliojunkes]

Great job!. Quasar is fantastic.

[@MakeAppswithDanny]

Thanks Julio! Quasar certainly is! 👍

[@user-bv5ri1ev2w]

This is great, thank you

[@dumbkhan]

Highly rated course. I would recommend others to learn Quasar.

[@MakeAppswithDanny]

Thanks Shahnaz! 👍

[@eduardadalmas]

Muito obrigada pelo vídeo, clareou meus horizontes. Perfeito!

[@MakeAppswithDanny]

Feliz em ouvir isso, abishek! Obrigado!

[@Brynjar1]

Thanks for the video, it was very useful

[@MakeAppswithDanny]

Thanks Vynland! 👍

[@MRAMetharam]

Is it just me or is this a god damn awesome channel?!

[@MakeAppswithDanny]

That's kind of you, thanks Martin! 👍

[@geronetolentino8601]

what a great tutorial i'm loving it

[@TastySites]

I'm a bit sad that I jumped so late into this, though I'm happy because quasar probably got a lot better by now! This is my new thing, I love it, and I've been waiting for a similar framework for a long long time

[@RobertWildling]

Re-watching this tute after 1 and a half years! This is soooo good - I wonder if this wouldn't be worth a Quasar 2 / Vue 3 update!?!?!?

[@MakeAppswithDanny]

Thanks Robert! This is in the pipeline! 👍

[@jamesmuriuki3785]

Poo more bananas haha, this tutorial is awesome!!! Thanks Danny.

[@MakeAppswithDanny]

Haha thanks James 👍

[@imanismailbox]

thanks for your course.

[@MakeAppswithDanny]

Thanks Iman!

[@jofftiquez]

For others' reference in the v-for loop key warning you can do v-for="(task, key) in tasks" :key="key" where key is the index of the item in the array. This way you don't need to create a unique id or something for small objects like this.

[@MakeAppswithDanny]

Thanks for your suggestion Jofferson. Although, I would tweak it by naming it index, to make it a bit clearer what's going on: v-for="(task, index) in tasks" :key="index" 👍

[@jofftiquez]

@@MakeAppswithDanny That's better :D

[@Izngd]

Nicely done Sir.

[@johannesmogashoa1320]

I have been contemplating which to use with capacitor to create cross platform apps and I had been dead set on using Ionic and Vue but after seeing how easy Quasar is and the amazing documentation, thanks to you, I might have found the framework for me. Now onto watching the weather app then the twitter and Instagram clone.

[@MakeAppswithDanny]

Thanks Johannes. I used to use Ionic a few years back (but with Angular). I haven't tried the more recent version with Vue. Is it any good?

[@AmeeliaK]

There is no static folder anymore. It's "public" now and it's directly in the project root directory, not in src.

[@tastybrains]

ok you sold me. i'll give it a try :)

[@jonathanmohan2846]

Really enjoy your tutorials. I purchased your full todo app course on Udemy. You're awesome, Danny.

[@MakeAppswithDanny]

Jonathan Mohan thanks Jonathan! Welcome aboard! 👍

[@jonathanmohan2846]

@@MakeAppswithDanny Hey Danny. First off thank you for your videos and your udemy course but I have a question. I've built your todo app from your Udemy course, but I used it more as a base for building my app, not just a todo app, but I had a question. Is there somewhere I can contact you outside of youtube? I basically was wondering about utilizing the qselect drop down to bring back on that data which has the corresponding value. Basically I want to display my objects that only have a certain activity type value.

[@oscarleon8485]

What a video!!!! Thank you for the explication ;)

[@MakeAppswithDanny]

No worries Oscar. Thanks 👍

[@Automatbusiness]

good work! thx you man

[@MakeAppswithDanny]

Thanks man! 👍

[@VivesCloud]

Mi inglés nos es muy bueno, pero estoy aprendiendo mucho contigo!!!! MUCHAS GRACIAS!!! Un abrazo y muchas muchas gracias por compartir tan valiosa información.

[@MakeAppswithDanny]

¡Gracias VivesCloud!

[@adrianlimcy]

Thanks for this! This is god damn awesome!

[@MakeAppswithDanny]

Thanks Adrian! 👍

[@hemaankmiglani]

Amazing video! ❤️

[@MakeAppswithDanny]

Thank you Hemaank!!

[@caseng1270]

Your video is great! Quazar - awesome

[@MakeAppswithDanny]

Thank you! Cheers!

[@jurajdurej5192]

I really like your videos, please make more Quasar content :) tips and tricks or integration with firebase for example :) thank you !

[@MakeAppswithDanny]

Thanks Juraj. Check out the Chat app series for some Firebase stuff: kzbin.info/aero/PLAiDzIdBfy8iZTjdu3mjNglucWadtLG1v

[@jurajdurej5192]

@@MakeAppswithDanny Thank you for your response :) . I did a small investigation about best framework for vue, but im still not decided. Why would you recommend Quasar instead of Vuetify or Nuxt or BootstrapVue... ? Thank you for your wise advices !

[@MakeAppswithDanny]

@@jurajdurej5192 Vuetify & BootstrapVue are just Component libraries. Whereas Quasar lets you deploy your app to many different platforms: Web (SPA, SSR, PWA), iOS app, Android app, Windows app, Mac app, Linux app) as WELL as having a great component library. Nuxt.js is a different kind of beast, but Quasar already has a lot of the benefits of Nuxt (but not all). For example, Quasar doesn't have the intelligent automatic routing based on pages & folders - nor does it have static site generation, but it does have SSR, SPA, PWA as well as SEO capabilities.

[@ravinderreddykothabad2299]

Greate video! really deserves only likes.... and thanks to Danny for introducing the new framework

[@MakeAppswithDanny]

Thanks Ravinder 👍

[@jamiemunns3315]

I'd love to know what code editor was used and how to open a live page that showed all of the enhancements. Great Video

[@MakeAppswithDanny]

I was using VSCode. When you start the app with quasar dev, it automatically opens in the browser (with live reload). 👍

[@pedromanuelcamargomendez6520]

Thank you, great video.

[@MakeAppswithDanny]

Thanks Pedro 👍

[@hemaankmiglani]

Amazing Video!

[@MakeAppswithDanny]

Thanks Hemaank 👍

[@connectaritra]

Thank You for this tutorial. I am a Web Designer, Easy to Start Quasar after watching this tutorial.

[@MakeAppswithDanny]

Thanks Aritra, hope you enjoy Quasar 👍

[@connectaritra]

Yes Sir. It's very interesting to do a Web app. I am already start to create a Todo (watch your video) for practice. 😊😊

[@perekpopaulinus5273]

alright, heads up! the task adds even if the input field is empty, so try and use if statement to check the state of the newTask prop before setting it, if possible display a little validation message...............Carry on Techie

[@MakeAppswithDanny]

Yeah, I didn't have time to include any validation as I wanted it to be close to 30 minutes. I cover validation in other more in detail videos. 👍

[@ConlaLuffy]

thank you very much! I love you

[@MakeAppswithDanny]

Thanks Ong!

[@BurhanEnterpriseKuwait]

I love this man !

[@MakeAppswithDanny]

Thanks Burhan! 👍

[@jean_p166]

The guy says he is a noob in vs code but I see he has installed an amazing extension to autocomplete HTML balises (which I identified to be Emmet) and he knows how to use it. I don't think one can be a noob and be as fast and productive.

[@MakeAppswithDanny]

Thanks jean_p. I had only just started using VSCode when I made this video. Prior to that I was using Sublime Text. I had Emmet in Sublime Text too which is why I knew how to use it. Also I think Emmet comes with VSCode by default 👍

[@jean_p166]

​@@MakeAppswithDanny It's possible that in some versions it is installed by default, for me it was not the case. But thanks for your answer, now I understand better how you do.

[@NikolayRogchev]

Quasar seems very promising, will try it myself

[@MakeAppswithDanny]

You should Nikolay!

[@PuerinTheHunter]

Very interesting!

[@MakeAppswithDanny]

Thanks Joseph!

[@trycode-sl]

Quasar is the best.

[@yuriduartedev]

Great video Danny, thank you so much for sharing your expertise with us!

[@MakeAppswithDanny]

My pleasure, thanks for watching Yuri! 👍

[@nicoladellino8124]

Nice video, TNX

[@MakeAppswithDanny]

Thanks Nicola! 👍

[@conniedecinko9245]

I love Quasar!

[@MakeAppswithDanny]

Me too Connie!

[@nrg4285]

Mate I need to have a pint with you after that one. Great no bollocks tutorial. Except I'm an American that doesn't drink beer. Cheers!

[@MakeAppswithDanny]

😂 thanks Veist!

[@BudiSantoso-er6cq]

Thank you brother for this tutorial, God bless you..

[@MakeAppswithDanny]

My pleasure Budi. God bless you too brother 👍

[@BudiSantoso-er6cq]

@@MakeAppswithDanny 🙏

[@HamzaElMaarouf]

Thank you for this great video. you have created many videos about quasars. Can you tell me where to start learning Quasar? I am very confused

[@MakeAppswithDanny]

I have a course on Udemy. However it is out of date now (using Quasar 1 & Vue 2): dannys.link/quasar However, I also have a Vue 3 & Composition API course: dannys.link/compositionapi So you might be able to combine the two courses to figure out the latest Quasar:

[@przemysawzych1866]

Hi Danny, Nice video introducing to quasar. Thanks Can you post your Quasar VSC setup? I am IntelliJ fan (mainly coding java) but it does not work well with Quasar.

[@MakeAppswithDanny]

Hey Przemysław. You can see my VSCode setup here: dannys.link/vscodesetup

[@johnd1431]

awesome framework

[@MakeAppswithDanny]

The best! 👍

[@AmeeliaK]

For me as a backend dev with beginner Frontend and Vue skills, the speed is perfect.

[@MakeAppswithDanny]

Hope you enjoy Quasar! 👍

[@rodrygo363]

Obrigado amigo, ajudou demais!!!

[@MakeAppswithDanny]

Que bom que ajudou, Rodrigo!