Vue.js Firebase Tutorial: Build Firestore CRUD Web Application

Vue.js Firebase Tutorial: Build Firestore CRUD Web Application


Hi everyone, I am Didin J. the author of Djamware.com. Today I wanna show you a comprehensive step-by-step tutorial on build Firestore database CRUD web application using Vue.js and Firebase. In this tutorial, we are using a standard Firebase module for JavaScript. Starting from the Firebase connection to Fire- store database CRUD (create, read, update delete) operation. This tutorial divided into several steps: Step #1: Setup Firebase Firestore Database. Step # 2: Create Vue.js App using Vue-CLI. Step #3: Install and Configure the Firebase Module. Step #4: Add Vue.js Router. Step #5: List of Boards using Bootstrap-Vue. Step #6: Show Details and Delete Board using Bootstrap-Vue. Step # 7: Add Board using Bootstrap-Vue. Step #8: Edit Board using Bootstrap -Vue. Step #9: Run and Test Vue .js Firebase Firestore Web Application. The following tools, framework, and module are required for this tutorial: Node.js (Recommended version), Vue.js, Firebase, Terminal (Mac/Linux) or Node Command Line (Windows), and IDE or Text editor. We assume that you have already installed Node.js. Make sure the Node.js command line is working (on Windows) or runnable in Linux/OSX terminal. Step #1: Setup Firebase Firestore database. Setup Google Firebase is very simple. Open your browser and go to Google Firebase console and log in using your Google account. We are already login using our account. Click create project or add project button. Name it as you like(ours: Djamware). Click the continue button, for now we can disable the Google Analytics for this project and click create project button. Then click continue button, you will be redirected to this page. This is a Firebase project dashboard. Go to the Develop menu on the left then click Database and then click create database button to start in test mode then click next button and click done. Click start collections, fill collection ID (ours: boards) and click next button. Add the required fields then click finish the wizard. Now the Firebase Firestore database is ready to access. You can get the all required configuration from the setting ->project settings. Step #2: Create Vue.js App using Vue-CLI. Vue-CLI is a full system for rapid Vue.js development with the current latest version is 4. To install Vue-CLI 4 type this command from the terminal or Node command line. Next, check the version to make sure that you have 4.1.2 version of Vue-CLI. Next, create a new Vue.js project in your Vue Apps folder then type this command. For now, use the default for every questions that show up in the terminal. Next, go to the newly created folder. To make sure that created Vue.js projects working, type these commands to run the Vue.js application. You will see this page when open http://localhost: 8080/ in the browser. Step # 3: Install and Configure the Firebase module. We use the Firebase module to access the Firebase Firestore database. for that, type this command to install the module. If there’s the Vue.js application running, just press control + C. Next, open these Vue.js projects with your IDE or text editor. On Visual Studio we can start it by type this command. Next, create a new file Firebase.js in the root of project folder for Firebase configuration. Open and edit `src/Firebase.js` then replace all codes with these. You can find or get this configuration parameters in the Firebase console by click gear button ->project settings. And here they are. Fill the API Key with web API key, databaseURL in the service account tab ->scroll down and here is the database URL. Projects ID in the settings ->general tab and here we are Firebase configurations. Step #4: Add Vue.js Router. By default, the vue-router is not installed. For that, type this command to install that module. To register or create routes for the whole applications navigation, create a router folder and index.js file. Open and edit src/router/index.js then add these imports of VueRouter and required created components. Add the router to each components or page. Add Vue files for the registered components or pages. Finally, add or register this router file to src/main.js by adding these imports of VueRouter and router. Register the Vue-Router after `Vue.config`. Modify the “new Vue” to be like this to make this Router available or working on a Vue. js views. Open and edit App.vue then replace the Vue template and codes with these. As you see we are using RouterVue to access all child view in the components. Step #5: List of Boards using Bootstrap-Vue. Before create or show data to the views, we have to add Bootstrap-Vue. Type this command to install the module. Next, open and edit `src/main.js` then add these imports of BootstrapVue and Boot- strap stylesheet. Add this line of the Vue.config. Now, open and edit `src/components/ BoardList.vue` then add these lines of codes that contain Bootstrap-Vue templates and a method to get a list of data from Firebase. Step #6: Show Details and Delete Board using Bootstrap-Vue. Open and edit `src/components/ ShowBoard.vue` then add these lines of codes that contain Bootstrap-Vue templates components and a method to get single data form Firebase. Step #7: Add Board using Bootstrap-Vue. Open and edit `src/ components/AddBoard.vue` then add these lines of codes that contain Bootstrap- Vue template components and the method to post data to Firebase. Step #8: Edit Board using Bootstrap-Vue. Open and edit `src/ components/EditBoard.vue` then add these lines of codes that contain Bootstrap-Vue templates components and Vue method to get or post data from or to Firebase. Step #9: Run and Test Vue.js Firebase Firestore Web Application. This time to test all complete the Vue .js and Firebase Firestore database Stack CRUD web application. Type this command to run again this web application. And here the application looks like, you can test all CRUD functionality. That it’s, the Vue.js Firebase Tutorial: Build Firestore CRUD Web Application. You can find the article and working source code link in the descriptions below. If you think this tutorial is useful, please like, share, comment, and subscribe to our channel. Thank you and see you later!

Danny Hutson

Leave a Reply

Your email address will not be published. Required fields are marked *