How To Build And Deploy A Vue.js App With Cloud Firestore Vuefire

Building Modern Applications with Vue.js and Firebase

Building modern web applications requires seamless integration between frontend frameworks and backend services. Vue.js, with its reactive approach, pairs excellently with Firebase Cloud Firestore's flexible database solution. VueFire serves as the official bridge between these technologies, providing intuitive composables that transform how developers interact with Firebase services.

This guide walks you through creating, building, and deploying a complete Vue.js application powered by Cloud Firestore, covering everything from initial setup to production deployment.

What You'll Learn

• Setting up Vue.js project with VueFire and Firebase
• Firebase project configuration and Firestore setup
• VueFire installation and initialization
• Core composables: useCollection(), useDocument(), useCurrentUser()
• CRUD operations with Firestore
• Firebase Authentication integration
• Security rules for Firestore
• Deployment options and best practices

For teams looking to build scalable web applications, our web development services provide comprehensive expertise in Vue.js, Firebase, and modern cloud technologies.

Prerequisites And Project Setup

Before diving into implementation, ensure your development environment is prepared for the task ahead. You'll need Node.js installed on your system, preferably version 18 or higher, along with npm or your preferred package manager. A Firebase account is essential since Cloud Firestore serves as the database backend for this project.

Creating a Vue.js Project

Begin by creating a new Vue.js project using the official scaffolding tool. The Vue CLI or create-vue provides a streamlined approach to project initialization, allowing you to select TypeScript support, Vue Router, Pinia for state management, and other essential tools during setup.

npm create vue@latest my-firestore-app
cd my-firestore-app
npm install

Recommended Project Structure

The project structure should include separate directories for components, views, and composables, maintaining clean separation of concerns throughout the application. Consider organizing your Firebase-related code in a dedicated folder, making it easy to manage configuration and access points across your application.

For additional context on building Vue.js applications, see our guide on using text wireframe generators for planning your application architecture.

Firebase Project Configuration

Creating a Firebase project establishes the foundation for your backend services. Navigate to the Firebase console and create a new project, providing a meaningful name and configuring optional settings like Google Analytics based on your project requirements.

Setting Up Firestore

Cloud Firestore requires explicit activation within your Firebase project. The Firestore console provides a straightforward interface for creating your first database, allowing you to choose between production mode with security rules or test mode with open access for development purposes.

Firebase Configuration File

Your Firebase configuration file should be created in a dedicated location within your Vue project, typically in a src/firebase directory. This file exports initialized Firebase services that can be imported throughout your application:

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
 apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
 authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
 projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
 storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
 messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
 appId: import.meta.env.VITE_FIREBASE_APP_ID
}

const firebaseApp = initializeApp(firebaseConfig)
export const db = getFirestore(firebaseApp)
export const auth = getAuth(firebaseApp)

For a comprehensive overview of Firebase configuration patterns, refer to the LogRocket Vue.js Firestore Tutorial.

Installing And Configuring VueFire

VueFire acts as the official Firebase binding library for Vue.js, offering composables that create reactive connections between your Vue components and Firebase data sources. Installation requires both the vuefire package and the firebase package, as VueFire depends on Firebase's underlying SDK.

Installation

npm install vuefire firebase

Main Application Configuration

Configuration begins in your main application file, typically main.ts or main.js. Import VueFire and any additional modules you require, such as VueFireAuth for authentication support:

import { createApp } from 'vue'
import { VueFire, VueFireAuth } from 'vuefire'
import App from './App.vue'

const app = createApp(App)

app.use(VueFire, {
 firebaseApp,
 modules: [
 VueFireAuth(),
 ],
})

app.mount('#app')

VueFire 3 introduced support for the Composition API, providing composables like useFirestore(), useCollection(), and useCurrentUser() that integrate naturally with Vue 3's reactivity system. These composables handle subscription management automatically, ensuring your components stay synchronized with Firebase data without manual cleanup.

For detailed setup instructions, consult the VueFire Official Documentation.

Core VueFire Composables

Understanding VueFire's composables is essential for building reactive Firebase-powered applications. The composables translate Firebase's event-based listeners into Vue's reactive refs, automatically updating your components when data changes on the server.

useCollection() - Reactive Collections

The useCollection() composable retrieves a reactive reference to a Firestore collection, returning an array that stays synchronized with the database:

import { useCollection } from 'vuefire'
import { collection, query, where, orderBy } from 'firebase/firestore'
import { db } from '@/firebase'

const todos = useCollection(
 query(
 collection(db, 'todos'),
 where('completed', '==', false),
 orderBy('createdAt', 'desc')
 )
)

useDocument() - Reactive Documents

For individual documents, useDocument() provides reactive access to single document data. This composable is particularly useful for user profiles, settings pages, or any view requiring detailed document information:

import { useDocument } from 'vuefire'
import { doc } from 'firebase/firestore'
import { db } from '@/firebase'

const userProfile = useDocument(doc(db, 'users', userId))

Both composables return reactive objects that update automatically when the underlying Firebase data changes. The synchronization happens in real-time, meaning any changes made through the Firebase console or by other users appear immediately in your Vue components without requiring page refreshes.

If you're exploring different frontend approaches, our guide on exploring Chakra UI MCP Server covers alternative component libraries that can integrate with your Firebase backend.

Building CRUD Operations

Create, Read, Update, and Delete operations form the foundation of most applications. VueFire simplifies these operations by providing reactive data bindings while relying on Firebase's SDK for mutation methods.

Creating Documents

Adding documents to Firestore collections requires importing the appropriate functions from Firebase's modular SDK. The addDoc() function generates a new document with an auto-generated ID, while setDoc() allows you to specify a custom document ID:

import { ref } from 'vue'
import { useCollection } from 'vuefire'
import { addDoc, collection, serverTimestamp } from 'firebase/firestore'
import { db } from '@/firebase'

const newItem = ref('')
const items = useCollection(collection(db, 'items'))

async function createItem() {
 if (!newItem.value.trim()) return

 await addDoc(collection(db, 'items'), {
 name: newItem.value,
 createdAt: serverTimestamp(),
 updatedAt: serverTimestamp()
 })

 newItem.value = ''
}

Server timestamps provide reliable ordering regardless of client clock variations, making them ideal for tracking creation and modification times.

Reading Data With Queries

Firestore's querying capabilities allow you to retrieve filtered, sorted subsets of data efficiently. Building queries involves chaining methods like where(), orderBy(), limit(), and startAfter() to construct complex data retrieval logic:

import { useCollection } from 'vuefire'
import { collection, query, where, orderBy, limit, startAfter } from 'firebase/firestore'
import { db } from '@/firebase'

// Get recent items from a specific category
const recentItems = useCollection(
 query(
 collection(db, 'items'),
 where('category', '==', 'electronics'),
 orderBy('createdAt', 'desc'),
 limit(20)
 )
)

For practical examples of CRUD operations, see the LogRocket Vue.js Firestore Tutorial.

Firebase Authentication Integration

User authentication adds personalization and security to your application. Firebase Authentication supports multiple sign-in methods including email/password, social providers like Google and GitHub, phone authentication, and custom identity systems.

VueFire's authentication module provides the VueFireAuth composable for integrating authentication state into your Vue components. This module adds authentication-related composables that track the current user and provide easy access to auth operations:

Setting Up Authentication Module

import { VueFire, VueFireAuth } from 'vuefire'
import { createApp } from 'vue'
import { firebaseApp } from './firebase'

const app = createApp(App)

app.use(VueFire, {
 firebaseApp,
 modules: [
 VueFireAuth(),
 ],
})

Accessing Current User

The useCurrentUser() composable provides reactive access to the authenticated user object, automatically updating when sign-in state changes:

import { useCurrentUser } from 'vuefire'

const user = useCurrentUser()

// Template usage
console.log(user.value?.displayName)

For comprehensive authentication patterns, refer to the VueFire Authentication Guide.

Security Rules For Firestore

Security rules protect your data by controlling access at the document and collection levels. Rules evaluate based on authentication state, request data, and existing database content, providing flexible authorization logic.

Basic Security Rules Structure

rules_version = '2';
service cloud.firestore {
 match /databases/{database}/documents {
 // Helper function to check if user is authenticated
 function isAuthenticated() {
 return request.auth != null;
 }

 // Items collection rules
 match /items/{itemId} {
 // Anyone can read items
 allow read: if true;

 // Only authenticated users can create
 allow create: if isAuthenticated();

 // Only the owner can update or delete
 allow update, delete: if isAuthenticated()
 && request.auth.uid == resource.data.userId;
 }

 // User profiles
 match /users/{userId} {
 // Users can read any profile
 allow read: if true;

 // Users can only create and update their own profile
 allow create, update: if isAuthenticated()
 && request.auth.uid == userId;
 }
 }
}

Testing your rules using the Firebase emulator suite helps verify security logic before deployment. The emulator provides a complete Firestore environment where you can simulate different authentication states and request scenarios to ensure your rules work as expected.

Deployment Strategies

Deploying Vue.js applications with Firebase backend services involves multiple options depending on your hosting preferences and infrastructure requirements. Firebase Hosting provides the most integrated experience, while traditional hosting services offer alternative deployment paths.

Firebase Hosting Deployment

Firebase Hosting provides global CDN distribution, automatic SSL, and seamless integration with Firebase services. Deployment involves building your Vue.js application for production and using Firebase's hosting tools to deploy:

npm run build
firebase init hosting
firebase deploy

Firebase Configuration

{
 "hosting": {
 "public": "dist",
 "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
 "rewrites": [
 {
 "source": "**",
 "destination": "/index.html"
 }
 ],
 "headers": [
 {
 "source": "**",
 "headers": [
 {
 "key": "Cache-Control",
 "value": "no-cache"
 }
 ]
 }
 ]
 }
}

GitHub Actions Deployment

Automating deployments through GitHub Actions ensures consistent release workflows and reduces manual deployment steps. Create a workflow file that builds and deploys on push to your main branch:

name: Deploy to Firebase Hosting
on:
 push:
 branches: [main]
jobs:
 deploy:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v3
 - uses: actions/setup-node@v3
 with:
 node-version: '18'
 - run: npm ci && npm run build
 - uses: FirebaseExtended/action-hosting-deploy@v0
 with:
 repoToken: '${{ secrets.GITHUB_TOKEN }}'
 firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
 projectId: your-project-id

For information about our cloud solutions and deployment expertise, explore our cloud services.

Performance Optimization

Optimizing VueFire applications involves understanding how data synchronization impacts application performance. Limit the data you retrieve by using specific field selections, query constraints, and pagination strategies.

Query Optimization

Firestore charges based on document reads, making query optimization both a performance and cost consideration. Retrieve only the fields you need using property selections:

import { useCollection } from 'vuefire'
import { collection, query, select } from 'firebase/firestore'
import { db } from '@/firebase'

const items = useCollection(
 query(
 collection(db, 'items'),
 select('title', 'createdAt', 'status')
 )
)

Compound queries with appropriate indexes enable efficient filtering and sorting, avoiding client-side filtering that requires reading unnecessary documents.

Offline Persistence

Firestore's offline persistence caches documents locally, providing seamless access to previously loaded data when offline. Enable persistence in your Firebase configuration:

import { initializeApp } from 'firebase/app'
import { getFirestore, enableIndexedDbPersistence } from 'firebase/firestore'

const firebaseApp = initializeApp(firebaseConfig)
const db = getFirestore(firebaseApp)

enableIndexedDbPersistence(db).catch((err) => {
 if (err.code === 'failed-precondition') {
 console.log('Multiple tabs open, persistence can only be enabled in one tab at a time.')
 } else if (err.code === 'unimplemented') {
 console.log('Current browser does not support IndexedDB persistence.')
 }
})

VueFire automatically manages subscription cleanup when components unmount, but understanding the underlying mechanics helps when building complex applications. For more on Vue.js performance, see our guide on using React Responsive for responsive design patterns.

Conclusion

Building and deploying Vue.js applications with Cloud Firestore and VueFire combines Vue's reactive elegance with Firebase's powerful backend services. The official VueFire library provides intuitive composables that integrate naturally with Vue 3's Composition API, enabling developers to create responsive, real-time applications with minimal boilerplate.

From initial project setup through deployment, each step in this process builds upon established patterns that scale from prototypes to production applications. Security rules protect your data while enabling flexible access patterns, and deployment options accommodate projects of varying complexity.

The combination of Vue.js and Firebase continues to evolve, with VueFire maintaining active development to support new Firebase features and Vue improvements. Staying current with library updates ensures your applications benefit from performance improvements and new capabilities as they become available.

For teams exploring backend alternatives, our guide on Express.js adoption covers another popular Node.js framework for building APIs and server-side applications.

Need help implementing Vue.js and Firebase solutions for your business? Our web development team has extensive experience building real-time applications with modern JavaScript frameworks and cloud backends.

Sources

1. VueFire Official Documentation
2. LogRocket Vue.js Firestore Tutorial
3. VueFire Authentication Guide