CODEWITHSUNDEEP
facebookvue.js
Arnab Rahman
Arnab Rahman

Reputation: 1013

Facebook Accountkit integration with Vue.js 2.0

When i load the project everything works fine. But when i do a browser refresh in App.vue it gives this error:

Uncaught TypeError: AccountKit.init is not a function(…)

Any idea why?

My index.html file:

     <!DOCTYPE html>

    <html>
    <head>
      <!-- meta tags -->
      <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
      <meta name="description" content=""/>
      <meta name="generator" content="2014.1.1.276"/>
      <meta http-equiv="X-UA-Compatible" content="chrome=IE8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1"><!-- meta tags end-->

      <!-- facebook opengraph meta -->
      <meta property="og:title" content=""/>
      <meta property="og:site_name" content=""/>
      <meta property="og:url" content="http://"/>
      <meta property="og:description" content=" "/>
      <meta property="og:image" content="image address"/> <!-- facebook opengraph meta ends-->

      <title>Sheba.xyz</title>

      <!-- Stylesheets -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

      <!-- Fonts -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
            rel="stylesheet">

      <!-- Scripts -->
    </head>
    <body>
    <div id="app">

      <app></app>

    </div>
    <!-- JavaScripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://sdk.accountkit.com/en_US/sdk.js"></script>
    </body>
    </html>

And App.vue is 

<script>
  /* eslint-disable */
  import $ from 'jquery'
  import {appId, appState, appVersion} from './env'
  import navigation from './components/header'
  import mainFooter from './components/footer'

  export default{
    name: 'app',
    components: {
      navigation, mainFooter
    },
    created: function () {
      AccountKit.init({
        appId: appId,
        state: appState,
        version: appVersion
      })
    }
  }
  /* eslint-enable */
</script>

<template>
  <div id="">

    <navigation></navigation>

    <router-view></router-view>

    <main-footer></main-footer>

  </div>
</template>
<style>
  @import './assets/css/bootstrap.min.css';
  @import "./assets/css/style.css";
</style>

Upvotes: 0

Views: 700

Answers (1)

JJPandari
JJPandari

Reputation: 3522

To make Acc available in another file, we must include it in what's exported. But we can't just put import ... inside export default {...}: export default {...} is a shorthand for var exported = {...}; + export default exported;, which means what's inside {} obeys js's object literal syntax: {key1: val1, key2: val2 ...} (or we can use the shorthand {foo} for {foo: foo} in ES6). So to export Acc, we can write: 

var Acc = function() {...};
export default {
    // ...
    Acc: Acc
    // ...
};

But wait, there's another problem: in another file (like index.js), we don't directly use what we exported in this .vue file, instead, we use a "component", which is generated after vue compile App.vue for us. Which means, Acc may not be in the component object we use in another file. So we need to follow vue's convention here: if we want Acc to be a function of component App, we put it in the methods property of our source object. Like this: 

export default{

    name: 'app',

    components: {
        navigation
    },

    methods: {
        Acc: function() {
            // ...
        }
    }
}

And use App.Acc() in another file.

Upvotes: 1

Related Questions