Firebase portfolio Vue 3

npm install firebase

import { initializeApp } from "firebase/app";
   import { getDatabase, ref, push, set, onValue } from "firebase/database";
   import { getStorage, ref as storageRef, uploadBytes, getDownloadURL } from "firebase/storage";

   const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_AUTH_DOMAIN",
       databaseURL: "YOUR_DATABASE_URL",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_STORAGE_BUCKET",
       messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
       appId: "YOUR_APP_ID"
   };

   const app = initializeApp(firebaseConfig);
   const db = getDatabase(app);
   const storage = getStorage(app);

   export { db, storage, ref, push, set, onValue, storageRef, uploadBytes, getDownloadURL };

<template>
  <div>
    <h2>Add Portfolio Item</h2>
    <form @submit.prevent="addPortfolio">
      <input v-model="title" type="text" placeholder="Title" required />
      <input type="file" @change="onFileChange" required />
      <button type="submit">Upload</button>
    </form>
  </div>
</template>

<script>
import { db, storage, ref, push, set, storageRef, uploadBytes, getDownloadURL } from "@/firebase";

export default {
  data() {
    return {
      title: "",
      file: null,
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    async addPortfolio() {
      if (!this.file) return;

      // Upload image to Firebase Storage
      const imageRef = storageRef(storage, `portfolio/${this.file.name}`);
      const snapshot = await uploadBytes(imageRef, this.file);
      const imageUrl = await getDownloadURL(snapshot.ref);

      // Save data to Firebase Realtime Database
      const newPortfolioRef = push(ref(db, "portfolios"));
      set(newPortfolioRef, {
        title: this.title,
        image: imageUrl,
      });

      // Reset fields
      this.title = "";
      this.file = null;
      alert("Portfolio item added!");
    },
  },
};
</script>

<template>
  <div>
    <h2>Portfolio List</h2>
    <div v-if="portfolios.length">
      <div v-for="(item, index) in portfolios" :key="index" class="portfolio-item">
        <h3>{{ item.title }}</h3>
        <img :src="item.image" alt="Portfolio Image" />
      </div>
    </div>
    <p v-else>No portfolio items found.</p>
  </div>
</template>

<script>
import { db, ref, onValue } from "@/firebase";

export default {
  data() {
    return {
      portfolios: [],
    };
  },
  mounted() {
    const portfolioRef = ref(db, "portfolios");
    onValue(portfolioRef, (snapshot) => {
      this.portfolios = snapshot.val() ? Object.values(snapshot.val()) : [];
    });
  },
};
</script>

<style scoped>
.portfolio-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}
img {
  width: 100%;
  max-width: 200px;
}
</style>

<template>
  <div>
    <PortfolioForm />
    <PortfolioList />
  </div>
</template>

<script>
import PortfolioForm from "./components/PortfolioForm.vue";
import PortfolioList from "./components/PortfolioList.vue";

export default {
  components: {
    PortfolioForm,
    PortfolioList,
  },
};
</script>

{
     "rules": {
       ".read": true,
       ".write": true
     }
   }

npm run dev