DEV Community

Cover image for First look of Firebase web API v9 + Vue composition API

Posted on • Originally published at

First look of Firebase web API v9 + Vue composition API

I started experimenting Firebase web v9 APIs for my side hustle project along with Vue 3. I worked with Firebase earlier API set. So initializing the project and getting started with Vue didn't take much of my time.

But to the surprise, I got a fantastic experience with Firebase web v9 APIs with Vue composition APIs. I am going to explain how easy to get started with the integration.


To continue on the API exploration, I will consider Firebase sign-up functionality with email and password.

Install Firebase web v9 API

// latest firebase module is firebase@9.0.0-beta.5
npm install --save firebase@9.0.0-beta.5
Enter fullscreen mode Exit fullscreen mode

Firebase configuration for communication

//Add your project related keys in the below configuration
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "<change>",
  authDomain: "<change>",
  projectId: "<change>",
  storageBucket: "<change>",
  messagingSenderId: "<change>",
  appId: "<change>",
  measurementId: "<change>"

const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);

export { auth };
Enter fullscreen mode Exit fullscreen mode
import { auth } from './firebase';
import { createUserWithEmailAndPassword } from '@firebase/auth';

export default {
  async signupWithEmail(data) {
    createUserWithEmailAndPassword(auth,, data.password)
      .then((credential) => {
        const user = credential.user;
      .catch((error) => {
        console.error('Error ', error.message);
Enter fullscreen mode Exit fullscreen mode

Signup form in Vue

//NOTE: Ignore the css classes for now
  <section class="p-main">
    <div class="signup-wrapper">
      <div class="signup-title title">
        Sign Up

      <form @submit.prevent>
        <div class="signup-form">
          <div class="w-full">
            <input type="text" id="email" v-model="" placeholder="Enter your email">
          <div class="w-full">
            <input type="password" id="password" v-model="user.password" placeholder="Enter your password">
          <div class="btn-primary w-full text-center">
            <!-- <a href="" class="link-white">Signup</a> -->
            <button class="btn-primary" @click="onSignup">Signup</button>

          <div class="px-16 mt-2 bg-gray-200"><hr></div>
          <div class="text-center">
            Already having an account?
          <div class="text-center">
            <router-link :to="{ name: 'Signin'}">
              Sign In

import { useRouter } from "vue-router";
import UserService from '../services/UserService';
export default {
  setup() {
    const router = useRouter();

    const user = {
      email: '',
      password: ''

    const onSignup = () => {
      setTimeout(() => {
        router.push({name: "Home"});
      }, 1000);

    return {
Enter fullscreen mode Exit fullscreen mode

Importance of Firebase web v9 API

  • The new API follows the modular SDK, that produces reduced SDK output based on your imports
  • Provides greater supports with Javascript build tools
  • Follows ES6 approach which is familiar to every Javascript developers

NOTE: Firebase web v9 APIs are still in beta stage. So there might be some breaking API changes in the future.

Originally published on

Top comments (0)