Message

The Message directory contains Vue components that are used to display messages to the user.

AppAlert

The AppAlert Vue Component can be used to display different types of messages to the user and can be used as follows:

<AppAlert type="info" class="mb-4">
  This is an info message.
</AppAlert>

<AppAlert type="success" class="mb-4">
  This is a success message.
</AppAlert>

<AppAlert type="warning" class="mb-4">
  This is a warning message.
</AppAlert>

<AppAlert type="error">
  This is an error message.
</AppAlert>

And it will be rendered as:

This is an info message.

This is a success message.

This is a warning message.

This is an error message.

AppAlert Props

Name	Type	Default	Description
type	String	'info'	The type of the alert message. Accepted values are: info, success, warning and error.

AppAlert Slots

Name	Description
default	The content of the alert message.

AppFlashMessage

The AppFlashMessage Vue Component is 100% integrated with the Laravel Backend and the Inertia.js responses. It essentially automatically displays toast flash messages emitted by the backend:

• success messages
• error messages

You can pass a success message from your Laravel Controller to the AppFlashMessage Vue component as follows:

<?php

namespace Modules\Customer\Http\Controllers;
use Modules\Support\Http\Controllers\BackendController;
use Modules\Customer\Http\Requests\CustomerValidate;
use Modules\Customer\Models\Customer;
use Illuminate\Http\RedirectResponse;

class CustomerController extends BackendController
{

    public function store(CustomerValidate $request): RedirectResponse
    {
        Customer::create($request->validated());

        return redirect('customer')
            ->with('success', 'Customer created.');
    }

}

To send an error message, you can use the withErrors method in your Controller action as follows:

<?php

namespace Modules\AdminAuth\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class UserAuth
{
    public function handle(Request $request, Closure $next)
    {
        if (Auth::guard('user')->guest()) {
            return redirect()->route('adminAuth.loginForm')
                ->withErrors(['email' => 'Session expired, please login again.']);
        }

        return $next($request);
    }
}

The AppFlashMessage component is fully integrated with your Modular Application and is globally available in the resources/js/Layouts/AuthenticatedLayout.vue component. Therefore, there is no need to import it in your individual Pages.

TIP

You can check the behavior and appearance of the AppFlashMessage component in the AppToast section below.

AppToast

The AppToast Vue Component can be used to display a toast message to the user. It's used internally by the AppFlashMessage component, but can also be used directly as follows:

<AppToast ref="toastRef">
    <div :class="type" class="alert">
        <div class="flex align-middle">
            <i :class="iconClass" class="mr-2"></i>
            <span>{{ message }}</span>
        </div>
        <AppButton
            class="text-skin-neutral-6 hover:text-skin-neutral-7"
            @click="closeToast"
        >
            <i class="ri-close-circle-line text-lg"></i>
        </AppButton>
    </div>
</AppToast>

<AppButton class="btn btn-primary mr-4" @click="openSuccessToast">
    Open Success Toast
</AppButton>

<AppButton class="btn btn-destructive" @click="openErrorToast">
    Open Error Toast
</AppButton>

<script setup>
import { ref } from 'vue'

const toastRef = ref(null)
const iconClass = ref(null)
const message = ref(null)
const type = ref(null)

const openSuccessToast = () => {
  closeToast()
  type.value = 'success'
  message.value = 'A success message!'
  iconClass.value = 'ri-check-line'
  toastRef.value.open()
}

const openErrorToast = () => {
  closeToast()
  type.value = 'error'
  message.value = 'An error message!'
  iconClass.value = 'ri-alert-line'
  toastRef.value.open()
}

const closeToast = () => {
  toastRef.value.close()
}
</script>

<style scoped>
.alert {
    @apply flex w-80 justify-between rounded-lg px-4 py-3 align-middle shadow;
}

.success {
    @apply bg-skin-success text-skin-success-light;
}

.error {
    @apply bg-skin-error text-skin-error-light;
}
</style>

And it will be rendered as:

If all you need in your page is a simple toast message, you can mix the AppToast component with the AppAlert component as follows:

<AppToast ref="toastRef">
    <AppAlert type="warning" class="mb-4">
        This is a warning message.
    </AppAlert>
</AppToast>

<AppButton class="btn btn-primary" @click="showToast">
    Show Warning Toast
</AppButton>

<script setup>
import { ref } from 'vue'

const toastRef = ref(null)

const showToast = () => {
  toastRef.value.close()
  toastRef.value.open()
}
</script>

The rendered result will be:

AppToast Props

Name	Type	Default	Description
placement	String	'top-end'	The placement of the toast message in the screen. Accepted values are: top-start, top, top-end, middle-start, middle, middle-end, bottom-start, bottom and bottom-end.

AppToast Slots

Name	Description
default	The content of the toast message.

AppTooltip

The AppTooltip Vue Component can be used to display a tooltip message to the user, thereby improving the UX of your application. It can be used as follows:

<AppTooltip text="Edit Customer">
    <AppButton
        class="btn btn-icon btn-primary"
        @click="$inertia.visit(route('customer.edit', 1))"
    >
        <i class="ri-edit-line"></i>
    </AppButton>
</AppTooltip>

Hover over the button to see the tooltip message:

Edit Customer

AppTooltip Props

Name	Type	Default	Description
text	String	''	The text shown to the user when hovering over the button.
position	String	'top'	The position of the tooltip text. Accepted values are: top, bottom, left, right

AppTooltip Slots

Name	Description
default	The trigger element of the tooltip, generally an AppButton component.