PitchHut logo
Laravel Inertia Toast
Elegant toast notifications for Laravel and Inertia.js applications.
Pitch

Laravel Inertia Toast is an opinionated package designed for creating beautiful toast notifications in Laravel applications using Inertia.js. It offers a fluent PHP API, seamless integration with Vue 3 and React, and supports multi-toast management, all styled with Tailwind CSS. Enhance user experience effortlessly by triggering notifications from both the backend and frontend.

Description

Laravel Inertia Toast

Laravel Inertia Toast is a robust package designed to integrate visually appealing toast notifications into Laravel + Inertia.js applications. It offers a fluent PHP API, supports multiple toasts, ensures redirect safety, and provides dedicated adapters for Vue 3 and React.

Key Features

  • Fluent PHP API: Easily trigger toast notifications using commands like Toast::success('Saved!') or toast('Profile updated!')->success().
  • Frontend Adaptability: Utilize Vue 3 and React adapters with TypeScript support for seamless integration.
  • Customizable Positions: Position toasts conveniently with six available placements: top-right, top-left, top-center, bottom-right, bottom-left, and bottom-center.
  • Tailwind CSS Compatibility: Tailwind CSS styling support, compatible with versions 3 and 4.
  • Client-Side API: Trigger notifications using the useToast() composable/hook on the frontend.
  • Smooth Animations: Enjoy elegant entrance and exit animations for toast notifications.

Usage Examples

Server-Side PHP

use InertiaToast\Facades\Toast;

// Triggering toast notifications in a controller
Toast::success('Profile updated!');
Toast::error('Something went wrong.');
Toast::info('Check your email for a confirmation link.');
Toast::warning('Your subscription is about to expire.');

return redirect()->route('dashboard');

Client-Side with Vue 3

<script setup>
import { useToast } from '@laravel-inertia-toast/vue';

const { success } = useToast();

function handleClick() {
  success('Copied to clipboard!');
}
</script>

Client-Side with React

import { useToast } from '@laravel-inertia-toast/react';

function MyComponent() {
  const { success } = useToast();

  return (
    <button onClick={() => success('Copied to clipboard!')}>Copy</button>
  );
}

Additional Information

For a demo, visit the repository's examples showcasing the PHP backend, React, and Vue frontend implementations. The interactive element demonstrates the toast notifications in action, providing users with a hands-on understanding of its capabilities.

Requirements

  • PHP 8.1+
  • Laravel 10, 11, or 12
  • Inertia.js v2.3.3+
  • Vue 3.3+ or React 18+
  • Tailwind v3 or v4

Integrate Laravel Inertia Toast into your application to enhance user experience with elegant and responsive toast notifications.

0 comments

No comments yet.

Sign in to be the first to comment.