Messenger Extensions in Vue.js and using its data as a global variable

Question

I'm trying to use Messenger's Extension SDK with Vue.js. I'm relatively new to Vue.js and haven't used any js framework before stumbling upon Vue.

I've thought about (and tried) adding the SDK code (see link above, step 2) to my App.vue site that holds my router-view. I've also tried including the script to my index.html which holds the div that I add Vue to.

The goal is to be able to include the SDK to all of my pages, eventually have a callback that's triggered when the SDK is done loading (see link above, step 3), and finally be able to use the SDKs function on all of my views (for example and most important, MessengerExtensions.getContext(app_id, success, error)).

How can I make this work? Thanks,

Answer 1

So based on https://developers.facebook.com/docs/messenger-platform/webview/extensions and https://router.vuejs.org/en/essentials/getting-started.html you could likely do something like:

const app = new Vue({
  router,
  created() {
    return (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'Messenger'));
  }
}).$mount('#app')

Then in your App.vue:

export default {
  mounted() {
    window.extAsyncInit = function() {
      // the Messenger Extensions JS SDK is done loading 
    };
  }
}