title: How to wait for Facebook SDK load in Vue.js Single-File Component
body: <p>This is my first time to play with <a href="https://vuejs.org/" rel="nofollow noreferrer">Vue.js</a> but I need to use <a href="https://developers.facebook.com/docs/javascript/" rel="nofollow noreferrer">Facebook SDK</a> for <a href="https://developers.facebook.com/docs/facebook-login/web/" rel="nofollow noreferrer">login</a>.</p>
  <p>Many documents <a href="https://github.com/phanan/vue-facebook-signin-button#usage" rel="nofollow noreferrer">emphasize</a> that the Facebook SDK must first be loaded asynchronously.</p>
  <p>I know there are a couple of Q&amp;As on this topic at StackOverflow, but my case differs.</p>
  <ol>
  <li><p><a href="https://stackoverflow.com/a/39546590/1479078">Using the <code>created</code> method while creating a new Vue instance</a><br />
  I cannot use this option because I'm using <a href="https://router.vuejs.org/" rel="nofollow noreferrer">vue-router</a> and only <a href="https://v2.vuejs.org/v2/guide/single-file-components.html" rel="nofollow noreferrer">one component</a> will use Facebook SDK for login.</p>
  </li>
  <li><p><a href="https://stackoverflow.com/q/43665115/1479078">Using <code>nuxt.js</code></a><br />
  I don't know much about Vue.js yet. Trying <a href="https://nuxtjs.org/" rel="nofollow noreferrer">nuxt.js</a> seems like opening up a whole new can of worms.</p>
  </li>
  </ol>
  <p>Is there any example of loading Facebook SDK asynchronously in a Vue.js single-file component?</p>