Introduction

The toaster package for Laravel provides a quick 'n' easy method for creating toast messages and binding the data to your view as a JS variable. You can then access them in your JS components or use the provided Vue component.

What's new in 3.0.0

Version 3.0.0 brings an overhaul of the package, utilising a better Vue component and adding group support.

Added

Changed

Removed

Installation

Prerequisites

Before beginning the installation process, make sure you have the prerequisites listed below:

Composer

This package is delivered via composer, add the following to your composer.json

{
    "require": {
      "laralabs/toaster": "~3.0.0"
    }
}

Service Provider

This section highly depends on which Laravel version you are running:

>= 5.5 - Skip this step as the service provider will be loaded automatically through package discovery.

<= 5.4 - Add the service provider to your $providers array within the config/app.php file.

'providers' => [
    Laralabs\Toaster\ToasterServiceProvider::class
];

Configuration File

Once the package has been loaded; the configuration file can be published to config/toaster.php

php artisan vendor:publish --provider="Laralabs\Toaster\ToasterServiceProvider" --tag="config"

Now the configuration file located at config/toaster.php can be edited to suit your application.

Usage

Within your controller methods; before returning a view or redirect, make a call to toaster()->add();

public function store()
{
    toaster()->add('Add message here');

    return redirect('home');
}

The add() function can also take a title and array of properties, below is an example of these with their defaults.

toaster()->add($message = null, $title = null, $properties = [
                'group' => 'default',
                'message' => $message,
                'type' => 'info',
                'title' => $title,
                'duration' => 2000,
                'speed' => 300
            ]);

You can group messages using the group() function, adding a message will place it in the last group; unless a group name is specified in the properties array.

toaster()->group('groupOne')
            ->add('Message One')
            ->group('groupTwo')->position('bottom left')
            ->add('Message Two')
            ->add('Message Three', null, ['group' => 'groupOne']);

The group() function can also take an array of properties, this can update a group if a name that already exists is specified.

toaster()->group($name, 'groupOne', $properties = [
                    'name' => $name,
                    'width' => '300px',
                    'classes' => [],
                    'animation_type' => 'css',
                    'animation_name' => null,
                    'velocity_config' => 'velocity',
                    'position' => 'top right',
                    'max' => 10,
                    'reverse' => false
                ]);

Blade Directive

Include the generated JavaScript within your view using the @toaster blade directive, you should add this in your template before the application scripts are loaded, within <head> would be the best location.

<head>
    @toaster
</head>

New in version 3.0.0, include the vue component within your view using the @toastcomponent blade directive, make sure this is placed within the element defined in your Vue instance.

<div id="app">
    @toastcomponent
</div>

Group Helper Functions

Group Helper functions are included to make modifying group properties more friendly, these functions will always update the last group created with the group() function.

width()

The width() function accepts a string as an argument and can be used to set the width property.

toaster()->group('groupOne')->width('500px');

classes()

The classes() function accepts an array as an argument and can be used to apply additional CSS classes to the group.

toaster()->group('groupOne')->classes(['classOne', 'classTwo']);

position()

The position() function accepts a string as an argument and can be used to set the position of the group.

toaster()->group('groupOne')->position('top left');

max()

The max() function accepts an integer as an argument and can be used to set the group message limit.

toaster()->group('groupOne')->max(20);

reverse()

The reverse() function accepts a boolean as an argument and can be used to reverse the order messages are displayed in.

toaster()->group('groupOne')->reverse(true);

Message Helper Functions

Message Helper functions are included to make modifying message properties more friendly, these functions will always update the last message created with the add() function.

success()

The success() function can be used to set the message type to 'success'.

toaster()->add('Add message here')->success();

error()

The error() function can be used to set the message type to 'error'.

toaster()->add('Add message here')->error();

warning()

The warning() function can be used to set the message type to 'warn'.

toaster()->add('Add message here')->warning();

important()

The important() function can be used to make close button active.

toaster()->add('Add message here')->important();

title()

The title() function can be used to set the message title.

toaster()->add('Add message here')->title('Message title here');

duration()

The duration() function can be used to set the message duration, this will override the stagger option.

toaster()->add('Add message here')->duration(5000);

speed()

The speed() function can be used to set the message animation speed.

toaster()->add('Add message here')->speed(500);

Frontend Vue Component

A Vue component is required to display the message data on the frontend, this can be obtained via npm or alternatively you can create your own.

Installing Component

Install the laralabs-vue-toaster package through npm.

npm install --save laralabs-vue-toaster

Include in application

Now that the package is installed we can include it into the application, add the following import lines and component definitions to your resources/assets/js/app.js file. Make sure that you add this before your Vue instance definition.

import Notifications from 'vue-notification';
import velocity from 'velocity-animate';
                    
Vue.use(Notifications, { velocity });
Vue.component('toaster-group', require('laralabs-vue-toaster/src/ToasterGroupComponent.vue'));
Vue.component('toaster-logic', require('laralabs-vue-toaster/src/ToasterLogicComponent.vue'));

let app = new Vue({
  el: '#app',
});
The velocity plugin is optional and is only required when using the velocity animation type.

Add Component To View

The component needs to be added to a view for the toasts to display, place the blade directive below into a view that is included on every page.

@toastcomponent

The toaster package will add the <toaster-group></toaster-group> component definition for each group you add.

Edit Controller

That's the frontend side of things setup, now create some messages using the toaster() function in your controller function before you return a view or perform a redirect.

public function welcome()
{
    toaster()->add('Welcome to the Toaster example!')->success()->important();

    return view('welcome');
}

Final Checks

Browse to the page that you have added your messages to, if they display then great! everything has been done correctly.

If they don't display there are a couple of things to check:

Still having problems? Open an issue on GitHub with some code examples and we'll help you out.