firebase.js

import firebase from 'firebase';
import { onUnmounted, ref } from 'vue';

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};
const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();

const inventoryCollection = db.collection("inventory");

export const createUser = user => {
    user.created_at = firebase.firestore.Timestamp.now()
    //const id = usersCollection.doc().id
    return usersCollection.doc(user.userId).set(user)
}

export const getInventory = async() => {
    let inventoryItems = '';
    await inventoryCollection.get()
    .then((querySnapshot) => {
        console.log(JSON.stringify(querySnapshot));
    })
}

export const useLoadInventory = () => {
    const items = ref([]);
    const close = inventoryCollection.onSnapshot(snapShot => {
        items.value = snapShot.docs.map(doc => ({id: doc.id, ...doc.data()}));
    });

    onUnmounted(close);

    console.log(JSON.stringify(items));

    return items;
}

HomeView.vue

<script>
import firebase from "firebase";
import { useLoadInventory } from "@/firebase";

import { onMounted, reactive } from "vue";

export default {
  name: "HomeView",
  setup() {
    const inventoryData = useLoadInventory();

    return { inventoryData };
  },
};
</script>

<template>
  <main>
    <div class="container">
      <h1>A very simple store to get your business online</h1>

      <div class="row">
        <div class="col-8">
          <div class="row">
            <div class="col-6" v-for="item in inventoryData" :key="item.id">
              <img :src="item.photo1" alt="" />
              <h3>{{ item.itemName }}</h3>
            </div>
          </div>
        </div>
        <div class="col-4">
          <h3>Menu</h3>
          <router-link to="/login">Login</router-link>
        </div>
      </div>
    </div>
  </main>
</template>
<style>
img {
  max-width: 100%;
}
</style>