Vue-error-display NPM

vue-error-display

Usage

Import the plugin

import VueErrorDisplay from 'vue-error-display'
Vue.use(VueErrorDisplay)

Place an error-display component in your template. Use CSS to position the error messages according to your needs. You can use the $error on any Vue instance to submit an error.

<template>
  <div id="app">
    <error-display style="top: 100px;left: 50px; right: 50px;"/>
    <button @click="$error({title: 'Oh no', message: 'This is an error'})">OK</button>
  </div>
</template>

Alternatively you can show an error from JavaScript by importing and using the error function exposed by the package.

import { error } from 'vue-error-display';

error({id: 'warning_foo', type: 'warning', message: 'This is a warning', clickAway: true});

export interface ErrorInfo {
  id?: any, // Multiple error messages with the same id will not be shown at the same time
  title?: string, // Optional Title
  message: string, // Error message
  type?: ErrorType, // 'error' or 'warning'
  clickAway?: Boolean, // Show error until user clicks it away
  duration?: number // Duration in ms to show the message, defaults to 6000 ms
}

export enum ErrorType {
  ERROR = 'error',
  WARNING = 'warning'
}