Setup Firebase (Web)
Create a Firebase project: https://console.firebase.google.com
Register your app with Firebase: Firebase Console -> Project Overview -> + Add app -> Web
Enable Firebase Console -> Storage
You might want to enable for Firebase Console -> Authentication if you are using storage rules request.auth.
Add Firebase SDK: https://firebase.google.com/docs/web/setup#add-sdks-initialize. You can do so via Firebase Hosting, CDN, or module bundlers/Node.js.
Firebase with Vue.js
Install
npm install firebasenpm install firebaseuinpm install axiosEdit main.js
import * as firebase from 'firebase/app'// storageimport 'firebase/storage'// authenticationimport 'firebase/auth'import * as firebaseui from 'firebaseui'import 'firebaseui/dist/firebaseui.css'const firebaseConfig = { apiKey: "AIza...", authDomain: "....firebaseapp.com", databaseURL: "https://....firebaseio.com", projectId: "...", storageBucket: "....appspot.com", messagingSenderId: "1020...", appId: "1:1020..."};firebase.initializeApp(firebaseConfig)NOTE: Get firebaseConfig from Firebase Console -> Project Overview (Click on Gear Icon) -> Project Settings -> General -> Your apps -> Select your Web apps -> Firebase SDK snippet -> Config.
Download Json Storage in component
<template> <div> </div></template><script>import * as firebase from 'firebase/app'import axios from 'axios'export default { name: 'home', data() { return { item: {} } } async mounted() { const storage = firebase.storage() const storageRef = storage.ref() // const entityRef = storage.ref('item/apple.json'); const objectRef = storageRef.child('item/apple.json') let url = await objectRef.getDownloadURL() let response = await axios.get(url) this.item = response.data console.log(response.data) }}</script>Sample without async
objectRef.getDownloadURL().then( (url) => { axios.get(url) .then((response) => { this.item = response.data console.log(response.data) })})Setup CORS
To download data directly in the browser, you must configure your Cloud Storage bucket for cross-origin access (CORS).
Create cors.json.
[ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 }]Run gsutil cors set cors.json gs://<your-cloud-storage-bucket> (e.g. `gs://<PROJECT_ID>.appspot.com)
Authentication
Setup Firebase Authentication for Web With FirebaseUI (Google Authentication)
Setup Firebase Email Authentication (Web) with Whitelisted emails using Vue.js and Vue Router
References: