Toast

Demos

Types

Toast component has 4 contextual types, which are success, info, warning and error. Types are specified with the type prop.

Press any key to continue...

Your profile has been updated.

scope is deprecated. Use slot-scope instead.

Uncaught SyntaxError: Unexpected token +

<template>
<article>
  <section>
    <veui-toast
      type="info"
      open
      message="Press any key to continue..."
    />
  </section>
  <section>
    <veui-toast
      type="success"
      open
      message="Your profile has been updated."
    />
  </section>
  <section>
    <veui-toast
      type="warning"
      open
    >
      <code>scope</code> is deprecated. Use <code>slot-scope</code> instead.
    </veui-toast>
  </section>
  <section>
    <veui-toast
      type="error"
      open
      message="Uncaught SyntaxError: Unexpected token +"
    />
  </section>
</article>
</template>

<script>
import { Toast } from 'veui'

export default {
  components: {
    'veui-toast': Toast
  }
}
</script>

Imperative invocation

Use veui/plugins/toast to enable toast plugin and invoke the toast imperatively.

<template>
<article>
  <veui-button
    @click="$toast.info({
      message: 'Press any key to continue...',
      duration: 5000
    })"
  >
    Info
  </veui-button>
  <veui-button @click="$toast.success('Your profile has been updated.')">
    Success
  </veui-button>
  <veui-button @click="$toast.warn('scope is deprecated. Use slot-scope instead.')">
    Warn
  </veui-button>
  <veui-button @click="$toast.error('Uncaught SyntaxError: Unexpected token +')">
    Error
  </veui-button>
</article>
</template>

<script>
import Vue from 'vue'
import { Button } from 'veui'
import toast from 'veui/plugins/toast'

Vue.use(toast)

export default {
  components: {
    'veui-button': Button
  }
}
</script>

API

Props

Name Type Default Description

open

boolean

false

.sync

Whether the toast is displayed.

type

string

'success'

The contextual type of the toast.

Value	Description
`info`	Information toast.
`success`	Succuess toast.
`warning`	Warning toast.
`error`	Error toast.

message string - The toast message.

duration number toast.duration Time (in milliseconds) to wait until the toast is automatically closed.

Slots

Name	Description
`default`	The content of the toast. Displays the `message` prop by default.

Events

Name	Description
`close`	Triggered when the toast is closed.

Global config

Key	Type	Default	Description
`toast.duration`	`number`	`3000`	The duration of the toast in milliseconds.

Icons

Name	Description
`info`	Information toast.
`success`	Success toast.
`warning`	Warning toast.
`error`	Error toast.