DOCSEARCHbyAlgolia
Submit Docs

Laravel Notify

repository·3.x·Indexed 23 days ago

https://github.com/mckenziearts/laravel-notify

A lightweight package for displaying backend-driven, styled notifications such as toasts and alerts in Laravel applications. It utilizes Blade components and Alpine.js, supporting integration with Tailwind CSS 4.x or pre-compiled assets. Features include five notification models (Toast, Connectify, Drakify, Smiley, Emotify), customizable durations, interactive URL and execution actions via NotifyAction, and the ability to define reusable preset notifications in the configuration.

Tokens
1.2K
Snippets
5
Records
8
Agent score
33%

What's inside laravel-notify

  1. Notification Models and Types

    3.x

    Laravel Notify supports 5 distinct notification models that change the visual presentation:

    1. Toast (Default): Standard toast notification.
    2. Connectify: Used for connection-style notifications (supports message()).
    3. Drakify: Displays an alert only (does not support actions).
    4. Smiley: Uses the (😊) emoticon.
    5. Emotify: Uses a vector emoticon.

  3. Integrate without Tailwind CSS

    3.x

    If you are not using Tailwind CSS, use the pre-compiled assets by adding the @notifyCss and @notifyJs directives to your layout file.

    <!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
    @notifyCss
</head>
<body>
    <x-notify::notify />
    @notifyJs
</body>
</html>

  5. Integrate with Tailwind CSS & Alpinejs

    3.x

    If using Tailwind CSS 4.x, follow these steps to ensure styles are generated correctly:

    1. Configure Tailwind: Add the package's Blade files to your @source list in resources/css/app.css.
    2. Import Alpine.js: Ensure Alpine.js is initialized in resources/js/app.js.
    3. Add Component: Place the <x-notify::notify /> component in your main layout file before the closing </body> tag.
    4. Build: Run your build command (npm run build or npm run dev).
    /* resources/css/app.css */
@import "tailwindcss";

@source "../../vendor/mckenziearts/laravel-notify/resources/views/**/*.blade.php";
    /* resources/js/app.js */
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
    <!-- resources/views/layouts/app.blade.php -->
<x-notify::notify />

  6. Send basic notifications

    3.x

    Use the notify() helper in your controllers before a redirect. You can specify the type (e.g., success(), error(), warning()), a title(), and an optional message().

    public function store()
{
    notify()
        ->success()
        ->title('⚡️ Laravel Notify is awesome!')
        ->send();

    return back();
}

  8. Add interactive actions to notifications

    3.x

    You can add buttons to notifications using NotifyAction::make().

    Supported Models: Toast, Connect, Smiley, and Emotify (Note: Drake does not support actions).

    Action Types:

    • URL Actions: Use url($path) to create a GET link. Use openUrlInNewTab() to target _blank.
    • Execution Actions: Use action($route) to trigger a controller method. This defaults to a POST request. Use method($method) to specify PUT or DELETE.

    Constraints:

    • You cannot use both action() and url() on the same action.
    • method() can only be used with action().
    • openUrlInNewTab() can only be used with url().
    use Mckenziearts//

// URL Action
NotifyAction::make()
    ->label('View details')
    ->url(route('users.show', $user->id))
    ->openUrlInNewTab();

// Execution Action (POST)
NotifyAction::make()
    ->label('Restore')
    ->action(route('users.restore', $user->id));

// Execution Action (DELETE)
NotifyAction::make()
    ->label('Delete')
    ->action(route('users.delete', $user->id))
    ->method('DELETE')
    ->classes('text-red-600');