Filament•16mo 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•16mo ago

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

weebiszOP•16mo 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•16mo ago

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

weebiszOP•16mo 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•16mo ago

weebiszOP•16mo ago

it's here but not visible D:

awcodes•16mo 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•16mo ago

above content yield nothing changes when i put this below

weebiszOP•16mo ago

also, can't import it in that way

awcodes•16mo 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•16mo 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•16mo ago

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

weebiszOP•16mo ago

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

weebiszOP•16mo ago

before:

weebiszOP•16mo ago

after:

awcodes•16mo 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•16mo ago

tailwind config

awcodes•16mo ago

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

weebiszOP•16mo ago

maybe @FilamentStyles directive is not working?

weebiszOP•16mo ago

ah, nope - it's here

weebiszOP•16mo ago

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

awcodes•16mo ago

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

Mahdi•12mo ago

hi did you find the problem or solution?

Gaming

Programming

Notifications not showing up.