MeToast

Toasts de notificação empilhados no canto inferior direito da tela. Disparados via this.$root.$emit('show-toast', payload) ou EventBus.$emit('show-toast', payload).

Playground

Uso Básico

const payload = {
  type: 'success',
  message: 'Exportado com sucesso!',
}
this.$root.$emit('show-toast', payload)

Sub-mensagem

const payload = {
  type: 'success',
  message: 'Arquivo exportado.',
  subMessage: 'Verifique na sua pasta de downloads.',
}
this.$root.$emit('show-toast', payload)

Timeout Customizado

Por padrão o toast dura 10 segundos. Use timeout (em ms) para alterar.

const payload = {
  type: 'success',
  message: 'Exportado com sucesso!',
  iconLeft: '',
  subMessage: 'Verifique na sua pasta de downloads.',
  timeout: 5000,
}
this.$root.$emit('show-toast', payload)

Com Ação

Toasts clicáveis executam um callback e se fecham automaticamente.

const payload = {
  type: 'info',
  message: 'Clique para ver detalhes.',
  action: () => {
    this.$router.push('/detalhes')
  },
}
this.$root.$emit('show-toast', payload)

Ícones Customizados

Use iconLeft para substituir o ícone padrão do tipo, e iconRight para substituir o botão de fechar.

const payload = {
  type: 'info',
  message: 'Novo comentário recebido.',
  iconLeft: 'chat_bubble',
}
this.$root.$emit('show-toast', payload)

Toast Indefinite

Um toast indefinite não remove automaticamente. Use hide-toast para fechá-lo — ideal para estados de carregamento.

// Abre o toast de loading
const payload = {
  type: 'gray',
  message: 'Processando...',
  indefinite: true,
  id: 'meu-loading',
}
this.$root.$emit('show-toast', payload)

// Fecha após a operação concluir
this.$root.$emit('hide-toast', 'meu-loading')

Via EventBus

Use EventBus para disparar toasts fora do contexto Vue (ex: services, Axios interceptors).

import EventBus from '@/utils/EventBus'

EventBus.$emit('show-toast', {
  type: 'error',
  message: 'Sessão expirada.',
  subMessage: 'Faça login novamente.',
})

API

Payload

Campo	Tipo	Padrão	Descrição
message	string	—	Texto principal do toast
type	'success' | 'error' | 'info' | 'gray'	—	Variante visual e ícone padrão
subMessage	string	—	Texto secundário abaixo da mensagem
iconLeft	string	ícone do tipo	Ícone Material Icons à esquerda
iconRight	string	'close'	Ícone Material Icons à direita
action	() => void	—	Callback ao clicar no toast; fecha automaticamente
timeout	number	10000	Duração em ms
indefinite	boolean	false	Não remove automaticamente
id	string	—	Identificador para toasts indefinite (necessário para hide-toast)

Ícones padrão por tipo

Tipo	Ícone
success	check_circle
error	highlight_off
info	info
gray	info

Eventos

Evento	Payload	Descrição
show-toast	ToastPayload	Exibe um toast
hide-toast	string (id)	Remove um toast indefinite pelo id

Componente único

Monte <MeToast /> apenas uma vez na aplicação (ex: App.vue). Múltiplas instâncias recebem os mesmos eventos e exibem toasts duplicados.