Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

SamZaro's avatar

JavaScript not working on frontend with Fabricator Blocks

Hi, I am using the Fabricator plugin to create pages and blocks.

When I create a new dynamic page with Fabricator, the CSS works on the frontend, but the JavaScript does not. In my AppServiceProvider, I am already compiling Vite, but I also created a default.php layout file. What am I doing wrong? Can someone help me?

AppServiceProvider

namespace App\Providers;

use Illuminate\Foundation\Vite; use App\Filament\Tiptap\Jumbotron; use Illuminate\Support\HtmlString; use FilamentTiptapEditor\TiptapEditor; use Illuminate\Support\ServiceProvider; use Z3d0X\FilamentFabricator\Facades\FilamentFabricator;

class AppServiceProvider extends ServiceProvider { /** * Register any application services. */ public function register(): void { TiptapEditor::configureUsing(function (TiptapEditor $component) { $component ->blocks([ Jumbotron::class, ]); });

    //Add custom tags (like `<meta>` & `<link>`)
    FilamentFabricator::pushMeta([
        new HtmlString('<link rel="manifest" href="/site.webmanifest" />'),
    ]);



   //Register scripts
    FilamentFabricator::registerScripts([
        app(Vite::class)('resources/js/app.js'), //vite
    ]);

    //Register styles
    FilamentFabricator::registerStyles([
        app(Vite::class)('resources/css/app.css'), //vite
    ]);

    FilamentFabricator::favicon(asset('favicon.ico'));
}

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    //
}

}

DefaultLayout

namespace App\Filament\Fabricator\Layouts;

use Z3d0X\FilamentFabricator\Layouts\Layout;

class DefaultLayout extends Layout { protected static ?string $name = 'default'; }

default layout Blade file

@props(['page'])

    <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" />

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

</head>
<body class="antialiased">

    <x-filament-fabricator::layouts.base :title="$page->title">
        {{-- Header Here --}}
        @livewire('components.navbar')

        <x-filament-fabricator::page-blocks :blocks="$page->blocks" />

        {{-- Footer Here --}}
    </x-filament-fabricator::layouts.base>
</body>
0 likes
0 replies

Please or to participate in this conversation.