0Pricing
Vue Academy · Aula

Exemplo de plugin de notificações e toasts

Criação de um plugin de toasts: fila reativa, lógica de instalação e API programática por provide/inject.

Exemplo de plugin de notificações e toasts é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Objetivo: um plug-in de notificações

Vamos criar um plug-in de notificações temporárias. Ele mantém uma fila reativa de mensagens, expõe uma API notify e renderiza as notificações globalmente. Qualquer componente pode acionar uma notificação por meio de inject ou de uma composição reutilizável.

A fila reativa

O estado principal é um ref reativo que contém um vetor de objetos de notificação. Quando adicionamos ou removemos itens, todos os componentes que renderizam a fila são atualizados automaticamente.

import { ref } from 'vue'

const toasts = ref([])
// each toast: { id, message, type }

Identificadores exclusivos com um contador

Cada notificação precisa de um id exclusivo para definir sua chave e removê-la. Use um contador incremental, não Date.now() — duas notificações acionadas no mesmo milissegundo poderiam colidir por terem a mesma marca de tempo.

let counter = 0

function nextId() {
  // guaranteed unique even for rapid-fire toasts
  return ++counter
}

A função notify

notify é a API pública. Ela adiciona uma nova notificação com um id novo e agenda sua remoção após um determinado período.

function notify(message, type = 'info', duration = 3000) {
  const id = nextId()
  toasts.value.push({ id, message, type })
  setTimeout(() => dismiss(id), duration)
  return id
}

Dispensando uma notificação

dismiss remove uma notificação pelo id, filtrando-a do vetor reativo. Atribuir novamente toasts.value mantém a reatividade intacta.

function dismiss(id) {
  toasts.value = toasts.value.filter(t => t.id !== id)
}

Agrupando em um serviço

Agrupe o estado e as funções em um único objeto de serviço. Esse objeto é o que o plug-in fornece à aplicação.

const toastService = {
  toasts,      // reactive ref (read in the UI)
  notify,      // create a toast
  dismiss      // remove a toast
}

O método de instalação do plug-in

O install do plug-in fornece o serviço por meio de app.provide para que qualquer componente possa injetá-lo. Exportamos uma chave Symbol por segurança.

export const toastKey = Symbol('toast')

export default {
  install(app) {
    app.provide(toastKey, toastService)
    app.config.globalProperties.$toast = toastService
  }
}

Registrando o contêiner de notificações

O plug-in também pode registrar um componente global ToastContainer que renderiza a fila, para que o consumidor só precise adicioná-lo uma vez próximo à raiz da aplicação.

import ToastContainer from './ToastContainer.vue'

install(app) {
  app.provide(toastKey, toastService)
  app.component('ToastContainer', ToastContainer)
}

O modelo do contêiner

O contêiner lê a fila injetada e renderiza cada notificação, com um manipulador de clique para dispensá-la, associado ao identificador exclusivo.

<script setup>
import { inject } from 'vue'
import { toastKey } from './toast'
const { toasts, dismiss } = inject(toastKey)
</script>

<template>
  <div class="toasts">
    <div v-for="t in toasts" :key="t.id" :class="t.type"
         @click="dismiss(t.id)">
      {{ t.message }}
    </div>
  </div>
</template>

Uma composição reutilizável conveniente

Encapsule a injeção em uma composição reutilizável useToast para que os componentes obtenham uma API simples e um erro informativo caso o plug-in não tenha sido instalado.

import { inject } from 'vue'
import { toastKey } from './toast'

export function useToast() {
  const service = inject(toastKey)
  if (!service) throw new Error('Toast plugin not installed')
  return service
}

Usando-o em um componente

Por fim, qualquer componente aciona notificações por meio da composição reutilizável. Registre app.use(toastPlugin) e coloque <ToastContainer /> uma vez próximo à raiz.

<script setup>
import { useToast } from './toast'
const { notify } = useToast()

function save() {
  notify('Saved successfully', 'success')
}
</script>

Verificação rápida

Teste sua compreensão do design do plug-in de notificações.

Recapitulação

Você criou um plug-in de notificações:

  • Um vetor reativo de ref contém a fila de notificações
  • Um contador incremental fornece identificadores exclusivos sem colisões
  • notify é a API pública; dismiss remove por id
  • install fornece o serviço por meio de app.provide
  • Uma composição reutilizável useToast encapsula inject para um uso mais simples

Perguntas Frequentes

A aula “Exemplo de plugin de notificações e toasts” é grátis?

Sim — o texto completo de “Exemplo de plugin de notificações e toasts” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Exemplo de plugin de notificações e toasts”?

Criação de um plugin de toasts: fila reativa, lógica de instalação e API programática por provide/inject. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Exemplo de plugin de notificações e toasts”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Arquitetura de plugins e app.use()
  2. Propriedades globais e provide/inject em plugins
  3. Exemplo de plugin de notificações e toasts
  4. Publicação e tipagem de plugins Vue
← Voltar para Vue Academy