PxToast

A global notification system for displaying success, error, warning, and info messages. Self-contained (no external toast library) and styled with Tailwind to seamlessly match your app's theme.

Basic Usage

To use toasts, you need to add the <PxToast /> component once in your root layout (e.g., App.vue), and then use the usePxToast composable from anywhere in your application.

Demo

<script setup>
import { PxToast, usePxToast } from 'praxis-vue-ui'

const { showSuccess, showError, showInfo, showWarning } = usePxToast()

const saveChanges = () => {
  try {
    // API Call...
    showSuccess('Saved Successfully', 'All your data is secure.')
  } catch (e) {
    showError('Operation Failed', 'Please try again later.')
  }
}
</script>

<template>
  <div class="flex gap-2">
    <button @click="saveChanges">Save Data</button>
  </div>
  
  <!-- Render this once at the root of your application -->
  <PxToast />
</template>

usePxToast Composable

The usePxToast composable provides a typed API to trigger messages anywhere in your codebase.

const { 
  toasts,       // Ref<PxToastMessage[]> — the active messages, if you need to read/render them yourself
  showSuccess,  // showSuccess(summary: string, detail?: string, life?: number)
  showError,    // showError(summary: string, detail?: string, life?: number)
  showInfo,     // showInfo(summary: string, detail?: string, life?: number)
  showWarning   // showWarning(summary: string, detail?: string, life?: number)
} = usePxToast()