Install edited vite.config.js, but didn't add the 'path' and 'vue' import

[michapietsch-streamline]

Hey,

I ran php artisan mingle:install, and it added the code to resolve the @mingle alias, as well as the vue plugin, but it failed to add import path from 'path' and import vue from '@vitejs/plugin-vue'.

It was a quick fix, but maybe that's a QOL thing to ensure.

[ijpatricio]

Thank you for the heads up, @michapietsch-streamline

Let me know if anything more comes by, good or bad 😄

[jackwh]

@ijpatricio Hi there! Just wanted to share my experience setting up Mingle for the first time in an existing app. I found three issues, but all were solveable :)

1. I tried to run php artisan mingle:install but it failed. I don't have a guest layout so hopefully just a check for file existence would solve this.

2. As well as registering Vite's reactRefresh in Filament (as per docs), I also had to register the stack in Filament's internal layout. I think this was only needed as I'd changed the stack name in the config to avoid a conflict elsewhere:

FilamentView::registerRenderHook(
    'panels::head.end',
    fn(): string => Blade::render("@stack('mingles')")
);

3. Finally I followed the docs to auto-import mingles in vite.config.js. At first it wasn't finding the test mingle I'd created, but this turned out to be because I'd set the JavaScript file to be called resources/js/MyComponent.js when prompted by php artisan make:mingle. I created a second test component in the alternative suggested structure (resources/js/MyComponent/index.js), and after that it was able to pick this up automatically.

[ijpatricio]

Hey @jackwh

Thank you for the insights! I have to take care of the rest of things.

1. and 3, I'll take a deeper look over the next few days
2. Yes, you're doing everything right. Can't remember how I got it working before, but jest tested it out and that's needed.
   You can also do something like so:

Warning

I'll soon make something much better in terms of QoL/DX. I'll come and update here as well.

Thanks a lot everyone, of the insights!!

<?php

namespace App\Filament\Filament\Pages;

use Filament\Pages\Page;
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Foundation\Vite;
use Illuminate\Support\Facades\Blade;

class DemoVue extends Page
{
    protected static ?string $navigationIcon = 'icon-vue';

    protected static string $view = 'filament.filament.pages.demo-vue';

    public function mount()
    {
        if (app()->environment('local')) {
            FilamentView::registerRenderHook(
                name: PanelsRenderHook::HEAD_START,
                hook: fn() => app(Vite::class)->reactRefresh(),
            );
        }
        FilamentView::registerRenderHook(
            name: PanelsRenderHook::HEAD_START,
            hook: fn() => Blade::render("@stack('mingles')"),
        );
    }
}

`´`