Is there a way to add vuejs app on a single that doenst tie to any resource?

Is there a way to add Vue app on a single custom page that doesn't tie to any resource?

Solution:

Yes, I think that's the way to go

12 Replies

Should be possible... I think you need to wrap the Vue section of your page with a wire:ignore. And probably best not to use wire:navigate.

JawOP•14mo ago

i am very noob-ish to filament.

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

class Reports extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-chart-pie';

    protected static string $view = 'filament.pages.reports';

    protected static ?string $title = 'Reports';

    protected static ?string $navigationLabel = 'Reports';

    protected static ?int $navigationSort = 4;

    // protected ?string $heading = "";
}

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

class Reports extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-chart-pie';

    protected static string $view = 'filament.pages.reports';

    protected static ?string $title = 'Reports';

    protected static ?string $navigationLabel = 'Reports';

    protected static ?int $navigationSort = 4;

    // protected ?string $heading = "";
}

i have a custom report page where I'd like to embed vue app into it. will you point me to a direction or any reading material? thanks

Patrick Boivin•14mo ago

I don't know any tutorial that specific on Filament + Vue, but maybe I can help you figure things out. Are you more experienced in Vue or is this also a bit new to you?

JawOP•14mo ago

i am very experienced in vue and laravel. i just need help figuring out how to inject vue app into a custom filament page so i can do crazy stuff.

Patrick Boivin•14mo ago

Sounds good So I guess the first question is how do you load Vue into Filament? Do you have everything bundled up in dist/app.js or something like that?

JawOP•14mo ago

i am using official inertia + with vue from laravel. i have not bundled up anyting yet.

Patrick Boivin•14mo ago

Oh ok. I'm not sure that Inertia is compatible with Filament actually...

JawOP•14mo ago

that's totally fine. if i can just use a vue instance via script tag, that'll be nice.

Patrick Boivin•14mo ago

I mean on the same page... surely you can use both in the same app, but probably not on the same page.

Solution

Patrick Boivin•14mo ago

Yes, I think that's the way to go

Patrick Boivin•14mo ago

Ok, so I'll leave the details of bundling to you, but basically you can use the standard Vite setup that Laravel offers. You can register your bundle as a Filament asset: https://filamentphp.com/docs/3.x/support/assets#registering-javascript-files

Assets - Core Concepts - Filament

Patrick Boivin•14mo ago

Then if your Vue app is designed to mount on #app, add the element to your custom page filament.pages.reports with a wire:ignore attribute:

<div wire:ignore id="app"></div>

<div wire:ignore id="app"></div>

Gaming

Programming

Is there a way to add vuejs app on a single that doenst tie to any resource?