Quasar 2 & Firebase Cloud Firestore (with Vue 3 & Pinia)

Quasar 2 & Firebase Cloud Firestore (with Vue 3 & Pinia)

In today’s world of modern web development, the combination of frameworks and technologies can make a massive difference in the ease of development and the power of the applications you build. 

Enroll Now

One powerful combination is Quasar Framework 2, Vue 3, Pinia, and Firebase Cloud Firestore.

• Quasar 2: A high-performance Vue.js-based framework that allows you to build responsive web, mobile, and desktop applications with a single codebase.
• Vue 3: A progressive JavaScript framework for building user interfaces and single-page applications (SPAs).
• Pinia: A state management library for Vue that is an intuitive and more powerful alternative to Vuex.
• Firebase Cloud Firestore: A NoSQL cloud database from Google’s Firebase platform, designed for real-time synchronization and scalability.

In this guide, we’ll explore how to integrate Firebase Cloud Firestore with a Quasar 2 application that uses Vue 3 for the frontend and Pinia for state management. The goal is to help you set up a project from scratch and show you how to utilize these tools effectively for a highly performant and maintainable app.

Why This Combination?

Before diving into the technical details, let's quickly examine why this combination of tools is so powerful:

1. Quasar 2 simplifies cross-platform development by providing components and utilities to build web, mobile (via Cordova or Capacitor), and desktop apps (via Electron).
2. Vue 3 introduces composition APIs and significant performance improvements, making it a solid choice for modern SPAs.
3. Pinia is lighter and more straightforward than Vuex but still provides a robust state management solution that integrates seamlessly with Vue.
4. Firebase Cloud Firestore offers real-time synchronization and flexible data models, making it ideal for real-time apps like chat systems or collaborative platforms.

Setting Up the Project

Step 1: Install Quasar CLI

First, you need to install the Quasar CLI globally if you don’t already have it:

bash
npm install -g @quasar/cli

Step 2: Create a New Quasar Project

Once the Quasar CLI is installed, create a new Quasar project:

bash
quasar create firestore-quasar-app

This command will prompt you for some basic configuration choices like the name of your project, your preferred UI theme (Material or iOS), and linting tools. Once you've made your selections, Quasar will set up the project for you.

Step 3: Install Firebase SDK

To integrate Firebase Cloud Firestore, you’ll need to install Firebase’s SDK. Navigate into your Quasar project directory and run the following command:

bash
npm install firebase

Step 4: Initialize Firebase

Inside your project, you need to configure Firebase. First, head over to the Firebase Console and create a new Firebase project. Enable Firestore for your project in the Firebase Console.

Once your Firebase project is ready, grab your Firebase configuration details from the console. Then, create a new file firebase.js inside the src/boot directory and add the following code:

javascript
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

export { db };

Now, update quasar.conf.js to include this file in the boot process:

javascript
boot: ['firebase']

Step 5: Install Pinia for State Management

We will use Pinia to manage the application’s state. Install Pinia by running the following command:

bash
npm install pinia

Then, create a Pinia store by adding a new folder called stores inside the src directory. Inside stores, create a file called useFirestoreStore.js:

javascript
import { defineStore } from 'pinia';
import { db } from 'boot/firebase';
import { collection, getDocs, addDoc } from 'firebase/firestore';

export const useFirestoreStore = defineStore('firestoreStore', {
  state: () => ({
    items: [],
  }),

  actions: {
    async fetchItems() {
      const querySnapshot = await getDocs(collection(db, 'items'));
      this.items = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    },

    async addItem(item) {
      await addDoc(collection(db, 'items'), item);
      this.fetchItems();  // Refresh the list
    }
  }
});

Step 6: Initialize Pinia in Your App

To use Pinia, initialize it in your src/main.js file:

javascript
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { Quasar } from 'quasar';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.use(Quasar);
app.mount('#app');

Building a Component to Interact with Firestore

Next, create a component that allows the user to interact with the Firestore data. You’ll build a simple component that lists items and provides a form to add new items.

vue
<template>
  <div>
    <q-list bordered padding>
      <q-item v-for="item in items" :key="item.id">
        <q-item-section>{{ item.name }}</q-item-section>
      </q-item>
    </q-list>

    <q-input v-model="newItem" label="Add new item" />
    <q-btn @click="addItem" label="Add" color="primary" />
  </div>
</template>

<script>
import { useFirestoreStore } from 'stores/useFirestoreStore';
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const store = useFirestoreStore();
    const newItem = ref('');

    onMounted(() => {
      store.fetchItems();
    });

    const addItem = async () => {
      if (newItem.value.trim()) {
        await store.addItem({ name: newItem.value });
        newItem.value = '';
      }
    };

    return {
      newItem,
      addItem,
      items: store.$state.items,
    };
  },
};
</script>

Explaining Key Concepts

Real-Time Data Sync

Firebase Cloud Firestore allows you to sync data in real time. This means that when you add a new item or make changes to the data, all clients that are connected to the Firestore database will see updates without needing to refresh the page. The getDocs and addDoc methods from Firebase SDK allow you to interact with Firestore, providing real-time functionality with minimal effort.

Using Pinia for State Management

Pinia is used here to manage the state of our Firestore data. In this case, the useFirestoreStore store manages the list of items from Firestore. The store’s actions (fetchItems and addItem) interact with Firestore and ensure that the state is always up-to-date.

Quasar UI Components

Quasar provides a variety of UI components that can be easily integrated into your app. In the example above, we’re using q-list, q-item, q-input, and q-btn to create a simple user interface. Quasar’s Material Design components make it easy to build responsive, polished applications without having to write complex CSS.

Conclusion

Integrating Quasar 2, Vue 3, Pinia, and Firebase Cloud Firestore enables you to build powerful, cross-platform applications with real-time data synchronization. With Quasar’s robust UI framework, Vue 3’s flexibility, Pinia’s lightweight state management, and Firestore’s real-time NoSQL database, you have the ideal stack for building modern web and mobile applications.

By following the steps outlined here, you should now have a working Quasar project that integrates seamlessly with Firebase Cloud Firestore and Pinia for state management. Whether you're building a simple to-do app or a complex real-time collaborative platform, this stack will provide you with the tools and performance needed to get the job done efficiently.

Master Neural Networks: Build with JavaScript and React Udemy