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

Wow.. This is great!! 👏👏

I don't understand the CRUD functions please respond my coursework is due in 2 hours 32 minutes 🙏

Great tutorial ever 😍😍

hi thanks for your tut, but I got an error in the firebase.js, import firebase from "firebase" doesn't work ( your very first line) so i always get "firebase is not defined" error because of the line where you define firebaseApp, can you help me?

Do you have one for Vue 3 and Realtime Database?

So much beautiful information in only 8 mins

Thank you this video. I did it :)

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

Is yarn install firebase suppose to create a firebase.json and firebase.js for you automatically?

Nice work but i gave up half the way, I thought this is going to be beginner friendly but the video is half baked. Thanks but maybe this isn't for me.

Awesome, is too fast and effective content

Hi I am trying to do this, but switching Firebase library with just npm @google-cloud/firestore nodejs sdk. All I changed was the auth in firebase.js to


const { Firestore } = require('@google-cloud/firestore');
import { ref, onUnmounted } from 'vue'

const db = new Firestore({
projectId: 'my-project-id',
keyFilename: 'firestore_keyfile.json'
});

const usersCollection = db.collection('users')


When I do this, I get this error:
TypeError: 'setTimeout' called on an object that does not implement interface Window.
backoffAndWait backoff.js:196
backoffAndWait backoff.js:194
initStream watch.js:289
onSnapshot watch.js:155
onSnapshot reference.js:1818
useLoadUsers firebase.js:30
setup UserList.vue:36
callWithErrorHandling runtime-core.esm-bundler.js:154
setupStatefulComponent runtime-core.esm-bundler.js:6415
setupComponent runtime-core.esm-bundler.js:6376
mountComponent runtime-core.esm-bundler.js:4118
processComponent runtime-core.esm-bundler.js:4094
patch runtime-core.esm-bundler.js:3715
mountChildren runtime-core.esm-bundler.js:3897
processFragment runtime-core.esm-bundler.js:4057
patch runtime-core.esm-bundler.js:3708
componentEffect runtime-core.esm-bundler.js:4211
reactiveEffect reactivity.esm-bundler.js:42
effect reactivity.esm-bundler.js:17
setupRenderEffect runtime-core.esm-bundler.js:4176
mountComponent runtime-core.esm-bundler.js:4134
processComponent runtime-core.esm-bundler.js:4094
patch runtime-core.esm-bundler.js:3715
componentEffect runtime-core.esm-bundler.js:4275
reactiveEffect reactivity.esm-bundler.js:42
callWithErrorHandling runtime-core.esm-bundler.js:154
flushJobs runtime-core.esm-bundler.js:362
watch.js:226
closeStream watch.js:226
initStream watch.js:334


This error does not look related to using firestore instead of firebase. Are you able to let me know if this solution in your video is still viable today? I am planning to create a full fledged firebase account to run this, but I am not sure it will work. Do you get this same "TypeError: 'setTimeout' called on an object that does not implement interface Window." when trying to run it today? Please let me know.

Does firebase still work with vue? I am getting the oddest error that the dependency is not found

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

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.

Thanks!

This dependecy was not found

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