How to use buefy - 10 common examples

install(Vue, options = {}) {
    // Options
    setOptions(Object.assign(config, options))
    // Components
    for (let componentKey in components) {
      Vue.use(components[componentKey])
    }
  },
}

import config, { setOptions } from 'buefy/src/utils/config'
import { use } from 'buefy/src/utils/plugins'

const VueFluent = {
  install(Vue, options = {}) {
    // Options
    setOptions(Object.assign(config, options))
    // Components
    for (let componentKey in components) {
      Vue.use(components[componentKey])
    }
  },
}

use(VueFluent)

export default VueFluent
export * from 'buefy/src/components'

test('Shows loading indicator when there are pending requests', () => {
    const $store = new Vuex.Store({
      state: {
        pendingRequests: {
          foo: { msg: 'bar' }
        }
      }
    })

    const wrapper = shallow(App, {
      mocks: { $store },
      stubs: ['router-view']
    })

    const indicator = wrapper.find(Buefy.Loading)
    const isActive = indicator.hasProp('active', true)
    expect(isActive).toBe(true)
  })

test('Doesn\'t show loading indicator when no pending requests', () => {
    const $store = new Vuex.Store({
      state: {
        pendingRequests: {}
      }
    })

    const wrapper = shallow(App, {
      mocks: { $store },
      stubs: ['router-view']
    })

    const indicator = wrapper.find(Buefy.Loading)
    const isActive = indicator.hasProp('active', false)
    expect(isActive).toBe(true)
  })

export function sendAlertWithVariables(message: string, variables: object, options: object = {}) {
  const defaults: SnackbarConfig = {
    message: VueI18n.t(message, variables) as string,
    type: 'is-danger',
    position: 'is-bottom-right',
    queue: false
  }
  SnackbarProgrammatic.open({...defaults, ...options} as SnackbarConfig)
}

export function sendAlertWithVariables(message: string, variables: object, options: object = {}) {
  const defaults: SnackbarConfig = {
    message: VueI18n.t(message, variables) as string,
    type: 'is-danger',
    position: 'is-bottom-right',
    queue: false
  }
  SnackbarProgrammatic.open({...defaults, ...options} as SnackbarConfig)
}

}, function (error) {
  if (error.response.data.message === 'The CSRF token has expired') {
    Snackbar.open({
      message: error.response.data.message,
      type: 'is-white',
      position: 'is-top',
      actionText: 'Refresh',
      indefinite: true,
      onAction: () => {
        location.reload()
      }}
    )
  } else {
    Toast.open(error.response.data.message)
  }
  return Promise.reject(error);
});

export function snackbar(message, opts) {
  var type = message.toLowerCase().includes('error') ? 'is-danger' : 'is-success';
  Snackbar.open(Object.assign({
    duration: 300000,
    message: message,
    position: 'is-top-right',
    type: type,
  }, opts));
}

export function snackbar(message, opts) {
  var type = message.toLowerCase().includes('error') ? 'is-danger' : 'is-success';
  Snackbar.open(Object.assign({
    duration: 300000,
    message: message,
    position: 'is-top-right',
    type: type,
  }, opts));
}

notifyPasses(aheadMin = 5) {
    if (!this.groundStationAvailable) {
      Toast.open({
        message: "Ground station required to notify for passes",
        type: "is-warning",
        position: "is-bottom",
        duration: 4000,
      });
      return;
    }
    let passes = this.orbit.computePasses(this.groundStationPosition);
    if (!passes) {
      Toast.open({
        message: `No passes for ${this.name}`,
        type: "is-warning",
        position: "is-bottom",
        duration: 4000,
      });
      return;
    }

    passes.forEach((pass) => {
      let start = dayjs(pass.start).startOf("second");
      this.pm.notifyAtDate(start.subtract(aheadMin, "minute"), `${pass.name} pass in ${aheadMin} minutes`);
      this.pm.notifyAtDate(start, `${pass.name} pass starting now`);
      //this.pm.notifyAtDate(dayjs().add(5, "second"), `${pass.name} test pass in ${aheadMin} minutes`);
    });
    Toast.open({
      message: `Notifying for passes of ${this.name}`,