How to connect Vue.js with Firebase Cloud Firestore Tutorial

this is a quick and dirty how-to on setting up vue.js with firebase so this is assuming that you already have node setup and also view cli so first thing uh is we'll need to create a project just to keep things simple i'm going to go with manual just so i can only select necessary features we'll go with version 3x preview keep everything in package.json and no we are not saving this for the future project all right now that we're all set let's open this up in sublime i'll be using sublime as my editor so here's our setup uh package.json um just the minimum things that's needed to run this project and now let's see let's try and run this project to see uh let's try and serve it up all right thanks seems to be working fine let's see if we have any errors console is clear so we're good to go the first thing that we'll need is set up a couple packages i'm going to stop this we'll set up these two packages that's needed the first one will be firebase so npm install firebase save all right and the next one will be firebase ui okay let's just verify to make sure that uh package.json has been updated okay so yep we see firebase and firebase ui so we're all set there the next thing we'll do is open up a or create a firebase database so create a project we'll just name it view firebase accept the terms uh no not at this time we don't need google analytics okay all right just continue so we've got um our project set up uh the thing that we'll need to do is create an app so for us in this test we're creating a web app and then we're just going to name it web app we don't need firebase hosting at this time but if you want to set it up you can do that register the app and then now we have this the config information that we need later next thing we'll have to do is create a firebase config file so we're going to do that in the source folder we're going to name it firebase config dot js and in here this is where we put the config file that we saw earlier after we set up our firebase project so export cons firebase config and then we'll just get this information here this is all we need all right it's all set the next thing we'll need to do is open up main.js and here we'll need to import firebase firebase app so we're going to need to we're going to need the firebase config first uh before we can initialize it firebase config uh getting it from that firebase config.js file so js like so and we'll also need to import firebase firestore which is in firebase and now we'll need to initialize firebase so firebase dot initialize initialize app firebase config and we'll need export db let's see i think this looks pretty good oh uh before that we'll need to create some data in the in here so continue to console um all right so the next thing we need to do is create uh setup cloud firestore um so you'll see a couple options here real time database that's their old the the old version i believe i haven't used it too much but what you want to do is set up cloud firestore so once you get here create database um just to keep things simple we'll go with start and test mode you can always change this change the permissions later i'm gonna keep everything as is all right so we're gonna create a collection i'm just going to name it messages we'll use auto id message so we'll just keep things simple and then we'll save it so now we have a collection of messages and then we've got one document here with a message need to go back to first let's let's see if it's still this is still working um npm run serve we're just going to make sure that there aren't any errors showing up okay all right so firebase config is not defined looks like a typo all right now we're all good no errors um and the first thing we'll need to see is if it's actually connecting to firebase let's see what shows up when we console.log db so we're getting a bunch of stuff here it looks like we're so it's actually working we're getting information about the uh firebase firestore database and how i figured this out is by actually going through the methods there are documentations now to do this but just to keep things simple we're i'm just going to type things out all right all right so we're actually getting the the document with the message that we entered earlier so that's the quick and simple way to connect to firebase from your view project and this is pretty much the basic code that you need just to get the document data

Channel: Gene Parcellano

Views: 942

Keywords: vue, javascript, js, vue.js, firebase, firestore, how to, tutorial, connecting, setup

Id: rLHPRZCs17A

Length: 10min 36sec (636 seconds)

Published: Mon Jan 18 2021