Build & Deploy a Vue.js App with Cloud Firestore: A Step-by-Step Guide

Unlock the Power of Vue.js and Firebase: A Step-by-Step Guide to Building a CRUD Application

As a frontend engineer, you’re probably tired of dealing with the complexities of building a backend or API. That’s where Vue.js and Firebase come in – two powerful tools that can help you build a robust and scalable application without breaking a sweat.

What is Firebase?

Firebase is a backend-as-a-service (BaaS) offered by Google that provides a suite of tools, including databases, machine learning kits, cloud functions, authentication, hosting, and more. By abstracting the complexity of building a backend system, Firebase enables developers to focus on building the client-side of applications.

What is Cloud Firestore?

Cloud Firestore is a NoSQL database that stores data in the form of documents, which are arranged into collections and support client- or server-side integration. With Cloud Firestore, you can store data in a flexible and scalable way, and perform fast read and write operations.

What is Vuefire?

Vuefire is a lightweight wrapper that handles real-time binding between Vue/Vuex and Firebase databases. It provides a seamless way to integrate Firebase with your Vue.js application, keeping your local data in sync with remote Firebase databases.

Getting Started with Vue.js and Firebase

To follow along with this tutorial, you’ll need:

• Basic knowledge of Vue.js
• Node and npm installed
• A Google account
• Vue.js CLI installed (npm install -g @vue/cli)
• Firebase tools CLI installed for deployment (npm install -g firebase-tools)

Creating a Vue.js App

To create a new Vue.js app, execute the following command:

vue create crud-app

Configure your Vue project on the interactive screen, selecting the default (Babel, ESLint) preset. Once done, navigate to the crud-app directory using cd crud-app or open the folder in your code editor.

Setting up Element UI

To set up Element UI, execute the following command:

vue add element-ui

Configure the setup as follows:

• Select Fully import
• Input N for locale
• Select en for language

Setting up Firebase and Cloud Firestore

To set up Firebase, create a new project by following these steps:

• Visit the Firebase console and sign in with your Google account
• Click Add Project
• Click Continue to create the project (you can turn off analytics)
• Click the web icon,
• Enter a nickname for your app and click Next
• Copy the Firebase configuration contents within the scripts tag

Create a new Firestore database:

• Click Database, and then under Cloud Firestore, click Create database
• Set the security rules in test mode
• Select a location and click Next
• Create an employees collection and add some random documents (optional)

Configuring Firebase with Vue.js

To configure Firebase with Vue.js, install the Firebase JS client and update your dependencies:

npm install firebase

Create a new file firebaseInit.js within the src directory with the following contents:
“`javascript
import firebase from ‘firebase/app’;
import ‘firebase/firestore’;

const firebaseConfig = {
// Replace with your Firebase configuration
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

export { db };
“`
Creating the UI with Element UI

Modify the src/App.vue file to create a basic data table to list all documents coming from the database. Use a popover input to create and edit documents, and a button to trigger deletion.

Integrating Cloud Firestore CRUD Methods

To integrate Cloud Firestore CRUD methods, import the initialized Firebase app and create an instance of Cloud Firestore in src/App.vue. Define the create, read, update, and delete methods as follows:

• Create method: Creates a new document on the Cloud Firestore collection.
• Read method: Fetches all documents from the Cloud Firestore collection.
• Update method: Edits an existing document in the Cloud Firestore collection.
• Delete method: Deletes a document that exists in the Cloud Firestore collection.

Integrating Vuefire

To integrate Vuefire, install the Vuefire npm package:

npm install vuefire

Modify the src/main.js file to add the following lines of code:
“`javascript
import { firestorePlugin } from ‘vuefire’;

Vue.use(firestorePlugin);

Import the initialized Firebase app into `src/App.vue`:
javascript
import { db } from ‘./firebaseInit’;
“`
Use Vuefire to perform CRUD operations:

• Query data using the firestore property to map your Firestore database.
• Use methods to write, update, and delete data from the database.

Deploying Your Vue.js Application

To deploy your Vue.js application, run the following command:

npm run build

Initialize Firebase and complete the following steps:

• Define “hosting” as the Firebase CLI feature you want to set up for the folder
• Select Use an existing project
• Navigate to and select the project we created earlier
• Set the public directory as:.
• For Configure as a single-page app (rewrite all urls to /index.html), choose Yes
• For File./index.html already exists. Overwrite? select No

To deploy, execute the following command:

firebase deploy

You can access the deployed app here.

Conclusion

With this tutorial, you’ve learned how to build a simple CRUD application using Vue.js for the client-side and Firebase for data storage and hosting. You can find the full source code on GitHub and access a demo of the app. Happy coding!