Filament•15mo ago

Not able to use Filament notifications on front site

I am using filament on the admin panel, plus I have added the filament on the front site too to use the notifications package. For some reason, it does not show the notification. However, I can see the notification is available in session. I think I need to add a component. I could not find it in the guide. Here is the layout file.

3 Replies

Mansoor KhanOP•15mo ago

Layout:

<!DOCTYPE html>
<html
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
    style="scrollbar-gutter: stable;"
>
<!-- TODO: Remove gutter style when supported in tailwind -->

<head>
    <meta charset="utf-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >
    <link
        rel="canonical"
        href="{{ url()->current() }}"
    >
    <meta
        name="csrf-token"
        content="{{ csrf_token() }}"
    >

    <title>{{ !empty($title) ? $title : config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link
        rel="preconnect"
        href="https://fonts.bunny.net"
    >
    <link
        href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap"
        rel="stylesheet"
    />

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')

    @stack('head.end')

    {{-- @livewireStyles --}}
</head>

<body class="font-sans antialiased">

    <x-banner />

    @isset($banner)
        {{ $banner }}
    @endisset

    <div class="min-h-fit bg-white">
        @livewire('navigation-menu')

        <!-- Page Heading -->
        @if (isset($header))
            <header class="bg-white shadow">
                <x-container class="py-6">
                    {{ $header }}
                </x-container>
            </header>
        @endif

        <!-- Page Content -->
        <main>
            {{ $slot }}
        </main>
    </div>

    <!-- Footer -->
    <x-footer></x-footer>

    @livewire('wire-elements-modal')
    @stack('modals')

    @filamentScripts
    {{-- @livewireScripts --}}
    @vite('resources/js/app.js')

    @stack('body.end')
</body>

</html>

<!DOCTYPE html>
<html
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
    style="scrollbar-gutter: stable;"
>
<!-- TODO: Remove gutter style when supported in tailwind -->

<head>
    <meta charset="utf-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >
    <link
        rel="canonical"
        href="{{ url()->current() }}"
    >
    <meta
        name="csrf-token"
        content="{{ csrf_token() }}"
    >

    <title>{{ !empty($title) ? $title : config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link
        rel="preconnect"
        href="https://fonts.bunny.net"
    >
    <link
        href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap"
        rel="stylesheet"
    />

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')

    @stack('head.end')

    {{-- @livewireStyles --}}
</head>

<body class="font-sans antialiased">

    <x-banner />

    @isset($banner)
        {{ $banner }}
    @endisset

    <div class="min-h-fit bg-white">
        @livewire('navigation-menu')

        <!-- Page Heading -->
        @if (isset($header))
            <header class="bg-white shadow">
                <x-container class="py-6">
                    {{ $header }}
                </x-container>
            </header>
        @endif

        <!-- Page Content -->
        <main>
            {{ $slot }}
        </main>
    </div>

    <!-- Footer -->
    <x-footer></x-footer>

    @livewire('wire-elements-modal')
    @stack('modals')

    @filamentScripts
    {{-- @livewireScripts --}}
    @vite('resources/js/app.js')

    @stack('body.end')
</body>

</html>

Mansoor KhanOP•15mo ago

Just checked the filament base layout and its using the notification component: @livewire(Filament\Livewire\Notifications::class) I tried to add it to my layout file and i am getting exception: Unable to find component: [filament.livewire.notifications]

Mansoor KhanOP•15mo ago

Alright the namespace was wrong. Here is the what works.

@livewire(Filament\Notifications\Livewire\Notifications::class)

@livewire(Filament\Notifications\Livewire\Notifications::class)

Gaming

Programming

Not able to use Filament notifications on front site