Vuetify: Create an App with Vue JS - in 30 MINUTES!

How to create a BEAUTIFUL Todo app using Vuetify & Vue.js - from SCRATCH - in 30 MINUTES!
👉 Get Full Course on Udemy: dannys.link/vuetify
👉 OR watch FREE on Skillshare (with 14 Day Trial): skl.sh/2Odr1Tr
👉 My Courses: dannys.link/courses
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup: dannys.link/vscodesetup
👉 DONT CLICK THIS: dannys.link/dontclick
The App will have a Navigation Drawer which can be toggled with a Button. This will have links to our two pages - a Todo Page & and About Page (using Vue Router).
It has a gorgeous, tall Header (App Bar component) with a Background Image.
It has a Text Field component which we can use to add tasks.
We'll display a list of tasks using a List component.
We can mark a task as done by clicking on it and we can delete a task by clicking the delete button.
It will have a responsive layout that looks great on both Mobile & Desktop.

[@iAmTheSquidThing]

This is a really good pragmatic tutorial. It strikes a nice balance between explaining concepts and just getting stuff done quickly.

[@MakeAppswithDanny]

Thanks Martin. Glad it helped! 👍

[@markoaurelio3736]

Danny, you are a god! You made it looks so easy... I was struggling all day trying to do a shopping list similar to it and couldn't properly create it. Your video helped me a toon. Ofc I'll be getting your entire course!

[@MakeAppswithDanny]

Thanks a lot Marko, hope you enjoy the course! 👍

[@julianne4080]

This was a great tutorial! I am absolutely interested in more of your content and courses. Thanks!

[@MakeAppswithDanny]

Thanks Julianne!

[@alltechnologies7486]

Exactly what I needed for my new job!!! Bought the full course on Udemy just now!!! Thanks Man!!!

[@MakeAppswithDanny]

Welcome aboard Dominique. Best of luck in your new job!

[@rargza9169]

Omg I loved this tutorial! Congratulations!!

[@MakeAppswithDanny]

Thanks Rargza!

[@ultimatelokal7040]

I've been away from programming for 6 yrs and trying to work my way in to the field and this is my very first vuetify video watched and its very clear it reminds me of visual basic nice run down

[@MakeAppswithDanny]

Thanks 👍

[@nirzar52]

First time experience with vuetify and understood the concept very well! What a world of creation!

[@MakeAppswithDanny]

Cool Nirzar! Enjoy Vuetify!

[@zb2747]

simple and straight-forward - thank you!

[@MakeAppswithDanny]

Thanks ZB!

[@sogi7777]

I appreciate videos like these. Very helpful! ty ty!!

[@MakeAppswithDanny]

My pleasure Diana. Thanks for watching! 👍

[@MakeAppswithDanny]

Thanks for watching! Leave a comment telling me what app you wanna see me make with Vuetify! 👉 Get Full Course on Udemy: dannys.link/vuetify 👉 OR watch FREE on Skillshare (with 14 Day Trial): skl.sh/2Odr1Tr 👉 Download Fudget: www.fudget.com 👉 My VSCode Setup: dannys.link/vscodesetup 👉 DONT CLICK THIS: dannys.link/dontclick

[@MakeAppswithDanny]

@@mirolo8158 We will just be enhancing this app as explained at 35:34: kzbin.info/www/bejne/eZu7mKKPpJ1pr7s We'll be adding Vuex, Child Components, Menus, Dialogs, Snackbars, Offline Data and more. And also we'll deploy to Netlify.

[@RindiBudiaramdhan040490]

So Great for beginner! Easy to follow. thanks, Danny!

[@MakeAppswithDanny]

Thanks Rindi!

[@adamhowley8037]

Love your teaching style. Awesome tutorial.

[@MakeAppswithDanny]

Thanks very much, Adam!

[@piak15]

Awesome tutorial, thanks alot! Bought the full course!

[@MakeAppswithDanny]

Great thanks! Hope you enjoy the course Pia! 👍

[@pandaabinash99]

After a long one year found a straight forward vue js tuitor. Keep up the good work. Love from India❤️🙌

[@MakeAppswithDanny]

Thanks Abinash. Love from Manchester!

[@OAzraai]

Wonderful tutorial! Thanks!

[@MakeAppswithDanny]

Thanks Azraai! 👍

[@dadciraouf134]

Thank you for all this danny hope to see more of vuetify in tuts 👌🏼

[@MakeAppswithDanny]

Thanks Dadci 👍

[@lucassivolella]

Thanks for the tutorial! Learned a lot from it.

[@MakeAppswithDanny]

Glad to hear it!

[@YasarYousuf802]

You have got yourself a new subscriber. Thank you.

[@MakeAppswithDanny]

Welcome aboard Yasar!

[@JavedBaloch786]

Amazing man, in one tutorial lots of things cover a big thanks

[@MakeAppswithDanny]

No problem Javed!

[@chukwumaifeanyi4083]

Great work! We'll broken down to bits and pieces. Thanks

[@MakeAppswithDanny]

Thanks Chukwuma!

[@bhupendravaishnav4728]

First time experience with vuetify and understood the concept very well! Thanks sir!

[@MakeAppswithDanny]

Thanks Bhupendra!

[@stasstas206]

Thank you! You are the best teacher!

[@MakeAppswithDanny]

Thanks Stas!

[@mainkev]

Thanks for sharing your knowledge mate.

[@MakeAppswithDanny]

My pleasure Kevin!

[@denysalamanca5418]

Ty Man, good tutorial.

[@MakeAppswithDanny]

Thanks Deny!

[@alexhonorato7529]

Parabéns, aula muito boa, aprendi muito. Obrigado!

[@MakeAppswithDanny]

Que bom ouvir isso, Alex! Obrigado!

[@kaiparado]

Nice tutorial, great channel, thank you

[@MakeAppswithDanny]

Thanks Picolé!

[@darkmift]

Very good & concise demo of vuetify.

[@MakeAppswithDanny]

Thanks Avi!

[@Cho1279624]

Hey guy! You are a smart man. This video is very useful for me. Thanks a lot!

[@MakeAppswithDanny]

Thanks Chon, glad it helped!

[@_carbon.acid_]

Thank you brother really helpful

[@MakeAppswithDanny]

Thanks Talha 👍

[@SeadoooRider]

Danny just bought this course from Udemy, I really enjoyed it. thanks :)

[@MakeAppswithDanny]

Glad you enjoyed it P!

[@wladige]

great, quite simply explanation...

[@MakeAppswithDanny]

Many thanks Wladimir!

[@Jankee187]

Amazing work bro :)

[@MakeAppswithDanny]

Thanks Seba!

[@MohammadEtemaddar]

Really useful. Thanks.

[@MakeAppswithDanny]

Thanks Mohammad!

[@yoeunsopanha1827]

thanks you man for make this beautiful tutorial

[@MakeAppswithDanny]

No worries Yoeun thanks for watching!

[@yoeunsopanha1827]

Could you make project tutorial React Js with spring boot teacher?

[@simplecoder8098]

Great tutorial ! thank you ! 😃😃😃😃😃😃

[@MakeAppswithDanny]

Thanks Simple Coder!

[@arslonbekroziboyev5683]

That is great, thank you for useful information

[@MakeAppswithDanny]

My pleasure!

[@TheTygrys82]

Got full course on Udemy. Best £12.99 spent ever! Thank you!

[@MakeAppswithDanny]

Thanks! Glad you enjoyed the course! 👍

[@Jankee187]

your "Make Apps Theme" for VSC is nice for nightshift...thanks nice done also :D

[@MakeAppswithDanny]

Thanks glad you like it, Seba!

[@suhardy003]

this is motherflipping awesome

[@MakeAppswithDanny]

Thanks!

[@shinrakeyp]

I will make your Udemy courses, you're awesome Danny !!

[@MakeAppswithDanny]

Thanks Ludo, so are you!

[@rickybarabba7866]

great stuff as usual...

[@MakeAppswithDanny]

Thanks Ricky! 👍

[@mdbayazidhasan9799]

very much useful tutorial

[@MakeAppswithDanny]

Thanks Md! 👍

[@kemalbeler1151]

thanks a lot Danny

[@MakeAppswithDanny]

Cheers Kemal!

[@cherkaouijamal9897]

loved the course, i think i will swich from flutter to vuetify

[@MakeAppswithDanny]

Thanks Cherkaou!

[@rajusharma823]

just amazing

[@MakeAppswithDanny]

Thanks Raju!

[@j.c.7002]

First: amazing video, thanks a lot, it was very useful! Second: keep up the fatherflippin' good work!

[@MakeAppswithDanny]

Sisterflippin' thanks Joé!

[@kaiparado]

I appreciate your hands on approach and subscribed to weather app on udemy (with my real name) for detailed instructions how create/implement it

[@MakeAppswithDanny]

Thanks Picolé. Welcome to the course!

[@franckrichard9812]

You're awesome Danny !! you explain so well and with so much efficacitely .... it should be perfect if it could be for vue3 version ... because I developped an app with Vue3, but I saw you began courses with Quasar so it should be fine I suppose. Thanks a lot ...

[@MakeAppswithDanny]

Thanks Franck!

[@techfuture-code-tv]

This is a greatest tutorial ever seen in vuetify. Boss you too much. The speed is High pace. Please sir, Help do videos on using vuetify with Laravel both for front end and dashboard.

[@MakeAppswithDanny]

Thanks Taiwo! 👍

[@gowriratnamagraharapu8494]

Wow, Very useful👏, I did it!, and it is very clean and clear

[@MakeAppswithDanny]

Great Gowriratnam!

[@tradewithtony]

@@MakeAppswithDanny How did you run in ios emulator ? as an app

[@MakeAppswithDanny]

@@tradewithtony The iOS simulators come with Xcode: developer.apple.com/download/all/

[@overconda]

Wonderful

[@MakeAppswithDanny]

Thanks!

[@aw6589]

How about a video of the pros and cons of the 2 platforms?

[@barratech]

Hello and thanks for covering more topics Please can you make a video covering back-end: "Rust Actix-web " with a front-end as "Quasar framework" Very difficult to find

[@abhilashr838]

Awesome. 👍👍👍

[@MakeAppswithDanny]

Thanks 👍

[@wildannugraha1130]

nice tutorial

[@MakeAppswithDanny]

Thanks Wildan!

[@quarxdmz]

I was trying to avoid vuetify, but now, I think you have convinced me

[@bernanribeiro3329]

why you was avoid vuetify?

[@berrieberrie1555]

@@bernanribeiro3329 maybe due to incompatible with vue3, need to wait for vuetify3 to release

[@Georgii525]

I start working with quasar and i love it, but i not found advanced materials, I really want to do something difficult. Hopefully danny will do such a course in the future. Thanks for your work!

[@MakeAppswithDanny]

Thanks По. What is the app you're hoping to build?

[@simhayalduteinu7547]

I have idea. You make front-end, and other bloggers make backend in php, js, pyton, ... In this way I learn working process of 2 peoples on 2 parts of complete project .

[@MakeAppswithDanny]

@@simhayalduteinu7547 thanks. I’ll consider that.

[@hasanbhutta6178]

Let's make netflix or gmail clone with vuetify next!!! Firebase for backend and Vuetify + Vue for frontend. Btw loved the twitter clone with quasar will soon be going over the insta clone as well.

[@RavagetheRain]

Really great tutorial. Liked how you went into the Vuetify docs to find things. One question: what to do with those 3 icons in the top right of the header? (Hmm. I see. This is a teaser for the Udemy course. Will do that!)

[@MakeAppswithDanny]

Thanks! Hope you enjoy the course!

[@asadbilal591]

Bravo!

[@MakeAppswithDanny]

Thanks Asad!

[@ofjdaz]

Something I'm struggling with (that I didn't know it was going to be hard), is trying to have different layouts: you would want a /login page with a different wireframe or style than a dashboard. I'm kinda stuck with the project because now I need to add a Login outside this dashboard wireframe and everything I find to achieve this task seems over complicated. I thought it was a matter of adding a new route and telling vue to pick another component, but apparently, it doesn't work like that. That would be a nice video for you to make :) Thanks

[@AnyFactor]

Even though your channel isn’t popular Danny, you are helping people out there

[@MakeAppswithDanny]

Haha thanks. I'll get there eventually 😂

[@maskman4821]

man, you are funny, Danny is a rising star, we will push him on top !!!

[@MakeAppswithDanny]

@@maskman4821 thanks Stephen! 👍

[@coumar2911]

Stock ticker app :) preferred... or anything other than Todo

[@MakeAppswithDanny]

Thanks Coumar! What would you imagine this app would do?

[@antoncherry]

@@MakeAppswithDanny check Coin Tick for Mac app. The best of the same)

[@i3looi2]

good stuff

[@MakeAppswithDanny]

Thanks!

[@b0otable]

More Quasar Please ;)

[@b0otable]

Project Idea: How to take an app to production and associates workflow. How to setup CI/CD setup with Quasar / Firebase Running test setup in Docker Better security rules Firebase emulator suite.

[@jimoquinn3827]

@@b0otable I'd vote for more enterprise level projects.

[@nested9301]

30 gosh darn mother flipping minutes real got me hahaha thanks ❤️

[@MakeAppswithDanny]

😂

[@renatomauro6300]

Hi Danny! Congratulation! Your tutorial is amazing! Let me ask a question: is there any reason to pass the id of task instead of pass the object reference? I tested this approach and works fine, but as I am newby in vue, I don't know if it is a good practice or not. Thanks a lot!

[@MakeAppswithDanny]

Thanks Renato! Yeah I think that's fine if it works. I just tend to work with ID's, since if we ever hook it up to a back-end, we'll probably be doing all of our CRUD based on ID's.

[@techfuture-code-tv]

@@MakeAppswithDanny great

[@falcon.9r]

great

[@MakeAppswithDanny]

Thanks!

[@jimoquinn3827]

Love your content and I've learned a lot. Would like to add to the others, more Quasar content please sir! I found Vuteify was good, but took more effort to accomplish the same in Quasar.

[@MakeAppswithDanny]

There will be more Quasar content 👍

[@HonzaKuranda]

OMG, why it looks so easy when you do it :D I think I will be forever stuck with poop bananas... :)

[@MakeAppswithDanny]

I poo bananas in my dreams

[@conniedecinko9245]

Make a survey or questionnaire type of app.

[@EpilefRodriguez]

this for the algorithm 👍

[@MakeAppswithDanny]

Thanks! 👍

[@tokennmaster]

hello please can you guide me through how to configure my local host to use for vue, quasar and vuetify development. Thanks

[@MakeAppswithDanny]

Thanks! All of these frameworks come with CLI tools that setup your local development environment automatically. You can see this in most of my Vue, Quasar and Vuetify videos 👍

[@XMachete]

what's that intellisense tool you're using, taking you to the documentation?

[@MakeAppswithDanny]

I'm not sure what you mean Richard. Do you have a timestamp?

[@orensampson]

Please more Quasar content

[@johmbon]

How does your node js app looks like visual studio code ? If it is VS Code how can I do it please ?

[@MakeAppswithDanny]

I'm using the Make Apps Theme: marketplace.visualstudio.com/items?itemName=dannyconnell.make-apps-theme

[@BenHayat]

Great decision to cover more platforms.

[@MakeAppswithDanny]

Thanks Ben! 👍

[@caiocunha9419]

What´s extesion for Google Chrome u used to show smartphone screen? Somebody help me ?

[@MakeAppswithDanny]

It's not an extension, it's built into Chrome. Show the devtools (Menu > Developer > Developer tools) then click on the little devices icon at the top left of the devtools. You can then choose different devices from the dropdown. Some devices will show the actual frame of the device, some will not 👍

[@RavagetheRain]

Question: Is there a standard way to deploy a vue app to a shared hosting account? When I run: npm run build and FTP the files to hosting, paths are broken. The index file has paths like "/js/about.1c664998.js" instead of /x/y/js/about.1c664998.js.

[@RavagetheRain]

Got it: Had to fiddle with publicPath in Vue-CLI module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/non-root-folders-go-here/' : '', "transpileDependencies": [ "vuetify" ] }

[@MakeAppswithDanny]

Glad you sorted it!

[@BenHayat]

Danny, when is the full Udemy course going to be available? Are you planning to give US PWA/Vuetify course later on? A huge market for you as no one ha a PWA/Veitify course. Thanks!

[@MakeAppswithDanny]

It will be pretty soon. I’ve recorded most of the videos! I will have to see how this video goes and how the course goes. If they do well then I’ll do more Vuetify and yes, possibly a PWA course - if I can see the demand for it. 👍

[@BenHayat]

@@MakeAppswithDanny I'm going to share your video on FB Vue and Vuetify pages.

[@MakeAppswithDanny]

@@BenHayat thanks Ben that’s much appreciated! 👍

[@PatrickSierak]

How has your experience been with Vuetify? Do you have preference over Quasar?

[@barratech]

Maybe to enlarge knowledge and/or making money I think Quasar is better than Vuetify Am I wrong Danny ?

[@MakeAppswithDanny]

In a lot of ways it has been fairly similar - many of the components & props are very similar. Although some things have been more difficult with Vuetify. For example, there is no Dialog plugin, or Notifications plugin - just the raw components - so you need to implement your own methods of displaying these and making them reusable - whereas in Quasar you can implement these in a couple of lines of code. I haven't tried PWA or Cross-Platform apps with Vuetify - so I can't comment on those at this point. The Vuetify website suggests you can use it with PWA, Cordova & Electron but I get the impression it is not as neatly integrated as it is with Quasar - but again, I haven't tried it yet. Hopefully I will try some of that stuff with Vuetify in future videos.

[@BootyEahter]

Whenever I copy and paste the source code into my App.vue, it just says "Application" at the top and the rest of the screen is blank. Have they updated the formatting since this video released?

[@MakeAppswithDanny]

It's possible, J ...

[@jamiewright345]

Hey Danny, what was is the terminal/ editor you are using? Sorry if it is a naive question, I am new to this and dreaming about making a free app to help Teachers of Special Needs students in schools. Next question is, when will you be making an app that includes Spider Graphs from clients backend data =p Keep up the videos - you are the only person I have ever subscribed to!

[@MakeAppswithDanny]

Thanks Jamie that’s an honour! The editor is Visual Studio Code (or VSCode): code.visualstudio.com The terminal is built in. I have no plans to cover spider graphs at the moment.

[@jimbobleeharry]

@@MakeAppswithDanny I've just seen your VScode link on the main splash page... Doh! Thanks anyway.

[@abhayd5358]

Can you please make a video on How Parent child Communication happens in vuejs

[@MakeAppswithDanny]

Thanks I'll consider it. Although I think I've covered this in other videos (not sure which ones right now).

[@jumbo999614]

Is this single user app? Can I share a list of created task to other mobile users whose mobile phone also installed the same app?

[@MrScalleta]

Hello Danny from Russia)) Could you program an online store and implement a credit card payment method? Of course, there are many more great ideas! I am in Russia and can only learn from your videos because we Papuans do not have this and no one understands. The market is up to full bad app-builders or site-builders. Thanks! Just don't disappear from KZbin! Quazar and Vuetify are the best technologies!

[@MakeAppswithDanny]

Thanks mate! I’ll consider the suggestion. I’m not going anywhere! 👍

[@gohaz933]

Hi for some reason my vuetify isnt hot reloading any idea why ? i have to start the server all over again to see changes

[@MakeAppswithDanny]

One of my course students also just reported this on another project. I wonder if there is a bug in the latest build tool...

[@aliguliyev2122]

Sir is this only for Vue 2? Or there is a version of Vu

[@MakeAppswithDanny]

Vue 3 is coming with Vuetify V3, which is currently in Alpha: twitter.com/vuetifyjs/status/1368977861944705029?s=20

[@googleuser-nz9ib]

Omg , my friend your Course is very usefull , please make abundant video about vuetify free :((

[@MakeAppswithDanny]

Thanks, I'll consider it!

[@xpynim]

vuetify is like react native?, sorry I'm just learn webdev on this week, and someone asking on vue discord about it, i just curious.

[@MakeAppswithDanny]

No not quite. Vuetify outputs hybrid apps (basically a single page website running in a browser wrapper) whereas React Native outputs actual fully native apps 👍

[@ofjdaz]

how would I add node js as a backend for this project?

[@MakeAppswithDanny]

Check out my Instagram Clone series. It’s Quasar, not Vuetify, but you can use the same methods for adding a node backend: kzbin.info/aero/PLAiDzIdBfy8h6HgfQg3namagsCUT0Y2Bs

[@ofjdaz]

@@MakeAppswithDanny You're awesome. Followed your instructions. They are in the video number 4 on that playlist and now I have my backend with node :), thanks.

[@369Funny]

Hi, u didnt say how to package it to ios app

[@awmirhosen3628]

gys i did it but i dont know how can i get apk fornat from that. please help me its so important.

[@MakeAppswithDanny]

I haven't played around with Vuetify & Cordova. Maybe take a look at Quasar, which has this out of the box 👍

[@CptNurple]

Hey Danny! Any ideas why I'm needing to add :ripple="false" to the delete button to not get the below error? My Google fu is failing me! Great video, thanks! Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at eval (webpack-internal:///./node_modules/vuetify/lib/directives/ripple/index.js:160:36) eval @ index.ts?5ffe:151 setTimeout (async) eval @ index.ts?5ffe:144 setTimeout (async) hide @ index.ts?5ffe:139 rippleHide @ index.ts?5ffe:227

[@MakeAppswithDanny]

I'm not sure. Are you using a beta version of Vuetify? Perhaps it's a bug?

[@CptNurple]

@@MakeAppswithDanny No worries. I'll play around with it. Great tutorial...

[@CarlosMartinezTech]

@Ionic\vue 3 please is already out

[@MakeAppswithDanny]

Haven't used Ionic for years. It looks like it's picking up though: www.npmtrends.com/@ionic/vue I may do a video at some point.

[@josuebarros-desenvolvedorw2490]

What about VUEX and QUASAR?

[@MakeAppswithDanny]

What about them Josue? I don't understand the question...

[@jpongthep]

at 18:29 How to replace number 1 with 1 2 3 at once ?

[@MakeAppswithDanny]

Check out the Insert Numbers extension from Asuka on the VSCode Extensions page.

[@jpongthep]

@@MakeAppswithDanny I got it. Thank you

[@ofjdaz]

Why did you disable the linter?

[@MakeAppswithDanny]

I always recommend disabling it for my videos & courses - just so people don't get stuck with loads of linting errors. However, I recommend considering using the linter in your own projects - especially in teams.

[@ofjdaz]

@@MakeAppswithDanny tried a project with the linter and it was a nightmare, once I understood how the linter worked, I was alive again lol

[@Akosiyawin]

I don't clearly understand what does the app API does.

[@codedjango]

Would love to see this with VueJS 3

[@MakeAppswithDanny]

Vuetify doesn’t currently support Vue 3, but it’s on their roadmap. 👍