Forms outside panel without overhead

✅ SolvedForm builder5️⃣v5

I want to use filament forms outside, but without the overhead when using

@filamentScripts

@filamentScripts

.

I am using the panel as admin as well, so I have installed quite some plugins. Therefore using the

@filamentScripts

@filamentScripts

in a layoutfile outside the panel/admin results in:

<script>window.filamentData = []</script>
<script src="https://localhost/js/awcodes-sticky-header/awcodes-sticky-header.js?v=5.3.1.0"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tinymce.js"></script>                                                                                                                                                                     
<script src="https://localhost/js/filament/actions/actions.js?v=5.3.1.0"></script>
<script src="https://localhost/js/filament/notifications/notifications.js?v=5.3.1.0"></script>
<script src="https://localhost/js/filament/schemas/schemas.js?v=5.3.1.0"
<script src="https://localhost/js/filament/tables/tables.js?v=5.3.1.0"></script>
....

<script>window.filamentData = []</script>
<script src="https://localhost/js/awcodes-sticky-header/awcodes-sticky-header.js?v=5.3.1.0"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tinymce.js"></script>                                                                                                                                                                     
<script src="https://localhost/js/filament/actions/actions.js?v=5.3.1.0"></script>
<script src="https://localhost/js/filament/notifications/notifications.js?v=5.3.1.0"></script>
<script src="https://localhost/js/filament/schemas/schemas.js?v=5.3.1.0"
<script src="https://localhost/js/filament/tables/tables.js?v=5.3.1.0"></script>
....

Which is parts obviously useless. I dont use notifications nor tables. The

awcodes-sticky-header

awcodes-sticky-header

is great inside the panel, but there is no need outside, etc. And can I combine the used scripts somehow to reduce the amount of requests?

In the docs (https://filamentphp.com/docs/5.x/introduction/installation#existing-laravel-projects) I only see options for this for the css part, but not for JS.

Solution

Thats how i use FilamentPHP components in frontend;

<head>
...
@livewireStyles
        @filamentStyles(packages: ['filament/forms', 'filament/support'])
        @vite(['resources/css/filament/admin/theme.css', 'resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
...


        @livewire('notifications')

        @livewireScriptConfig
        @filamentScripts(packages: ['filament/notifications', 'filament/support'])
</body>

<head>
...
@livewireStyles
        @filamentStyles(packages: ['filament/forms', 'filament/support'])
        @vite(['resources/css/filament/admin/theme.css', 'resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
...


        @livewire('notifications')

        @livewireScriptConfig
        @filamentScripts(packages: ['filament/notifications', 'filament/support'])
</body>

Jump to solution

Forms outside panel without overhead

✅ SolvedForm builder5️⃣v5

I want to use filament forms outside, but without the overhead when using

@filamentScripts

@filamentScripts

.

I am using the panel as admin as well, so I have installed quite some plugins. Therefore using the

@filamentScripts

@filamentScripts

in a layoutfile outside the panel/admin results in:

<script>window.filamentData = []</script>
<script src="https://localhost/js/awcodes-sticky-header/awcodes-sticky-header.js?v=5.3.1.0"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tinymce.js"></script>                                                                                                                                                                     
<script src="https://localhost/js/filament/actions/actions.js?v=5.3.1.0"></script>
<script src="https://localhost/js/filament/notifications/notifications.js?v=5.3.1.0"></script>
<script src="https://localhost/js/filament/schemas/schemas.js?v=5.3.1.0"
<script src="https://localhost/js/filament/tables/tables.js?v=5.3.1.0"></script>
....

<script>window.filamentData = []</script>
<script src="https://localhost/js/awcodes-sticky-header/awcodes-sticky-header.js?v=5.3.1.0"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tinymce.js"></script>                                                                                                                                                                     
<script src="https://localhost/js/filament/actions/actions.js?v=5.3.1.0"></script>
<script src="https://localhost/js/filament/notifications/notifications.js?v=5.3.1.0"></script>
<script src="https://localhost/js/filament/schemas/schemas.js?v=5.3.1.0"
<script src="https://localhost/js/filament/tables/tables.js?v=5.3.1.0"></script>
....

Which is parts obviously useless. I dont use notifications nor tables. The

awcodes-sticky-header

awcodes-sticky-header

Solution

Thats how i use FilamentPHP components in frontend;

<head>
...
@livewireStyles
        @filamentStyles(packages: ['filament/forms', 'filament/support'])
        @vite(['resources/css/filament/admin/theme.css', 'resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
...


        @livewire('notifications')

        @livewireScriptConfig
        @filamentScripts(packages: ['filament/notifications', 'filament/support'])
</body>

<head>
...
@livewireStyles
        @filamentStyles(packages: ['filament/forms', 'filament/support'])
        @vite(['resources/css/filament/admin/theme.css', 'resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
...


        @livewire('notifications')

        @livewireScriptConfig
        @filamentScripts(packages: ['filament/notifications', 'filament/support'])
</body>

Jump to solution

Forms outside panel without overhead

Forms outside panel without overhead

Similar Threads

Similar Threads

Similar Threads