Vue 3 and Firebase - Build and deploy a CRUD Application with Vue.js and Firebase

Today we will be building a Vue 3 application, using firebase as the backend. The app will allow users to create a basic customer records management system, in which a user can perform CRUD operations.

Firebase gives freedom to developers to focus on enhancing the user experiences rather than maintaining servers. It comes with many advanced features such as the ability to update data in real-time, serve static websites, and simple javascript SDK for interacting with it.

Using firebase with Vue makes building and scaling complex web applications super easy.

✨ SOCIAL ✨

⚡ RESOURCES ⚡

⭐ TIMESTAMPS ⭐
0:00 - Intro
2:00 - Creating Firebase project
2:45 - CRUD functions
4:19 - Router Paths
4:41 - Create User Form
5:03 - User list
5:40 - Update User
6:33 - Deploy to Firebase
7:33 - Conclusion

[centrumsaiyan]

Incase any of you who are following this tutorial after 13 Oct 2021. You may get errors from firebase because it was upgrade to version 9 and this tutorial uses version 8.

It is advisable to follow the tutorial with same firebase version to avoid weird errors. You may want to remove the latest firebase and add firebase version 8 with steps below.

command: yarn remove firebase
command: yarn add firebase@^8.10.0

Cheers.

[tr]

Yo Justin thanks for all your videos, this one especially. I watch tons of web dev content each day but I always find myself coming back to your videos to actually learn and build skills.

[emmanuelo.]

Bruh this is savage! Wasted months figuring vuejs now I can be spot on!! 💥

[TamNguyen-mzse]

such great style of tutorial, and very clean code too. Thank you so muchh!

[dontargetme]

i'm a beginner vue developper, glad that youtube recommended me your channel, you're awesome ! keep up the good work ❤

[ZTF]

I've been living in the nuxtjs bubble for too long that i totally forgot about pure vuejs lol, this was helpful as it"s differs of how i usually tackle firestore using nuxt !
Thank you so much and great tutorial

[arturitoproductions]

So much beautiful information in only 8 mins

[THBADRO]

Thank you for this tutorial! It was a bit too fast, but it gives an overview on how to create and deploy this kind of apps.

[Zen-rlpv]

Amazing video with great concise information, you're a life saver Justin!

[Hypersz]

At 4:55 im getting a blank site (no form at all). I followed all the steps however. Cant find a fix

[muhammadissasabbagh]

OMG!, All that I need in one video, Thanx a lot man 👍👍👍👍

[sivasankarant]

Great video❤, here's an idea:
Make a video series on building and launching a saas startup from scratch.

[luisredyguzman]

Awesome, is too fast and effective content

[chris_ea]

Thanks, if you know where the stones are, you can walk on water! Awesome video!

[UnathiGX]

Should I cry? Should I rejoice? Should I burst in songs? Thank you for this simple explanation.

[captainlennyjapan]

Are you a collaborator or a fan of Fireship? Cuz your style is similar to his! I like it! so concise and useful!

[rubenblanza]

Thanks for the video! "Edit.vue" and "UserCreate.vue" components both render the same input fields ("Name" and "Email"). This may not be too bad for a small form like this, but for one with lots of fields... Is there any way to render the form from a unique component to avoid duplicated code? I haven't found a Vue 3 CRUD example with this approach. Thanks!

[collectorschannel]

Nice Tutorial vue 3 firebase, next roles users login :) thanks

[salibaray]

Hi Justin, at 4:58 how did you go from coding to testing the functionality you just did? - also when I try to run the code as is, it tells me that the Edit view does not exist - and you did not register the UserCreate component in the Home view, so how come you are showing it working when you have all these missing pieces? The video is good, although it is a bit too fast and you seem to skim and skip through many steps. Thanks

[heyyy]

awesome.. Muti-user login cms with firebase and vue.