MemberStack.io

Guidelines for integration with frontend frameworks

I’ve just started my attempts to integrate Memberstack with project based on Vue framework and I’m moving with a lot of friction. In official docs I didn’t find any resources for React or Vue.

Are there any guidelines on how to best integrate Memberstack with project based on modern frontend framework?

Are there plans to officially support those frameworks in near future?

Hey Jakub, this is follow up from your email.

Here is the code I talked about.

new Vue({
  data: {
    hello: "World"
  },
  mounted: function () {
    const ms_script = document.createElement("script")
    ms_script.src = "https://api.memberstack.io/static/memberstack.js?custom"
    ms_script.setAttribute("data-memberstack-id","Your MS ID")
    ms_script.onload = function() {
        console.log("Memberstack Loaded")
    }
    document.head.append(ms_script)
  }
})

Providing more context for what Tyler wrote:

Memberstack library searches for all tags like <form ms-signup="true">just after initial page load has completed. The problem is that Vue (or any other framework) didn’t start running yet at that time, so if you build your signup form as a Vue component, Memberstack will search for it, before it was created, hence won’t find it.

Solution provided is a hack, but does the job well enough, and for simple Vue use cases (without a router) will suffice. But if you like me are building more sophisticated SPA, with router, login popups and stuff, here is how you can make it work:

In your main App.vue file put new Memberstack component, the point is it should be always loaded with the app start.

<template>
  <div>
    <Memberstack />
    <router-view />
  </div>
</template>

And this Memberstack.vue file might look like this:

<template>
  <div>
    <div v-show="showingModal === 'signup'">
      sign up form
      <form ms-signup="true">
        <input ms-field="email" />
        <input ms-field="password" />
        <input type="submit" value="Sign up" />
      </form>
    </div>
    <div v-show="showingModal === 'login'">
      login form
      <form ms-login="true">
        <input ms-field="email" />
        <input ms-field="password" />
        <input type="submit" value="login" />
      </form>
    </div>
    <div v-show="false">
      <button ref="profileButton" type="button" ms-profile="true">
        profile
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showingModal: undefined
    };
  },
  mounted() {
    const msScript = document.createElement("script");
    msScript.src = "https://api.memberstack.io/static/memberstack.js?custom";
    msScript.setAttribute("data-memberstack-id", "YOUR_ID");
    msScript.onload = () => {
      MemberStack.onReady.then(member => {
        // store member data wherever you find appropreate
        this.$root.member = member;
      });
    };
    document.head.append(msScript);

    this.$root.$on("openSignupModal", () => {
      this.showingModal = "signup";
    });
    this.$root.$on("openLoginModal", () => {
      this.showingModal = "login";
    });
    this.$root.$on("openMemberProfile", () => {
      this.$refs.profileButton.click();
    });
  }
};
</script>

All popups and buttons are hidden by default. Then you can trigger or show any part of Memberstack UI by emitting an event on root element:

<template>
  <div>
    <button @click="openProfile">profile</button>
  </div>
</template>

<script>
export default {
  methods: {
    openProfile() {
      this.$root.$emit("openMemberProfile");
    }
  }
};
</script>

That way you can reference from any place in your app Memberstack features, without the need to reload the page.