Filament•2y ago

Notifications not showing up.

Hi. I wanted to add Notifications to actually existing Laravel project and I did everything that docs says, but any Notification does not show up. There is no error/500/anything that could be helpful. 😦 1. npm install tailwindcss... - everything is fine here. 2. I configured tailwind.config.js 3. For styles im using scss - tailwind is imported here as well 4. postcss.config.js - looks same like in docs 5. Layout is also configured

24 Replies

toeknee•2y ago

Did you include the blade view? Is this in the admin panel or the none-admin panel?

weebiszOP•2y ago

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
      x-data="{
          theme: localStorage.getItem('theme')
          || localStorage.setItem('theme', 'light')
      }"
      x-bind:class="{ 'dark': theme === 'dark' }"
      class="scroll-smooth"
>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? 'Page Title' }}</title>
    @livewireStyles
    @filamentStyles
    @vite('resources/scss/app.scss')

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
</head>
<body
    class="font-be-vietnam-pro h-screen text-base text-gray-800 dark:text-gray-300 bg-gradient-to-b dark:from-medic-dark dark:to-medic-dark-second from-gray-50 to-gray-100 antialiased">
@yield('content')

@filamentScripts
@livewireScripts
@vite('resources/js/app.js')
</body>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
      x-data="{
          theme: localStorage.getItem('theme')
          || localStorage.setItem('theme', 'light')
      }"
      x-bind:class="{ 'dark': theme === 'dark' }"
      class="scroll-smooth"
>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? 'Page Title' }}</title>
    @livewireStyles
    @filamentStyles
    @vite('resources/scss/app.scss')

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
</head>
<body
    class="font-be-vietnam-pro h-screen text-base text-gray-800 dark:text-gray-300 bg-gradient-to-b dark:from-medic-dark dark:to-medic-dark-second from-gray-50 to-gray-100 antialiased">
@yield('content')

@filamentScripts
@livewireScripts
@vite('resources/js/app.js')
</body>

i got two blade layouts - one for auth and second for dashboard this one is for auth i created simple trait that will give me validation error

trait ValidationToast
{
    public function boot(): void
    {
        $this->withValidator(static function (Validator $validator) {
            $validator->after(static function (Validator $validator) {
                if ($validator->failed()) {
                    Notification::make()
                        ->title('Saved successfully')
                        ->success()
                        ->send();
                }
            });
        });
    }
}

trait ValidationToast
{
    public function boot(): void
    {
        $this->withValidator(static function (Validator $validator) {
            $validator->after(static function (Validator $validator) {
                if ($validator->failed()) {
                    Notification::make()
                        ->title('Saved successfully')
                        ->success()
                        ->send();
                }
            });
        });
    }
}

i also tried to get notification after log-in (in mount method) but its not showing up as well Sending by javascript is not working too.

awcodes•2y ago

Add this to your view @livewire(Filament\Livewire\Notifications::class). I think the docs need to be updated.

weebiszOP•2y ago

Added

Filament\Notifications\Livewire\Notifications

Filament\Notifications\Livewire\Notifications

now its showing up in html but there's probably wrong in z-index or something

weebiszOP•2y ago

weebiszOP•2y ago

it's here but not visible D:

awcodes•2y ago

Where did you add it? Have a look at the panels base layout component. https://github.com/filamentphp/filament/blob/3.x/packages/panels/resources/views/components/layout/base.blade.php

GitHub

filament/packages/panels/resources/views/components/layout/base.bla...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

weebiszOP•2y ago

above content yield nothing changes when i put this below

weebiszOP•2y ago

also, can't import it in that way

awcodes•2y ago

If it’s a z-index issue then you’ll have to figure that out yourself. There’s no way for us to know all of your app’s css and specificity. What? You said you added it and it was working.

weebiszOP•2y ago

I said that i used this one - Filament\Notifications\Livewire\Notifications I don't know if there's any diffs Well it's not z-index i removed whole body classess and leave only blank page with that notification, its still hidden

awcodes•2y ago

It’s probably just not styled. That’d be my guess.

weebiszOP•2y ago

It shows up after i removed "invisible" class from div with notificationComponent

weebiszOP•2y ago

before:

weebiszOP•2y ago

after:

awcodes•2y ago

that styling is still off. did you follow all of the install instructions in the docs. I'm think you missed a step somewhere.

weebiszOP•2y ago

tailwind config

awcodes•2y ago

not sure, something is off in your app. if you have a repo i can look at, i could maybe help more.

weebiszOP•2y ago

maybe @FilamentStyles directive is not working?

weebiszOP•2y ago

ah, nope - it's here

weebiszOP•2y ago

i have no idea what happen did I need Filament Panel to use other packages? i guess im not

awcodes•2y ago

no, the panel is just a package that ties them all together. the other packages will work by themselves without a panel

Mahdi•15mo ago

hi did you find the problem or solution?

Gaming

Programming

Notifications not showing up.

Did you find this page helpful?