firebase is working

.env

@@ -0,0 +1,7 @@
+VUE_APP_API_KEY="AIzaSyBi03NBONZ2ncp4PSvjbAplWm6pC5XnjTw"
+VUE_APP_AUTH_DOMAIN="dmd-4470.firebaseapp.com"
+VUE_APP_DATABASE_URL="https://dmd-4470.firebaseio.com"
+VUE_APP_PROJECT_ID="dmd-4470"
+VUE_APP_STORAGE_BUCKET="dmd-4470.appspot.com"
+VUE_APP_MESSAGE_SENDER_ID="159373794744"
+VUE_APP_APP_ID="1:159373794744:web:ca93db7d63c296b472834d"

package.json

@@ -7,14 +7,16 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "core-js": "^2.6.5",
-    "vue": "^2.6.10",
+    "core-js": "^3.6.4",
+    "firebase": "^7.13.1",
+    "firebaseui": "^4.5.0",
+    "vue": "^2.6.11",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.12.0",
-    "@vue/cli-service": "^3.12.0",
+    "@vue/cli-plugin-babel": "^4.2.3",
+    "@vue/cli-service": "^4.2.3",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.0",
     "vue-template-compiler": "^2.6.10"

src/main.js

@@ -3,7 +3,22 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
-Vue.config.productionTip = false
+import firebase from '@/plugins/firebase-init'
+import '@/plugins/firebaseui-init'
+
+Vue.config.productionTip = false;
+
+/**
+ * Makes available:
+ * - window.firebase
+ * - window.db
+ */
+Vue.use(firebase);
+
+
+
+// Vue.use(firebaseui);
+
 
 new Vue({
   router,

src/plugins/firebase-init.js

@@ -0,0 +1,24 @@
+import * as firebase from "firebase/app";
+
+import "firebase/auth";
+import "firebase/firestore";
+
+firebase.initializeApp({
+  apiKey: process.env.VUE_APP_API_KEY,
+  authDomain: process.env.VUE_APP_AUTH_DOMAIN,
+  databaseURL: process.env.VUE_APP_DATABASE_URL,
+  projectId: process.env.VUE_APP_PROJECT_ID,
+  storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
+  messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
+  appId: process.env.VUE_APP_APP_ID,
+  measurementId: process.env.VUE_APP_MEASUREMENT_ID,
+});
+
+export default {
+  install(vue, opts){   
+    // Attach necessary Firebase APIs here
+    // @url https://firebase.google.com/docs/web/setup
+    window.db = firebase.firestore();
+    window.firebase = firebase;
+  }
+}

src/plugins/firebaseui-init.js

@@ -0,0 +1,33 @@
+
+let firebaseui = {};
+firebaseui.install = function (Vue, options) {
+
+
+  // 1. add global method or property
+//   Vue.myGlobalMethod = function () {
+//     // some logic ...
+//   }
+
+  // 2. add a global asset
+//   Vue.directive('my-directive', {
+//     bind (el, binding, vnode, oldVnode) {
+//       // some logic ...
+//     }
+//     ...
+//   })
+
+  // 3. inject some component options
+//   Vue.mixin({
+//     created: function () {
+//       // some logic ...
+//     }
+//     ...
+//   })
+
+  // 4. add an instance method
+  Vue.prototype.$myMethod = function (methodOptions) {
+    // some logic ...
+  }
+}
+
+export default firebaseui

src/views/Home.vue

@@ -13,6 +13,9 @@ export default {
   name: 'home',
   components: {
     HelloWorld
+  },
+  mounted() {
+    // console.log(db);
   }
 }
 </script>