How to Initialize Firebase in Vite and VueJS?

Firebase with Vite and Vue Firebase, combined with Vite and Vue, opens up a powerful combination of real-time capability, fast development, and seamless backend integration. Firebase offers a real-time database, authentication, and cloud storage services that vastly reduce having to manage any backend infrastructure.

Vite brings next-generation development experience for Vue apps with features such as instant server start, lightning-fast HMR, and optimized base splitting. Combined, they let you create responsive real-time applications with features like authentication, data syncing, and cloud storage with the optimized build processes of Vite and the reactive data binding of Vue. It streamlines not only the frontend development process but also the backend tasks with much speed, ultimately deploying an application faster and making it more scalable.

Steps to initialize Firebase in Vite and VueJS

First, we need to create a Vite project and select Vue as its web framework.

Step 1: Use the below command to create a vite project.

npm create vite@latest

Type the project name of your choice. Then follow the steps and select vue as framework and variant as javascript or typescript as per your choice.

Step 2: Now, change the directory to your project name, install dependencies, and finally run the server locally on your machine using the below commands.

cd yourproject_name
npm install
npm i firebse 
npm run dev

Project Structure:

Updated Dependencies:

"dependencies": {
    "@vue/cli-plugin-babel": "4.1.1",
    "vue": "^2.6.11",
    "firebase": "10.13.1"
  }

Step 3: Go to firebase website. Login and create a project directory.

Step 4: After you are done creating a project on firebase website. Go to project setting and select web as required app. You can allow hosting if required also.

Step 5: Now firebase will provide you with SDK(software development kit). Inside the src folder your vue project, create a firebaseConfig.js paste them into this file and save it.

Step 6: Add the code into firebaseConfig.js file to initialize the firebase.

//  firebaseConfig.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

// in the blank quotes copy paste values from
// sdk provided by firebase for your project.
const firebaseConfig = {
  apiKey: "put_your_values from sdk here",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "1:758793695244:web:",
  measurementId: "",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

export { app, analytics };

Step 7: Now, let's make a vue component and name it firebaseConfig.vue inside the src/components folder.

// firebaseConfig.vue
<template>
  <div>
    <h1>Firebase Analytics Example</h1>
    <h3>Check your Firebase Analytics dashboard to see events</h3>
  </div>
</template>

<script>
import { onMounted } from 'vue';
import { analytics } from '../firebaseConfig'; // Import the analytics instance

export default {
  setup() {
    onMounted(() => {
      console.log('Firebase analytics initialized example:', analytics);
    });
  },
};
</script>

<style scoped>
h1 {
  color: #da2e2e;
}
</style>

Step 8: Next make changes in the App.vue file in the src folder.

// App.vue
<template>
  <div id="app">
    <FirebaseComponent />
  </div>
</template>

<script>
import FirebaseComponent from './components/firebaseComponent.vue';

export default {
  name: 'App',
  components: {
    FirebaseComponent,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 40px;
}
</style>

This a simple Vue 3 component designed to demonstrate the initialization of Firebase Analytics in a Vue project. It consists of a static template displaying a heading ("Firebase Analytics Example") and a paragraph instructing users to check their Firebase Analytics dashboard for events. You can make the component as per your requirements and import firebase methods in the component.

Conclusion

Firebase's integration to the Vite-powered Vue project is pretty straightforward, effective, and allows one to make their web applications fully equipped with backend services like authentication, a database, and analytics. With Vite's fast development environment and powered by the Vue reactive system, you can easily use it for setting up Firebase using the Firebase SDK. In this configuration, you will turn on user authentication, real-time data management, and analytics tracking with ease. It allows Firebase services interaction with simple components; easy scaling allows integration with different Firebase tools coupled with a modern, responsive front-end.