[fix] firebase app missing

src/components/Filters.vue

@@ -16,10 +16,19 @@
 </template>
 
 <script setup>
-  import { computed, ref, watch } from "vue";
-  import { companiesFilters, companiesTags } from "@/store.js";
-  import { where } from "firebase/firestore";
   import Sidebar from "@/ui/Sidebar.vue";
+  import { computed, ref, watch } from "vue";
+  import { collection, query, where } from "firebase/firestore";
+  import { useCollection, useFirestore } from "vuefire";
+  import { companies } from '@/store.js'
+
+  // Get collections
+  const db = useFirestore();
+  const companiesTags = useCollection(collection(db, "tags"))
+  const companiesCol = collection(db, "companies");
+  const companiesFilters = ref([null]);
+  const companiesQuery = computed(() => query(companiesCol, ...companiesFilters.value));
+  useCollection(companiesQuery, { target: companies })
 
   // Favourite handler
   const favouriteChecked = ref(true);

src/components/Map.vue

@@ -7,7 +7,7 @@
   import "leaflet/dist/leaflet.css";
   import '@fortawesome/fontawesome-free/css/all.min.css';
   import L from "leaflet";
-  import { companies } from "@/store.js";
+  import { companies } from '@/store.js'
 
   // Parameters
   const props = {
@@ -40,7 +40,7 @@
     markers = [];
     // Add filtered companies as markers
     companies.value.forEach((company) => {
-      const markerOptions = company.favourite ? {icon: favouriteIcon} : {};
+      const markerOptions = company.favourite ? {icon: favouriteIcon} : {icon: icon};
       const marker = L.marker([company.latitude, company.longitude], markerOptions)
         .addTo(map)
         .bindPopup(`<b>${company.company_name}</b>`);

src/firebase-config.js

@@ -1,4 +1,4 @@
-export default {
+export const firebaseConfig = {
   apiKey: "AIzaSyAeFMoXSElcKsCjHelN2kgOSY-rVnnpSR8",
   authDomain: "around-the-job.firebaseapp.com",
   projectId: "around-the-job",

src/main.js

@@ -1,12 +1,13 @@
 import '@/assets/main.css'
 import { VueFire } from "vuefire";
-import { getFirebase } from './firebase'
 import { createApp } from 'vue'
-import App from './App.vue'
-
-const app = createApp(App)
-  .use(VueFire, {
-    firebaseApp: getFirebase()
-  })
+import App from '@/App.vue'
+import { initializeApp } from 'firebase/app'
+import { firebaseConfig } from "@/firebase-config.js";
 
+const firebaseApp = initializeApp(firebaseConfig);
+const app = createApp(App);
+app.use(VueFire, {
+  firebaseApp
+})
 app.mount('#app');

src/store.js

@@ -1,10 +1,3 @@
-import { collection, query } from "firebase/firestore";
-import { ref, computed } from "vue";
-import { useFirestore, useCollection } from "vuefire";
+import { ref } from "vue";
 
-const db = useFirestore();
-const companiesCol = collection(db, "companies");
-export const companiesFilters = ref([null]);
-const companiesQuery = computed(() => query(companiesCol, ...companiesFilters.value));
-export const companies = useCollection(companiesQuery);
-export const companiesTags = useCollection(collection(db, "tags"))
+export const companies = ref()