Access Firebase Storage Json File via Web/Vue.js

January 3, 2020

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 firebase
npm install firebaseui
npm install axios

Edit main.js

import * as firebase from 'firebase/app'

// storage
import 'firebase/storage'

// authentication
import '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..."


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



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 =

Sample without async

objectRef.getDownloadURL().then( (url) => {
    .then((response) => {
      this.item =

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


This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.