@mightyminds/sdk-vue v0.5.0-alpha.0

Mightyminds SDK Vue bindings

Installation

$ cd <project-directory>>
$ yarn add vue vuex vue-router firebase @mightyminds/{sdk,sdk-vue}

Usage

import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import sdk from '@mightyminds/sdk-vue';

const store = new Vuex();
const router = new VueRouter();

// initialize the sdk
const config = {
  store,
  router,
  firebaseApp: firebase.app() // or firebaseConfig: { ...config }
  // ...other configs
};

Vue.use(sdk, config)

// routes
export const routes = [
  {
    path: '/',
    // no lazy loading (above-the-fold)
    component: require('../statics/Home').default,
    meta: { onLogin: '/dash' } // will be redirected to 'dash' when currentUser != null
  },
  {
    path: '/dash',
    children: require('../dash/routes').routes,
    component: () => import(/* webpackChunkName: 'dash' */ '../dash'),
    meta: { requiresAuth: true, onLogout: '/', signinUsingQueryToken: 'token', force: false } // needs currentUser != null; if currentUser == null, redirect to '/'; if has query token, signInUsingCustomToken using the token in query key 'token'. if force, signInUsingCustomToken even if already signed in
  },
  {
    path: '*',
    redirect: '/'
  }
];

// dash/index.vue
<template lang="pug">
  v-layout(column)
    //- navbar
    v-btn(@click="signout" color="red" dark) signout

    //- content
    v-content
      //- isLoggedIn and currentUserId will also be injected to every component
      h1.display-1 CurrentUser's id: {{ currentUserId }}
      
      //- footer
      v-footer
        span footer here
</template>

<script>
export default {
  mounted () {
    // isLoggedIn and currentUserId will also be injected to every component
    console.log('currentUserId:', this.currentUserId);
  },
  methods: {
    signout () {
      // the core sdk will be injected in this.$mc of all components
      this.$mc.auth().signout();
    }
  }
};
</script>

// statics/Home.vue
<template lang="pug">
  v-layout(row)
    v-btn(:loading="loading" @click="signin" color="primary") signin test
</template>

<script>
export default {
  data: () => ({ loading: false }),
  mounted () {
    this.sub = this.$mc.auth().currentUser$.subscribe(() => {
      this.loading = false;
    });
  },
  beforeDestroy () {
    if (this.sub) this.sub.unsubscribe();
  },
  methods: {
    signin () {
      this.loading = true;
      this.$mc.auth().signin('local', { email: 'test@gmail.com', password: 'password' });
    }
  }
};
</script>