Vuetify: Create an App with Vue JS - in 30 MINUTES!
HTML-код
- Опубликовано: 20 окт 2020
- 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.
This is a really good pragmatic tutorial. It strikes a nice balance between explaining concepts and just getting stuff done quickly.
Thanks Martin. Glad it helped! 👍
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
Thanks 👍
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!
Thanks a lot Marko, hope you enjoy the course! 👍
Exactly what I needed for my new job!!! Bought the full course on Udemy just now!!! Thanks Man!!!
Welcome aboard Dominique. Best of luck in your new job!
This was a great tutorial! I am absolutely interested in more of your content and courses. Thanks!
Thanks Julianne!
First time experience with vuetify and understood the concept very well! What a world of creation!
Cool Nirzar! Enjoy Vuetify!
Omg I loved this tutorial! Congratulations!!
Thanks Rargza!
After a long one year found a straight forward vue js tuitor. Keep up the good work. Love from India❤️🙌
Thanks Abinash. Love from Manchester!
simple and straight-forward - thank you!
Thanks ZB!
So Great for beginner! Easy to follow. thanks, Danny!
Thanks Rindi!
I appreciate videos like these. Very helpful! ty ty!!
My pleasure Diana. Thanks for watching! 👍
Awesome tutorial, thanks alot! Bought the full course!
Great thanks! Hope you enjoy the course Pia! 👍
Love your teaching style. Awesome tutorial.
Thanks very much, Adam!
First time experience with vuetify and understood the concept very well! Thanks sir!
Thanks Bhupendra!
Great work! We'll broken down to bits and pieces. Thanks
Thanks Chukwuma!
Danny just bought this course from Udemy, I really enjoyed it. thanks :)
Glad you enjoyed it P!
Thank you for all this danny hope to see more of vuetify in tuts 👌🏼
Thanks Dadci 👍
You have got yourself a new subscriber. Thank you.
Welcome aboard Yasar!
Thanks for the tutorial! Learned a lot from it.
Glad to hear it!
Amazing man, in one tutorial lots of things cover a big thanks
No problem Javed!
Wonderful tutorial! Thanks!
Thanks Azraai! 👍
Parabéns, aula muito boa, aprendi muito. Obrigado!
Que bom ouvir isso, Alex! Obrigado!
Thank you! You are the best teacher!
Thanks Stas!
Thanks for sharing your knowledge mate.
My pleasure Kevin!
Got full course on Udemy. Best £12.99 spent ever! Thank you!
Thanks! Glad you enjoyed the course! 👍
Hey guy! You are a smart man. This video is very useful for me. Thanks a lot!
Thanks Chon, glad it helped!
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.
Thanks Taiwo! 👍
Very good & concise demo of vuetify.
Thanks Avi!
Thank you brother really helpful
Thanks Talha 👍
First: amazing video, thanks a lot, it was very useful!
Second: keep up the fatherflippin' good work!
Sisterflippin' thanks Joé!
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
@@mirolo8158 We will just be enhancing this app as explained at 35:34: ruclips.net/video/CjXgoYo86yY/видео.html
We'll be adding Vuex, Child Components, Menus, Dialogs, Snackbars, Offline Data and more. And also we'll deploy to Netlify.
great, quite simply explanation...
Many thanks Wladimir!
Nice tutorial, great channel, thank you
Thanks Picolé!
Ty Man, good tutorial.
Thanks Deny!
I will make your Udemy courses, you're awesome Danny !!
Thanks Ludo, so are you!
loved the course, i think i will swich from flutter to vuetify
Thanks Cherkaou!
your "Make Apps Theme" for VSC is nice for nightshift...thanks
nice done also :D
Thanks glad you like it, Seba!
Amazing work bro :)
Thanks Seba!
That is great, thank you for useful information
My pleasure!
Great tutorial ! thank you ! 😃😃😃😃😃😃
Thanks Simple Coder!
Really useful. Thanks.
Thanks Mohammad!
thanks you man for make this beautiful tutorial
No worries Yoeun thanks for watching!
Could you make project tutorial React Js with spring boot teacher?
this is motherflipping awesome
Thanks!
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 ...
Thanks Franck!
Wow, Very useful👏, I did it!, and it is very clean and clear
Great Gowriratnam!
@@MakeAppswithDanny How did you run in ios emulator ? as an app
@@tradewithtony The iOS simulators come with Xcode: developer.apple.com/download/all/
How about a video of the pros and cons of the 2 platforms?
I appreciate your hands on approach and subscribed to weather app on udemy (with my real name) for detailed instructions how create/implement it
Thanks Picolé. Welcome to the course!
great stuff as usual...
Thanks Ricky! 👍
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
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!)
Thanks! Hope you enjoy the course!
I was trying to avoid vuetify, but now, I think you have convinced me
why you was avoid vuetify?
@@bernanribeiro3329 maybe due to incompatible with vue3, need to wait for vuetify3 to release
very much useful tutorial
Thanks Md! 👍
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!
Thanks По. What is the app you're hoping to build?
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 .
@@simhayalduteinu7547 thanks. I’ll consider that.
thanks a lot Danny
Cheers Kemal!
just amazing
Thanks Raju!
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.
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!
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.
@@MakeAppswithDanny great
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
Awesome. 👍👍👍
Thanks 👍
Stock ticker app :) preferred... or anything other than Todo
Thanks Coumar! What would you imagine this app would do?
@@MakeAppswithDanny check Coin Tick for Mac app. The best of the same)
nice tutorial
Thanks Wildan!
Wonderful
Thanks!
Even though your channel isn’t popular Danny, you are helping people out there
Haha thanks. I'll get there eventually 😂
man, you are funny, Danny is a rising star, we will push him on top !!!
@@maskman4821 thanks Stephen! 👍
what's that intellisense tool you're using, taking you to the documentation?
I'm not sure what you mean Richard. Do you have a timestamp?
Bravo!
Thanks Asad!
hello please can you guide me through how to configure my local host to use for vue, quasar and vuetify development. Thanks
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 👍
good stuff
Thanks!
30 gosh darn mother flipping minutes real got me hahaha thanks ❤️
😂
How does your node js app looks like visual studio code ? If it is VS Code how can I do it please ?
I'm using the Make Apps Theme: marketplace.visualstudio.com/items?itemName=dannyconnell.make-apps-theme
What´s extesion for Google Chrome u used to show smartphone screen? Somebody help me ?
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 👍
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?
It's possible, J ...
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.
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"
]
}
Glad you sorted it!
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.
There will be more Quasar content 👍
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!
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. 👍
@@MakeAppswithDanny
I'm going to share your video on FB Vue and Vuetify pages.
@@BenHayat thanks Ben that’s much appreciated! 👍
More Quasar Please ;)
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.
@@b0otable I'd vote for more enterprise level projects.
Sir is this only for Vue 2? Or there is a version of Vu
Vue 3 is coming with Vuetify V3, which is currently in Alpha: twitter.com/vuetifyjs/status/1368977861944705029?s=20
Great decision to cover more platforms.
Thanks Ben! 👍
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?
OMG, why it looks so easy when you do it :D I think I will be forever stuck with poop bananas... :)
I poo bananas in my dreams
Hi for some reason my vuetify isnt hot reloading any idea why ? i have to start the server all over again to see changes
One of my course students also just reported this on another project. I wonder if there is a bug in the latest build tool...
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!
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.
@@MakeAppswithDanny I've just seen your VScode link on the main splash page... Doh! Thanks anyway.
Can you please make a video on How Parent child Communication happens in vuejs
Thanks I'll consider it. Although I think I've covered this in other videos (not sure which ones right now).
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 RUclips! Quazar and Vuetify are the best technologies!
Thanks mate! I’ll consider the suggestion. I’m not going anywhere! 👍
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.
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 👍
great
Thanks!
Make a survey or questionnaire type of app.
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
I'm not sure. Are you using a beta version of Vuetify? Perhaps it's a bug?
@@MakeAppswithDanny No worries. I'll play around with it. Great tutorial...
how would I add node js as a backend for this project?
Check out my Instagram Clone series. It’s Quasar, not Vuetify, but you can use the same methods for adding a node backend: ruclips.net/p/PLAiDzIdBfy8h6HgfQg3namagsCUT0Y2Bs
@@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.
Omg , my friend your Course is very usefull , please make abundant video about vuetify free :((
Thanks, I'll consider it!
this for the algorithm 👍
Thanks! 👍
gys i did it but i dont know how can i get apk fornat from that.
please help me its so important.
I haven't played around with Vuetify & Cordova. Maybe take a look at Quasar, which has this out of the box 👍
How has your experience been with Vuetify? Do you have preference over Quasar?
Maybe to enlarge knowledge and/or making money
I think Quasar is better than Vuetify
Am I wrong Danny ?
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.
What about VUEX and QUASAR?
What about them Josue? I don't understand the question...
Please more Quasar content
Hi, u didnt say how to package it to ios app
@Ionic\vue 3 please is already out
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.
at 18:29 How to replace number 1 with 1 2 3 at once ?
Check out the Insert Numbers extension from Asuka on the VSCode Extensions page.
@@MakeAppswithDanny I got it. Thank you
Why did you disable the linter?
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.
@@MakeAppswithDanny tried a project with the linter and it was a nightmare, once I understood how the linter worked, I was alive again lol
Would love to see this with VueJS 3
Vuetify doesn’t currently support Vue 3, but it’s on their roadmap. 👍
I don't clearly understand what does the app API does.