Filament•13mo ago

How to load assets for Notifications

Hi! I'm stuck on implementing the Notifications. Compiling the files with Vite a .js and .css file is correctly created in public/build/assets. The problem seems to be Filament not looking (or finding) the blade template in resources/views/layouts/app.blade.php. For example, when adding a console.log() to resources/js/app.js and compiling with Vite. This log is not shown when loading the admin panel. What am I doing wrong? Thanks in advance!

13 Replies

TiBiBa•13mo ago

Update: Running npm run dev seems to work fine and the following is shown in the console while running:

[Debug] [vite] connecting... (client, line 206)
[Debug] [vite] connected. (client, line 286)

[Debug] [vite] connecting... (client, line 206)
[Debug] [vite] connected. (client, line 286)

Update: I also tried adding the @livewire('notifications') to the blade template of a custom page. But this does not make any difference. The main issue seems to be loading the JS file somewhere. I'm registering the theme with:

Filament::serving(function () {                 Filament::registerViteTheme('resources/css/filament.css');
});

Filament::serving(function () {                 Filament::registerViteTheme('resources/css/filament.css');
});

Tried the following:

            Filament::registerRenderHook(
                'scripts.start',
                static fn()=>(new Vite)(['resources/js/filament.js'])
            );

            Filament::registerRenderHook(
                'scripts.start',
                static fn()=>(new Vite)(['resources/js/filament.js'])
            );

The file seems to be found, but the following error is shown: [Error] TypeError: undefined is not an object (evaluating '$store.sidebar.isOpen')

Dennis Koch•13mo ago

Where are you trying to do this? The panel has notifications built in

TiBiBa•13mo ago

I used this documentation to setup the notifications: https://filamentphp.com/docs/2.x/notifications/installation

Filament

Installation - Notifications - Filament

Elegant TALL stack notifications for Laravel artisans.

TiBiBa•13mo ago

But can't figure it out to work, my JS looks as folllows:

import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'
import focus from '@alpinejs/focus'
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'

Alpine.plugin(collapse)
Alpine.plugin(focus)
Alpine.plugin(AlpineFloatingUI)
Alpine.plugin(NotificationsAlpinePlugin)

window.Alpine = Alpine

Alpine.start()

import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'
import focus from '@alpinejs/focus'
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'

Alpine.plugin(collapse)
Alpine.plugin(focus)
Alpine.plugin(AlpineFloatingUI)
Alpine.plugin(NotificationsAlpinePlugin)

window.Alpine = Alpine

Alpine.start()

And then in a random resource page:

        Notification::make()
            ->title('Saved successfully')
            ->success()
            ->send();

        Notification::make()
            ->title('Saved successfully')
            ->success()
            ->send();

Dennis Koch•13mo ago

Again: What are you trying to do?! The Admin Panel already has notifications!

TiBiBa•13mo ago

I'm trying to show a notification to the user Alright, but how does it work? As this doesn't show anything:

        Notification::make()
            ->title('Saved successfully')
            ->success()
            ->send();

        Notification::make()
            ->title('Saved successfully')
            ->success()
            ->send();

Dennis Koch•13mo ago

Where are you using this?

Random resource page:

Which part of it?

TiBiBa•13mo ago

I tried different locations. At this point at the submit() of a custom page (with HasForms):

    public function submit(): void
    {
        Notification::make()
            ->title('Saved successfully')
            ->success()
            ->send();
    }

    public function submit(): void
    {
        Notification::make()
            ->title('Saved successfully')
            ->success()
            ->send();
    }

Dennis Koch•13mo ago

Do you use the <x-filament::page> layout in your blade?

TiBiBa•13mo ago

Yes I do

Dennis Koch•13mo ago

Hm, should work then, I guess. The submit method gets called?

TiBiBa•13mo ago

Yes, I also tried a dd(), that is shown fine at the same point in code Do you maybe have any advice on how to approach the debugging?

Dan Harrin•13mo ago

<x-filament::page> is for admin panel pages... if you're in the admin panel, you dont need to set up notifications as dennis said your original question also mentions the admin panel check what the content of the session is after you send()

Gaming

Programming

How to load assets for Notifications