集成Firebase

Now use firebase authentication and firestore with Vuexy Admin.

Setup Firebase

To use firebase Authentication or firestore, You first need to create project

apiKey: "API_KEY",
authDomain: "AUTH_DOMAIN",
databaseURL: "DATABASE_URL",
projectId: "PROJECT_ID",
storageBucket: "STORAGE_BUCKET",
messagingSenderId: "MESSAGING_SENDER_ID"

Copy that and create new file in src/firebase named firebaseConfig.js. In this file import firebase and intialize.

 import firebase from 'firebase/app'

// Initialize Firebase
var config = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "PROJECT_ID",
    storageBucket: "STORAGE_BUCKET",
    messagingSenderId: "SENDER_ID"
};

firebase.initializeApp(config);

Congrats! Your firebase configuration is ready. Now let’s import it in our main.js file.

// Firebase
import '@/firebase/firebaseConfig'

Firebase Authentication

Vuexy Admin provide firebase authentication with 4 popular social logins.

• Facebook
• Twitter
• Google
• Github

First of all let’s start with firebase authentication. For this I will use Login.vue file as reference.
On click of Login button we will call an method. This method name can be anything you like. For this example we will name it login.
In login methods we will dispatch action in vuex store which which trigger signin function of firebase to log in user.
This same process can be followed with social logins. You just have to change the function in vuex action.

Full more detailed check out this awesome guide: Visit

Firestore Interaction

Vuexy Admin uses API to interact with firestore. You can use their API to read and write data to your database. You can see demo of firestore read operation in data-list demo .

WARNING From v4.x FireStore API call is removed. DataList uses fake-db to display data. However, you can check older version of file to see how it was implemented.

For making an API call we will use axios - promise based HTTP client. We will fetch data from our database and we will store it in data of our component.

import axios from 'axios'
...
axios.get('API_URL')
  .then(function (response) {
    DATA_VAR = API_RESPONSE
  })
  .catch(function (error) {
    // Error Occurred
  });

Now we can use property defined in data in our template to display data.

<template>
  ...
  {{ DATA_VAR }}
  ...
</template>