Easy alerts with Vue.js for your Laravel App

This package offers a Tailwind CSS & Vue.js optimized notifications setup for your Laravel applications.

Installation

You can install the package via composer:

composer require depsimon/laravel-alerts

Usage within Laravel

Within your controllers, before you perform a redirect, make a call to the alert() function.

public function show()
{
    alert('Resource Found!');

    return back();
}

You may also do:

• alert_info('Info Message'): Alert an 'info' message.
• alert_success('Success Message'): Alert an 'success' message.
• alert_warning('Warning Message'): Alert an 'warning' message.
• alert_error('Error Message'): Alert an 'error' message.
• alert('Alert Message', 'Alert Title'): Alert a message with a title.

Usage within Vue

Within your Vue.js components, you can $emit an alert event.

Events.$emit('alert', {
    title: "Success",
    message: "Your profile has been updated with success.",
    type: "success"
})

Only the message field is required.

Configuration

After you've setup the alerts, you may display them in your views. We provide you with a template out of the box that works with Vue.js & Tailwind CSS.

You're free to use it and customize it the way you want.

@include('alerts::alerts')

You'll also need to publish our Vue.js components. By default it'll import them in the /resources/assets/js/vendor/alerts folder.

php artisan vendor:publish --provider="Depsimon\Alerts\AlertsServiceProvider" --tag="components"

Then import them in your app.

window.Vue = require('vue')
window.Events = new Vue // This will be used to emit/receive alerts

Vue.component('alerts', require('./vendor/alerts/components/Alerts.vue'))

If you don't want to use the default template or the Vue.js component, you can publish the views and customize it the way you want. Just know the session key is alerts.

Here's an example custom template without Vue.js:

@foreach (session('alerts', collect())->toArray() as $alert)
    <div class="alert alert-{{ $alert['type'] }}">
        @if ($alert['title'])
        <div class="alert-title">{{ $alert['title'] }}</div>
        @endif

        <div class="alert-message">{!! $alert['message'] !!}</div>
    </div>
@endforeach

{{ session()->forget('alerts') }}

Multiple Alerts

Need to send multiple alerts? No problem.

alert_success('Account Created with Success!');
alert_info('Welcome aboard!');

return redirect('home');

Icons

Default icons are from FontAwesome. You easily customize them in the Alert.vue component.