CODEWITHSUNDEEP
vue.jswebpackvuejs2facebook-javascript-sdk
Geon George
Geon George

Reputation: 821

Use Facebook Instant Games CDN in Vue project - Webpack

I want to make a Facebook Instant game with Vue. But facebook just has a cdn for the js file.

<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>

If I import the cdn in index file I still cannot use it in the components. Vue shows undefined error.

I tried to import it in index.js just after body tag and initialize it to a window variable. But that does not seem to work too.

<script>
  window.onload = function() {
    window._FBInstant = FBInstant;
    FBInstant.initializeAsync()
    .then(function() {        
      // Start loading game assets here
      FBInstant.startGameAsync().then(function() {
        startGame();          
      });
    });
  }
  </script>

Upvotes: 0

Views: 770

Answers (2)

Sparsh
Sparsh

Reputation: 1498

Insert the Facebook Instant Game CDN script tag just after <body> tag.

Don't use cdn or direct <script> include for importing vuejs in your project.

Download the vuejs production version and save it in the project folder and compress (bundle) it along with other game files in the zip during the uploading in web hosting.

after fb cdn, include the <script src="js/vue.js"></script> from the files.

This way you can use facebook sdk as well as vuejs in the instant games.

Upvotes: 0

Med Djelaili
Med Djelaili

Reputation: 74

you can store the FB instance on a data property in the created or any other hook

data: () => ({ FBInstance: null}),
created() {
  this.FBInstance = window._FBInstant
}

and if you want to use it globally, you can do the same trick inside a mixin

Vue.mixin({
  data: () => ({ FBInstance: null}),
  created() {
      this.FBInstance = window._FBInstant
  }
})

Upvotes: 1

Related Questions