===========
index.ts:

import Vue from 'vue'
import Router from 'vue-router'
import mainView from '@/components/mainView.vue'


Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: '/',
      name: 'mainView',
      component: mainView
    },

  ]
})


export default router;


===========================

main.ts:


import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router/index'
import locale from 'element-ui/lib/locale/lang/en'

Vue.config.productionTip = false;
Vue.use(ElementUI, { locale });

/ eslint-disable no-new /
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});


=====

LoginComponent.vue:

<template lang="pug">
.el-form-wrap
  el-form.demo-ruleForm(status-icon='' label-width='120px' )
    el-form-item(label='User')
      el-input(type='text' v-model="loginForm.user")
    el-form-item(label='Password', prop='pass')
      el-input(type='password',  auto-complete='off' v-model="loginForm.pass")
    el-form-item(label='App')
      el-input(type='text'  v-model="loginForm.app")
    el-form-item(label='Vox-user')
      el-input(type='text'  v-model="loginForm.voxUser")
    el-form-item
      .el-form-item__btn-wrap
        el-button(type='primary', @click="auth") OK
</template>

<script lang="ts">
  import Vue from "vue";
  import Component from 'vue-class-component'
  import * as VoxImplant from 'voximplant-websdk';

  interface LoginForm {
    user: string,
    pass: string,
    app: string,
    voxUser: string
  }

  @Component({
    props: {},
    components: {}
  })
  export default class LoginComponent extends Vue {
    vox: VoxImplant.Client = VoxImplant.getInstance();
    loginForm: LoginForm = {
      user: '',
      pass: '',
      app: '',
      voxUser: '',
    };
    mounted(){
      this.vox = VoxImplant.getInstance();
      this.vox.init({micRequired: true, serverIp: "lab-gw.voximplant.com"});
      this.vox.addEventListener(VoxImplant.Events.SDKReady, this.handleSDKReady);
      this.vox.addEventListener(VoxImplant.Events.AuthResult, this.auth2);
    }
    private handleSDKReady():void{
      this.vox.connect();
    }
    private auth2(e:VoxImplant.EventHandlers.AuthResult):void{
      if(e.result) {
        this.$emit('loggined', e.displayName);
      }else {
        e.
      }
    }
    private auth():void {
      const loginStr = "" + this.loginForm.user + "@" + this.loginForm.app + "."+ this.loginForm.voxUser + ".voximplant.com";
      this.vox.login(loginStr, this.loginForm.pass)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-form-wrap {
    max-width: 600px;
    margin: 0 auto;
  }
  .el-form-item__btn-wrap {
    display: flex;
    justify-content: flex-end;
  }
</style>
<template lang="pug">
.el-form-wrap
  el-form.demo-ruleForm(status-icon='' label-width='120px' )
    el-form-item(label='User')
      el-input(type='text' v-model="loginForm.user")
    el-form-item(label='Password', prop='pass')
      el-input(type='password',  auto-complete='off' v-model="loginForm.pass")
    el-form-item(label='App')
      el-input(type='text'  v-model="loginForm.app")
    el-form-item(label='Vox-user')
      el-input(type='text'  v-model="loginForm.voxUser")
    el-form-item
      .el-form-item__btn-wrap
        el-button(type='primary', @click="auth") OK
</template>

<script lang="ts">
  import Vue from "vue";
  import Component from 'vue-class-component'
  import * as VoxImplant from 'voximplant-websdk';

  interface LoginForm {
    user: string,
    pass: string,
    app: string,
    voxUser: string
  }

  @Component({
    props: {},
    components: {}
  })
  export default class LoginComponent extends Vue {
    vox: VoxImplant.Client = VoxImplant.getInstance();
    loginForm: LoginForm = {
      user: '',
      pass: '',
      app: '',
      voxUser: '',
    };
    mounted(){
      this.vox = VoxImplant.getInstance();
      this.vox.init({micRequired: true, serverIp: "lab-gw.voximplant.com"});
      this.vox.addEventListener(VoxImplant.Events.SDKReady, this.handleSDKReady);
      this.vox.addEventListener(VoxImplant.Events.AuthResult, this.auth2);
    }
    private handleSDKReady():void{
      this.vox.connect();
    }
    private auth2(e:VoxImplant.EventHandlers.AuthResult):void{
      if(e.result) {
        this.$emit('loggined', e.displayName);
      }else {
        e.
      }
    }
    private auth():void {
      const loginStr = "" + this.loginForm.user + "@" + this.loginForm.app + "."+ this.loginForm.voxUser + ".voximplant.com";
      this.vox.login(loginStr, this.loginForm.pass)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-form-wrap {
    max-width: 600px;
    margin: 0 auto;
  }
  .el-form-item__btn-wrap {
    display: flex;
    justify-content: flex-end;
  }
</style>

==========================================

ARMComponent.vue:

<template lang="pug">
.username-card
  el-card.box-card
    .clearfix(slot='header')
      el-row
        el-col(:span='12')
          span.grid-content
        el-col(:span='12')
          .grid-content
            el-radio-group(v-model='radio3' size="mini")
              el-radio-button(label='On')
              el-radio-button(label='Off')
              el-radio-button(label='DND')
              el-radio-button(label='InS')
              el-radio-button(label='AfS')
              el-radio-button(label='Rdy')
              el-radio-button(label='TiO')
            p.username-card__text {{userName}}
    el-row
      el-col(:span='12')
        .grid-content.grid-content__left
          .user-card(v-if="phoneActive")
            h3.user-card__title ФИО:
            p.user-card__text Adamson Mayer
            h3.user-card__title Компания:
            p.user-card__text Pepsi
            h3.user-card__title Почта:
            p.user-card__text Pepsi@mail.com
            h3.user-card__title Описание:
            p.user-card__text Pay Every Pence to Save Israel

      el-col(:span='12')
        .grid-content
          .username-card__phone-no(v-if="!phoneActive")
            el-input(placeholder='Please input', v-model='input')
            .call-wrap
              el-button(type='primary' v-on:click="makeCall") Call
          .username-card__phone-yes(v-else)
            el-button(type='primary', v-on:click="hangupCall") Завершить
            el-button(type='primary') Номер
            el-button(type='primary') Перевод

</template>

<script lang="ts">
  import Vue from "vue";
  import Component from 'vue-class-component'

  @Component({
    props: {
      userName: String
    },
    components: {}
  })
  export default class ARMComponent extends Vue {
    radio3:string = 'On';
    input: string = "";
    phoneActive: boolean = false;

    makeCall() {
      var phoneNumber = this.input;
      if(phoneNumber) {
        this.phoneActive = true;
      }
    }
    hangupCall() {
      this.phoneActive = false;
    }
    set getStatus(n){
     // this.radio3 = n;
     // console.log('woo');
    }
    get getStatus(){
      const vocabulary = {
        On: "Online",
        Off: "Offline",
        DND: "DND",
        InS: "InService",
        AfS: "AfterService",
        Rdy: "Ready",
        TiO: "Timeout"
      };
      if(typeof vocabulary[this.radio3] !== 'undefined') return vocabulary[this.radio3];
      return this.radio3;
    }


  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.username-card {
  text-align: left;
}

  .call-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;

  }
  .grid-content__left {
    margin-right: 10px;
  }
 .user-card {
   background: #f3eff0;
   border-radius: 5px;
   max-width: 300px;
   margin: auto;
   padding: 10px;
   border: 5px solid #e9e6e7;
 }
  .user-card__title {
    margin: 2px 0;
    padding: 0;
  }
  .user-card__text {
    margin: 2px 0;
    padding: 0;
  }
  .grid-content {
    min-height: 1px;
  }

</style>


====================
mainView.vue:


<template lang="pug">
.wrap
  LoginComponent(v-if="!isAutorized",@loggined="onLoggined")
  ARMComponent(v-if="isAutorized", :userName = "userName")
</template>

<script lang="ts">
  import Vue from "vue";
  import Component from 'vue-class-component'
  import LoginComponent from '@/components/LoginComponent.vue'
  import ARMComponent from '@/components/ARMComponent.vue'

  @Component({
    props: {

    },
    components: {
      LoginComponent,
      ARMComponent
    }
  })
  export default class mainView extends Vue {
    isAutorized: boolean = false;
    userName: string;
    onLoggined(userName:string):void{
      if(userName){
        this.userName = userName;
        this.isAutorized = true;
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

===