Alerts & Toasts

Flash Messages

There are two types of flash message supported by Nexus:

  • alert messages are displayed in a coloured bar at the top of the page. They stay there until they are dismissed or the user leaves the page (or refreshes it).
  • toast messages are displayed briefly in the corner of the page. They disappear automatically after a few seconds.

You should use alert most of the time, but toast can be useful for less important notifications that you don't want to stay on screen - e.g. in the Nexus Sync package it is used to tell the user a sync job has been queued, but we don't want it to stay on screen because the job status refreshes automatically every 2 seconds.

There are several variants of each. The most commonly used are:

  • success (green)
  • warning (amber)
  • danger (red - for error messages)
  • primary (blue by default, but may be overridden in resources/nexus/css/hooks/_common-start.scss)
  • info (purple)

There are also some less common ones:

  • light (light grey / off-white)
  • secondary (medium grey)
  • dark (dark grey)

To use alerts, follow this format:

return redirect()->route('examples.index')
    ->with('alert-success', "{$example->name} deleted.");

To use toasts, follow this format:

return redirect()->route('examples.index')->with('toast-success', [
    'title' => 'Example deleted.',
    'message' => $example->name,
    // Optional parameters:
    'autoHideDelay' => 5000,
    'toaster' => 'b-toaster-top-right',
]);

Most of the time you only need title and message for toasts - but see the BootstrapVue <b-toast> documentation for a list of supported parameters.

See the Laravel documentation for more information on flash data and the different ways to set it.

Static Alerts

You should not use flash data for static alerts, which are always displayed and not dismissible. Use this format instead:

<LayoutMain title="Example">

    <template #alerts>
        <AlertWithIcon v-if="!example.active" variant="warning">
            This example is disabled.
        </AlertWithIcon>
    </template>

    ...

</LayoutMain>

If you want to hide the static alert(s) when flash messages are displayed, add a v-if like this:

<template #alerts v-if="!$page.props.flash.alerts.length">
    ...
</template>

Component Reference

<LayoutFlashMessages>

Props:

  • alerts (Array) - Deprecated - This is no longer used and will be removed in the future. Instead, the breadcrumbs are read from $page.props.flash automatically.

Slots: None.

Events: None.