How to use the vue/dist/vue.js.component function in vue

if (isNaN(value)) {
    return 'N/A'
  }

  if (!isFinite(value)) {
    return 'Live stream'
  }

  var d = Number(value)
  var h = Math.floor(d / 3600)
  var m = Math.floor(d % 3600 / 60)
  var s = Math.floor(d % 3600 % 60)
  return ((h > 0 ? h + ':' + (m < 10 ? '0' : '') : '') + m + ':' + (s < 10 ? '0' : '') + s)
})

var Player = Vue.component('player', {
  props: ['source'],
  template: '<audio autoplay="" controls="" id="player"></audio>'
})

// FIXME: Add loading animation: http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
var Controls = Vue.component('controls', {
  props: ['playing'],
  computed: {
    stream: function () {
      var stream = this.source ? this.source.stream : ''
      console.log('Stream is: ', stream)
      return stream
    },

    label: function () {
      return this.playing ? 'Pause' : 'Play'

import Vue from 'vue/dist/vue.js';

// Global components
import ItemCardsContainer from './components/ItemCardsContainer.vue';
import SectionHeader from './components/SectionHeader.vue';
import SearchInput from './components/SearchInput.vue';
import DetailView from './components/DetailView.vue';
import DetailHeaderItem from './components/DetailHeaderItem.vue';
import EmptyState from './components/EmptyState.vue';
import Image from './components/Image.vue';

Vue.prototype.__ = window.__;
Vue.prototype.frappe = window.frappe;

Vue.component('item-cards-container', ItemCardsContainer);
Vue.component('section-header', SectionHeader);
Vue.component('search-input', SearchInput);
Vue.component('detail-view', DetailView);
Vue.component('detail-header-item', DetailHeaderItem);
Vue.component('empty-state', EmptyState);
Vue.component('base-image', Image);

Vue.directive('route', {
	bind(el, binding) {
		const route = binding.value;
		if (!route) return;
		el.classList.add('cursor-pointer');
		el.dataset.route = route;
		el.addEventListener('click', () => frappe.set_route(route));
	},
	unbind(el) {

import Vue from 'vue/dist/vue.js'
import VkButton from '../../src/lib/Button'
Vue.component('VkButton', VkButton)

describe('VkButton', () => {
  describe('VkButton type', () => {
    it('should be correct button type', done => {
      const $vm = new Vue({
        data: {
          type: 'button'
        },
        template: 'Button'
      }).$mount()
      expect($vm.$el.getAttribute('type')).toBe('button')
      $vm.type = 'reset'
      waitForUpdate(() => {
        expect($vm.$el.getAttribute('type')).toBe('reset')
        $vm.type = 'submit'
      }).then(() => {

import Vue from 'vue/dist/vue.js'
import VkPicker from '../../src/lib/Picker'
import VkTable from '../../src/lib/Table'
import VkDropdown from '../../src/lib/Dropdown'

Vue.component('VkPicker', VkPicker)
Vue.component('VkTable', VkTable)
Vue.component('VkDropdown', VkDropdown)

describe('Picker', () => {
  let $vm, spy

  beforeEach(() => {
    spy = jasmine.createSpy()
    $vm = new Vue({
      data: {
        message: ''
      },
      methods: {
        spy
      },
      template: `

import Vue from 'vue/dist/vue.js'
import VkButton from '../../src/lib/Button'
import VkButtonCheckbox from '../../src/lib/ButtonCheckbox'

Vue.component('VkButton', VkButton)
Vue.component('VkButtonCheckbox', VkButtonCheckbox)

describe('VkButtonCheckbox', () => {
  let $vm

  beforeEach(() => {
    $vm = new Vue({
      data: {
        values: [],
        group: false
      },
      template: `
        Button 1
        Button 2
        Button 3
      `
    }).$mount()

import Vue from 'vue/dist/vue.js'
import VkSubnav from '../../src/lib/Subnav'
import VkSubnavItem from '../../src/lib/SubnavItem'

Vue.component('VkSubnav', VkSubnav)
Vue.component('VkSubnavItem', VkSubnavItem)

describe('VkSubnav', () => {
  let $vm

  beforeEach(() => {
    $vm = new Vue({
      data: {
        pill: false,
        line: false,
        index: 0
      },
      template: `

Vue.component('columns', require('./containers/columns.vue'))
Vue.component('drawer', require('./containers/drawer.vue'))

Vue.component('column', require('./components/column/base.vue'))
Vue.component('column-header', require('./components/column/header.vue'))
Vue.component('column-content', require('./components/column/content.vue'))

Vue.component('tweet', require('./components/tweet/base.vue'))
Vue.component('tweet-header', require('./components/tweet/header.vue'))
Vue.component('tweet-footer', require('./components/tweet/footer.vue'))

Vue.component('tweet-media', require('./components/tweet/media/base.vue'))
Vue.component('tweet-media-item', require('./components/tweet/media/item.vue'))

Vue.component('tweet-actions', require('./components/tweet/actions/base.vue'))
Vue.component('tweet-action-reply', require('./components/tweet/actions/reply.vue'))
Vue.component('tweet-action-like', require('./components/tweet/actions/like.vue'))
Vue.component('tweet-action-retweet', require('./components/tweet/actions/retweet.vue'))
Vue.component('tweet-action-more', require('./components/tweet/actions/more.vue'))

Vue.component('composer', require('./components/composer/base.vue'))

Vue.component('window-dragarea', require('./components/window/dragarea.vue'))
Vue.component('window-controls', require('./components/window/controls.vue'))
Vue.component('window-control-close', require('./components/window/controls/close.vue'))
Vue.component('window-control-maximize', require('./components/window/controls/maximize.vue'))
Vue.component('window-control-minimize', require('./components/window/controls/minimize.vue'))

Vue.component('sidebar-button', require('./components/sidebar/button.vue'))
Vue.component('sidebar-profile', require('./components/sidebar/profile.vue'))

var app = new Vue({

CONTACT: 4,
  LOCATION: 5
};

var thumbnailMixin = {
  methods: {
    containsImage: function(message) {
      return message.rawData != null && message.rawData.length > 0;
    },
    toBase64: function(image) {
      return 'data:image/jpeg;base64,' + base64.fromByteArray(image);
    }
  }
};

Vue.component('message', {
  props: ['value'],
  template: `<li class="whatsapp-message">
               <div class="message-content">
                 
                 
                 
                 
                 
                 
               </div>
               <div class="message-footer">
                 <div class="remote-resource">{{value.remoteResource}}</div>
                 <div class="timestamp">{{value.timestamp.format('YYYY-MM-DD HH:mm:ss')}}</div>
               </div>
             </li>`,
  data: function() {

import Vue from 'vue/dist/vue.js'
import store from './store'

Vue.component('window', require('./containers/window.vue'))
Vue.component('app', require('./containers/app.vue'))
Vue.component('sidebar', require('./containers/sidebar.vue'))
Vue.component('app-content', require('./containers/content.vue'))
Vue.component('columns', require('./containers/columns.vue'))
Vue.component('drawer', require('./containers/drawer.vue'))

Vue.component('column', require('./components/column/base.vue'))
Vue.component('column-header', require('./components/column/header.vue'))
Vue.component('column-content', require('./components/column/content.vue'))

Vue.component('tweet', require('./components/tweet/base.vue'))
Vue.component('tweet-header', require('./components/tweet/header.vue'))
Vue.component('tweet-footer', require('./components/tweet/footer.vue'))

Vue.component('tweet-media', require('./components/tweet/media/base.vue'))
Vue.component('tweet-media-item', require('./components/tweet/media/item.vue'))

Vue.component('tweet-actions', require('./components/tweet/actions/base.vue'))
Vue.component('tweet-action-reply', require('./components/tweet/actions/reply.vue'))
Vue.component('tweet-action-like', require('./components/tweet/actions/like.vue'))
Vue.component('tweet-action-retweet', require('./components/tweet/actions/retweet.vue'))

components.forEach(componentName=>{
	Vue.component(componentName,require('../lib/ui/components/'+componentName+'.js'));
});