Vue 3 & Firebase 9 Tutorial (Cloud Firestore)

Поделиться
HTML-код
  • Опубликовано: 29 ноя 2024

Комментарии • 192

  • @MakeAppswithDanny
    @MakeAppswithDanny  2 года назад +8

    👉 Full Vue 3 & Firebase 9 Course: dannys.link/compositionapi

    • @codinghusky5196
      @codinghusky5196 2 года назад +1

      Does the course further develop this todo app, or does it work with something more complex?

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +2

      @@codinghusky5196 No, we create a different app, a note-taking app with Pinia for state management, multiple routes etc. It's explained in the promo video at the end of this video: 1:01:41

  • @DaveCollison
    @DaveCollison 2 года назад +9

    I just wanted to thank you for creating this course. It's the EXACT stack I'm using to build my own websites. I've purchased the full course and I look forward to completing at least one Udemy course in this lifetime. Nice job. Thank you.

  • @iUmerFarooq
    @iUmerFarooq 5 месяцев назад +1

    Your way of teaching is so easy and understandable. They way you visit(touch) the docs added another level to your videos.
    Thanks a lot.

  • @doxed64
    @doxed64 Год назад +2

    First successful Vue & Firebase tutorial. Thanks, Danny!

  • @axolotl84
    @axolotl84 Год назад +2

    Mate this is awesome. It's taken me the guts of a day but I've managed to replicate and absorb everything on this video, something I've never managed before despite numerous attempts! Got yourself a sub, thanks for taking the time to make this!

  • @Karaza57
    @Karaza57 2 года назад +1

    Awesome course! Many thanks Danny :)
    For those following this more recently, router-view can no longer be used directly inside keep-alive.
    Use slot props instead:

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +1

      Thanks Sophie!

    • @Karaza57
      @Karaza57 2 года назад

      You're welcome, thanks for your amazing content ;)

  • @sudhisundardutta507
    @sudhisundardutta507 Год назад +2

    This was a much needed Vue with FireBase Tutorial. Helped me a lot! 👍

  • @jeantheron8840
    @jeantheron8840 2 года назад +1

    Helped me out, I didn't have a Todo app only needed to see how you connect to the firestore. THANKS SO MUCH

  • @sammacharia8063
    @sammacharia8063 9 месяцев назад +1

    You are my favourite instructor

  • @kaungmyatthway3402
    @kaungmyatthway3402 2 года назад +1

    thank you so much. finally, i understood how to use firebase 9 in vue3 project

  • @amrwery5403
    @amrwery5403 Год назад +1

    Before I watch this course I wanna thank u for creating it because I love all your tutorials ❤
    Sorry if my English not Good 🤣

  • @cavidanbagiri7837
    @cavidanbagiri7837 2 года назад +1

    OMG this is just perfect. Thanks Danny, Greetings from Russia

  • @shaxzodalimov356
    @shaxzodalimov356 2 года назад +2

    Thank you for the quality content. I would request you to release a complete course on Firebase. I think it would be useful to many programmers.

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +2

      Thanks Shaxzod. I do have the "Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)" course on Udemy. You can grab it with my discount here: dannys.link/compositionapi

    • @shaxzodalimov356
      @shaxzodalimov356 2 года назад +1

      @@MakeAppswithDanny Ok thanks Bro

  • @TarasMalchenko
    @TarasMalchenko Год назад +1

    Thank you a lot for such a brilliant material. Thank you from Ukraine

  • @MrScalleta
    @MrScalleta 2 года назад +2

    Danny is the best code man!

  • @CocoNtuna
    @CocoNtuna Год назад +1

    Danny!! Real Perfect Content! Thanks a lot.

  • @softblood1941
    @softblood1941 2 года назад +5

    nice , but you should have added an authentication system with firebase as well

  • @marcosarfa
    @marcosarfa 2 года назад +1

    you really help me!! ty from Argentina!

  • @genesdada7045
    @genesdada7045 2 года назад +1

    wow! wow! wow! beautiful content.

  • @zainmalik2812.
    @zainmalik2812. Год назад +1

    This video is a life-saver

  • @leem-x5o
    @leem-x5o 8 месяцев назад +1

    thank you from Korea 👏

  • @semujjuderickscofield3029
    @semujjuderickscofield3029 10 месяцев назад +1

    Thank you so much Danny, you so amazing and the videoo was rated 5/5

  • @dimasaja9646
    @dimasaja9646 10 месяцев назад +1

    Thanks really help understanding about firebase in vue

  • @enricochavez1390
    @enricochavez1390 2 года назад +1

    Just enrolled in your udemy course

  • @dheerajsingh568
    @dheerajsingh568 Год назад +1

    Can you please make a video on how to assign employees role and department from main owner's dashboard.
    And Employees cand transfer the job between all of them.
    I shall be thankful to you for this

  • @meijayana8471
    @meijayana8471 2 года назад +1

    Thank you so much for your tutorial, it is very clear and easy to follow, I am a new be in programming, it's help me a lot

  • @jorensumagang3533
    @jorensumagang3533 Год назад +1

    thanks for explaining it clearly sir.

  • @игорьбрель-ъ9п
    @игорьбрель-ъ9п Год назад +1

    thanks a lot for your effort! very usefull and easy-to-understand tutorial for Vue begginer. i recommend it!

  • @iliaryzhkov
    @iliaryzhkov 2 года назад +3

    Top-notch content as usual Danny! Thanks for that! 29:00 just FYI: selecting the region of the Firestore db is needed for the GDPR (EU and similar laws for other countries) purposes. In layman's terms if e.g. the data is collected from the UK citizens it must be stored in the UK hence the location should be europe-west2.

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +1

      Thanks for letting me know. What if it’s a global app (like most apps)?

    • @iliaryzhkov
      @iliaryzhkov 2 года назад +2

      @@MakeAppswithDanny that's a good question - I don't know for sure. But I guess you'd have several instances of the db which is possible in Azure and AWS. It's also good to have the db located closer to the users to reduce the latency.

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад

      @@iliaryzhkov but how come it doesn’t ask for a location for the authentication (where user email address is stored)? I guess DB location doesn’t really matter if your not storing any personal info in the DB? I’ll only be storing app settings and flags for whether they are subscribed or not etc

    • @iliaryzhkov
      @iliaryzhkov 2 года назад +1

      @@MakeAppswithDanny yes, you are right. Is only matters if you store personal data which is a pain. Pleased you don't have to deal with all of that! :)

    • @codinghusky5196
      @codinghusky5196 2 года назад +1

      @@MakeAppswithDanny I'd imagine you can regulate that at the user sign up in your app? Like,when a user creates their account, your app asks (or detects) where they are and chooses to store their data in a particular fb db?

  • @DavidGriffis
    @DavidGriffis Год назад +1

    I make a living programming. I finally made the decision to switch to Vue. I'm dedicating my time to learn it. I took a couple courses from other Authors that weren't bad. But this one put all of the primary building blocks in place. It sounds like your Composition API will be icing on the cake for me. I have taken Pinia and a couple other courses. But your style has finally grown on me so I can't wait to take the next one. My biggest issue with some of the other authors is that you run into some bumps. But seeing you hammer things out and make them work gives me a lot of confidence. I do confess I go at a snail pace at the moment. But my experience tells me that things will take off for me soon. Thank you!

  • @sam0090175
    @sam0090175 2 года назад +1

    very useful,thanks

  • @successsavataar.ai786
    @successsavataar.ai786 Год назад +1

    Amazing, Thanks for the awesome Video!

  • @genesdada7045
    @genesdada7045 2 года назад +1

    umeiva sana, i mean you blazing sir.

  • @juliastamborovski3104
    @juliastamborovski3104 Год назад +1

    DANNY EU TE AMO! OBRIGADA VOCÊ É F O D A !!!!! [en]: danny i love u! thanks, you its rockkk!!!

  • @yosialukumai4593
    @yosialukumai4593 2 года назад +1

    Your work is awesome I learn a lot from You brother

  • @mak7ilenin369
    @mak7ilenin369 2 года назад +1

    You saved my life man :) Great work!!

  • @DauletRakhmankul1
    @DauletRakhmankul1 2 года назад +1

    Your video helped me a lot, thank you very much

  • @Moomoo-td9kl
    @Moomoo-td9kl 2 года назад +1

    Hi! Great Video. I'm curious about the shortcut key to sort the code for each property by designating a block.

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад

      Thanks Moomoo! You mean the Split HTML Attributes Extention? You can find it on the VSCode extensions store 👍

  • @ShinnKQ
    @ShinnKQ 2 года назад +1

    Helpful guide/video! Thanks.

  • @IntricateMoon
    @IntricateMoon 2 года назад +1

    omg this is a gem. thank you!

  • @danymous.m
    @danymous.m 2 года назад +1

    I am impressed. Thanks!

  • @JuanchoTalarga121
    @JuanchoTalarga121 2 года назад +1

    Danny this is an excellent video as usual, I really love your content and I'm looking forward to get some money to invest on your courses cuz you are awesome and your explanations always help me
    love ya!

  • @oluwapelumiisrael6789
    @oluwapelumiisrael6789 2 года назад +2

    This is a very good tutorial but can we get the github repo of the project?

  • @gamercat4878
    @gamercat4878 2 года назад +1

    wow nice tutorial

  • @PrinceKumar-dp4ri
    @PrinceKumar-dp4ri 2 года назад +2

    Bro you are amazing

  • @Nekoeye
    @Nekoeye 2 года назад +3

    I have always wanted you to change that banana example and now I have to live with the butt. :) Thanks for the tutorial.

  • @aligharebaghi7804
    @aligharebaghi7804 2 года назад +1

    I learned a lot from you , thank you!

  • @mishenthakshana3407
    @mishenthakshana3407 2 года назад +1

    Really awesome sir ❤

  • @cyliaalileche6445
    @cyliaalileche6445 2 года назад +1

    if it is possible to make us the authentication form thank you

  • @iUmerFarooq
    @iUmerFarooq 5 месяцев назад +1

    What about doing the same tutorial with Vuefire with authentication and authorization and CRUD?

  • @RusiruNethmina-jb6zl
    @RusiruNethmina-jb6zl Год назад +2

    This vuejs3 composition api Tutorial ?

  • @DanielTorres-gd2uf
    @DanielTorres-gd2uf 2 года назад +1

    Nice video!

  • @СлаваСавченков-к6ю
    @СлаваСавченков-к6ю 2 года назад +1

    Firebase is cool, but not cheap. Supabase looks like good opensource firebase alternative for backend as a service. I think, quasar + supabase can be good choice for MVPs, or projects up to 100k users. Don't you have any plans to make video about using this technologies together?

  • @mi_zot
    @mi_zot 2 года назад +2

    Good one Danny! I knew I wasn't the only programmer using foul language to test my code 😄 Thanks for the great tutorials 👌And also for reminding me that I need to shave my butt!

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +1

      😂 😂 😂 you reminded me of how I once got in trouble in a previous job for having comments like /* i don't know what the f*%k this method does!! */

    • @mi_zot
      @mi_zot 2 года назад +1

      @@MakeAppswithDanny In my opinion, it's the only logical way to properly test a piece of code and people who use vars like 'foo' and 'bar' are pussies 😂I'm just kidding. But seriously I have to be careful when naming test vars on code that might be seen by anyone at work 🤣

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад

      @@mi_zot 😂

  • @nikolalazarevic5011
    @nikolalazarevic5011 2 года назад +1

    My man!

  • @mairocinho
    @mairocinho 2 года назад +1

    Great video

  • @mfinity1689
    @mfinity1689 2 года назад +4

    Hi
    Why do you not to use quasar to tutorial ?
    Do you want to change quasar to vuejs ?
    Thanks

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +3

      I wanted the tutorial to be helpful to anyone using Vue, regardless of the framework. Of course you could do the same thing with Quasar too 👍

    • @b0otable
      @b0otable 2 года назад +3

      I think it is probably challenging for Danny.
      He was the introduction for quite a few people (including myself) into Quasar and helped convince us to add Quasar to our stacks/projects. In doing so he became the face of Quasar to many... I mean his face is literally on the quasar.dev home-page.
      However producing content takes a lot of work and despite what many of us wish... Quasar hasn't gained a huge following yet. So I can see why Danny may want to try to branch out with videos that have the potential for a larger following (e.g. Vue/Firebase).
      However for his dedicated quasar fanbase this is almost worrying as the figurehead for Quasar is using Bulma instead for the components. I think people are curious if he is moving away from Quasar because he is trying to appeal to a larger audience or if he believes Quasar is no longer the best tool for the job, at least in certain cases (e.g. component library).

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +4

      @@b0otable I'm still using Quasar for my app Fudget 2 & am still very happy with it. But yeah, I'm trying to make videos & courses with a broader appeal. I will do some more Quasar vids at some point though...

    • @UltrasSSM
      @UltrasSSM 2 года назад +1

      you have to remake it yourself in your product, regardless of the framework

    • @codinghusky5196
      @codinghusky5196 2 года назад

      @@UltrasSSM it's not whether you have to "re-make it yourself in your product", don't be so patronizing; you're not talking to 5 year olds. It's about making good long term decisions, and picking a framework is one of them. If you pick a framework and end up re-making your product in a year because the framweork you chose died, it's a problem. People aren't asking "waah waah why do I have to write my own code????", people are asking "is Quasar still a good choice for a serious long term project"?
      I myself am glad Danny says it is; I love how it relieves one of all the design issues and allows one to focus on actual app functionality.

  • @profejulianavillegas4356
    @profejulianavillegas4356 2 года назад +1

    Can you do a version of this where you use Pinia store?

  • @dumitrualin5156
    @dumitrualin5156 Год назад +1

    Can you implement an like system using firebase?

  • @JackySupit
    @JackySupit 2 года назад +1

    thank you so much, sir!!

  • @xpressionsless
    @xpressionsless 2 года назад +1

    Can we not use Vuefire library for firebase with composition api(script setup) vue 3?

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад

      I'm not familiar with Vuefire, but the website says Vue 3 Composition API is not supported yet.

  • @aer3067
    @aer3067 9 месяцев назад +1

    Hello, I have a problem. In 35:23 when I'm trying it, i have an error in console: Uncaught (in promise) FirebaseError: Missing or insufficient permissions. What did I do wrong?

    • @aer3067
      @aer3067 9 месяцев назад +1

      I fixed it by changing rules in firestore "allow read, write: if true;"

    • @MakeAppswithDanny
      @MakeAppswithDanny  9 месяцев назад

      Glad you sorted it. Just make sure you create some solid Firestore database rules before you publish anything 👍

  • @benjieburillo5863
    @benjieburillo5863 2 года назад +1

    Danny do you have plan to include node and express?

  • @angellopezruiz8139
    @angellopezruiz8139 2 года назад +1

    Muchas gracias Crack !!!!!

  • @leonardohirsch9086
    @leonardohirsch9086 2 года назад +1

    great! thanks a lot!

  • @BertiBert-dy1ih
    @BertiBert-dy1ih Год назад +1

    hi danny , im getting error Uncaught SyntaxError: function statement requires a namefirebase_firestore.js:13749:16 every time and i dont know how to fix that :(

  • @cyliaalileche6445
    @cyliaalileche6445 2 года назад +1

    thank you for this video, if I work with quasar and I want to create a web and mobile and IOS application at the same time how do we do this with firebase v9?

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +1

      The API is exactly the same for all platforms (assuming you mean mobile application generated with Quasar).

    • @cyliaalileche6445
      @cyliaalileche6445 2 года назад

      @@MakeAppswithDanny thank you

  • @iliaryzhkov
    @iliaryzhkov 2 года назад +1

    Are you gonna publish any updates on your work with Fudget 2?

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +1

      Yes hopefully. I'll probably do an in-depth video when it goes live.

  • @abbeed1
    @abbeed1 Год назад +1

    thanks

  • @KostnixeDeutschland
    @KostnixeDeutschland 2 года назад +1

    Hi, ty for your nice tut.
    I am from germany and a absolute beginner (in VSC, Vue3 etc.). Workflow during coding...
    e.g. you wrote only "div.columns" an with one click the tags are added...
    or: you marked some lines and with one click you add a comment before each line...
    Where can i find the - short cuts? - ?
    Sorry for my easy question...

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +1

      The div.columns thing is the Emmet plugin (which is built-in to VSCode). You can find info here: code.visualstudio.com/docs/editor/emmet
      The block comment thing is just a snippet I created: code.visualstudio.com/docs/editor/userdefinedsnippets
      For that snippet, go to View > Command Palette > Configure User Snippets > JavaScript > and add this:
      {
      "Block Comment": {
      "prefix": "block",
      "body": [
      "/*",
      "\t$1",
      "*/",
      "",
      "\t$2"
      ],
      "description": "Log output to console"
      },
      }
      Then you can just type in "block" and hit enter to insert the snippet.

    • @KostnixeDeutschland
      @KostnixeDeutschland 2 года назад +1

      @@MakeAppswithDanny ty very much!

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад

      @@KostnixeDeutschland No worries!

  • @RadiGamer
    @RadiGamer 2 года назад +1

    Great video :D
    One question, how is you connection that fast to firebase?... I am using it with vue and vite like in you curse but is really slow each time I refresh the page

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +1

      Sometimes, when you first setup a Firebase database, it can be slow for a bit, but then it will start to speed up the more you use it. It could just be this...

  • @UltrasSSM
    @UltrasSSM 2 года назад +1

    Thx
    2 days and work in Quasar framefork

  • @vpr.void.
    @vpr.void. 2 года назад +1

    everytimes he says "Wash ma beott" XD

  • @zainmalik2812.
    @zainmalik2812. Год назад +1

    Can you share the code

  • @florentpianet613
    @florentpianet613 9 месяцев назад +1

    Thank you Danny for this super clear video. Using firebase in my Vuejs projects seems much easier to me now.
    I now want to go powder my butt.

  • @rootbindev
    @rootbindev Год назад +1

    I bought your udemy course

  • @nguyennhat8284
    @nguyennhat8284 2 года назад +1

    can you share me this code ?

  • @이준호-r1r
    @이준호-r1r Год назад +1

    How could you do this? 12:42

    • @MakeAppswithDanny
      @MakeAppswithDanny  Год назад

      I'm not sure what you mean...

    • @이준호-r1r
      @이준호-r1r Год назад +1

      @@MakeAppswithDanny Oh, I wanted to know how to split the attributes. And now I got it :) thank you.

  • @ExequielGomez10
    @ExequielGomez10 Год назад +1

    this tutorial made stay my butt at the chair

  • @ufogrindizer5038
    @ufogrindizer5038 2 года назад +1

    The butt thing cracked me up! :)

  • @Controvi
    @Controvi Год назад +1

    Man, You must have done these recordings over and over again until it was perfect XD
    I don't know any other way how you could sit there and keep a straight face while constantly saying "shave my butt".

  • @shawnbecker1026
    @shawnbecker1026 2 года назад +1

    Hi Danny, Do you have a discord community ? I would like to hang out there with like minded people :)

  • @ore_bear8045
    @ore_bear8045 2 года назад +1

    great project, thanks.
    I wonder if any one else have problems med JSX?I get an errror around every html element in vs code.
    "Property 'div' does not exist on type 'JSX.IntrinsicElements'.VueDX/TS(2339)"
    I have tried to downgrade volar and updated vs code to the latest.

    • @ore_bear8045
      @ore_bear8045 2 года назад +1

      I find the error, it was extension vue.blocks Syntax Highlight, when I disabled it , it works

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +1

      Glad you solved it. Those extensions can be pesky sometimes

  • @brandonsayring
    @brandonsayring 2 года назад +2

    Great video, Danny!
    Btw, instead of importing the uuid library, the window object can do that for us with window.crypto.randomUUID()

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад +1

      Cool. Thanks for the tip! 👍

    • @brandonsayring
      @brandonsayring 2 года назад +1

      @@MakeAppswithDanny no problem! Thank you for showing the world how to make the butt maintenance app we never knew we needed!

    • @MakeAppswithDanny
      @MakeAppswithDanny  2 года назад

      @@brandonsayring 😂