@dmattia/vue-firebase

Vue-Firebase

Declarative Vue.js components for working with Firebase Realtime Database data.

This is an experimental project, and is not production-ready at this time.

Sample Usage

<template>
  <div id="app">
    <input v-model="path" type="text" />

    <FireProvider :config="firebaseConfig">
      <FireQuery :path="path" :shouldListen="false">
        <template v-slot:error="{ errorMsg }">
          Error: {{ errorMsg }}
        </template>

        <template v-slot:loading>
          Loading...
        </template>

        <template v-slot:success="{ data }">
          {{ data }}
        </template>

        <template v-slot:no-data>
          No data found at path: {{ path }}
        </template>
      </FireQuery>
    </FireProvider>
  </div>
</template>

<script>
import FireProvider from "./components/FireProvider.vue";
import FireQuery from "./components/FireQuery.vue";

var firebaseConfig = {
  databaseURL: "https://vue-firebase-8bf0c.firebaseio.com"
};

export default {
  name: "app",
  components: { FireProvider, FireQuery },
  data() {
    return {
      firebaseConfig,
      path: "test"
    };
  }
};
</script>

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Inspired by

https://akryum.github.io/vue-apollo/guide/components/query.html https://github.com/vuejs/vuefire https://github.com/FirebaseExtended/polymerfire