Access Firebase Storage Json File via Web/Vue.js

Setup Firebase (Web)

Create a Firebase project:

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: You can do so via Firebase Hosting, CDN, or module bundlers/Node.js.

Firebase with Vue.js


npm install firebasenpm install firebaseuinpm install axios

Edit 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: "",  databaseURL: "",  projectId: "...",  storageBucket: "",  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 =    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 =    console.log(  }}</script>

Sample without async

objectRef.getDownloadURL().then( (url) => {  axios.get(url)    .then((response) => {      this.item =      console.log(    })})

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>


Setup Firebase Authentication for Web With FirebaseUI (Google Authentication)

Setup Firebase Email Authentication (Web) with Whitelisted emails using Vue.js and Vue Router


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.