Import teams-js into Vue.js file

Question

I'm currently trying to implement the Microsoft Teams SDK into my Vue.js project. I've already installed the npm package and refer to the package in my vue-file, but for some reason the value of my microsoftTeams alias will display as undefined. Is there a step I've missed or why is it that way?

Snippet of my vue-file:

<template>
  <div>
    <button v-on:click="getAuth()">do</button>
  </div>
</template>

<script>
import * as microsoftTeams from "@microsoft/teams-js";

export default {
  methods: {
    getAuth() {
      console.log(microsoftTeams);
    }
  }
};
</script>

Did you initialized MicrosoftTeams js? you need to first initialize the teams js. — Trinetra-MSFT, Nov 29 '19 at 05:27
I know that you have to initialize the package first, before using it. The problem was that I couldn't access the package at all, because I missed the reference in data() like stated in the solution below. — , Nov 29 '19 at 07:18

score 0 · Accepted Answer · answered Nov 28 '19 at 06:36

0

Setting any variable still has to be declared in the data object unless you attach it to the window object.

<template>
  <div>
    <button v-on:click="getAuth()">do</button>
  </div>
</template>

<script>
import * as microsoftTeams from "@microsoft/teams-js";

export default {
  data() {
    return {
      microsoftTeams,
    };
  },
  methods: {
    getAuth() {
      console.log(this.microsoftTeams);
    }
  }
};
</script>

answered Nov 28 '19 at 06:36

Michael Mano

3,339
2
14
35

Fixed the issue. Thank you so much! :) – Nov 28 '19 at 07:23

Import teams-js into Vue.js file

1 Answers1