Notifications

A toast notification component for Laravel applications. Display success, error, warning, and info messages. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/notifications

Livewire Usage

Basic Setup

<!-- In your layout -->
<livewire:sb-notifications />

Triggering Notifications

// In your Livewire component
$this->dispatch('notify', [
    'message' => 'Item saved successfully!',
    'type' => 'success'
]);

$this->dispatch('notify', [
    'message' => 'Something went wrong',
    'type' => 'error',
    'title' => 'Error'
]);

Position Options

<livewire:sb-notifications position="top-right" />
<livewire:sb-notifications position="top-left" />
<livewire:sb-notifications position="bottom-right" />
<livewire:sb-notifications position="bottom-left" />
<livewire:sb-notifications position="top-center" />
<livewire:sb-notifications position="bottom-center" />

Custom Duration

<livewire:sb-notifications :duration="3000" />

Livewire Props

Vue 3 Usage

Setup

import { SbNotifications } from './vendor/sb-notifications';
app.component('SbNotifications', SbNotifications);

Basic Usage

<template>
  <div>
    <SbNotifications ref="notifications" />

    <button @click="showSuccess">Success</button>
    <button @click="showError">Error</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const notifications = ref(null);

const showSuccess = () => {
  notifications.value.add('Item saved successfully!', 'success');
};

const showError = () => {
  notifications.value.add('Something went wrong', 'error', 'Error');
};
</script>

Notification Types

<script setup>
// Success (green)
notifications.value.add('Saved!', 'success');

// Error (red)
notifications.value.add('Failed!', 'error');

// Warning (yellow)
notifications.value.add('Check this', 'warning');

// Info (blue)
notifications.value.add('FYI', 'info');
</script>

With Title

<script setup>
notifications.value.add(
  'Your changes have been saved.',
  'success',
  'Success!'  // Optional title
);
</script>

Position Options

<template>
  <SbNotifications position="top-right" />
  <SbNotifications position="top-left" />
  <SbNotifications position="bottom-right" />
  <SbNotifications position="bottom-left" />
  <SbNotifications position="top-center" />
  <SbNotifications position="bottom-center" />
</template>

Custom Duration

<template>
  <!-- 3 second auto-dismiss -->
  <SbNotifications :duration="3000" />

  <!-- 10 second auto-dismiss -->
  <SbNotifications :duration="10000" />
</template>

Global Notification Service

// notifications.js - Create a global service
import { ref } from 'vue';

const notificationRef = ref(null);

export const notify = {
  setRef: (ref) => { notificationRef.value = ref; },
  success: (msg, title) => notificationRef.value?.add(msg, 'success', title),
  error: (msg, title) => notificationRef.value?.add(msg, 'error', title),
  warning: (msg, title) => notificationRef.value?.add(msg, 'warning', title),
  info: (msg, title) => notificationRef.value?.add(msg, 'info', title)
};

// App.vue
<template>
  <SbNotifications ref="notificationsRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { notify } from './notifications';

const notificationsRef = ref(null);
onMounted(() => notify.setRef(notificationsRef.value));
</script>

// Any component
import { notify } from './notifications';
notify.success('Item saved!');

Vue Props

Methods

Notification Types

Positions

Features

• Multiple Types: Success, error, warning, info
• Auto-dismiss: Configurable duration
• Manual Close: Click X to dismiss
• Stacking: Multiple notifications stack
• Animations: Smooth slide-in/out
• Positioning: 6 position options

Styling

Uses Tailwind CSS:

• Colored left border
• Type-specific background colors
• Type-specific icons
• Shadow effect
• Rounded corners

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License