how to keep laravel livewire wire:submit.prevent from reloading the page

I have a pretty simple livewire component that helps a user store a vanity URL

<form wire:submit.prevent="save">
        <div class="form-group form-inline">
            <span>{{ config('app.url') }}/request/</span>
            <input type="text" id="vanity" wire:model.defer="vanityUrl" name="vanityUrl">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">@if($saved) Saved @else Save @endif</button>
            <button type="button" id="copy-vanity" class="btn btn-secondary">Copy</button>
        </div>
    </form>

And the save action is pretty simple as well.

public function save()
    {
        $user = Auth::user();
        $this->validate();
        $user->update(['vanity_slug' => Str::slug($this->vanityUrl)]);
        $this->vanityUrl = Str::slug($this->vanityUrl);
        $this->saved = true;
    }

This works locally but not in production. I am using Forge, php7.4, L8, its all the same between the environments except the URLs. I have livewire:scripts and livewire:styles loaded, and again it works locally but not in prod.

In prod, the page reloads. I have been trying to figure this out for a couple days now... driving me crazy. TIA

Solution

Cached Views

The most typical issue when Livewire isn't working after deploying to a production environment (or for that matter, after setting it up in localhost as well), is that your views, specifically layouts/app.blade.php is cached before the @livewireScripts directive is loaded. This means that it will not render @livewireScripts or @livewireStyles as the component, but will output the literal string.

This is fixed by simply running php artisan optimize:clear, to clear your cache (specifically the view cahce).

Missing Installation of Livewire

However, there are some cases where Livewire is not installed - or not installed properly. You can ensure that Livewire is installed through composer by running composer show -D while in the root directory of your Laravel application. Look for livewire/livewire. If its not there, then install it (see https://laravel-livewire.com/docs/2.x/installation). To install Livewire through composer, run the following command.

composer require livewire/livewire

Using Alpine.js v3 and Livewire v2w

If you have updated to Apline.js v3, you need to use Livewire v2.5 or higher. Simply update your Livewire version.

Faulty Installation of Livewire

The last scenario I've heard of so far with this kind of problem, is that Livewire is installed - but its still not working properly. This is the most uncommon from what I have seen so far. This happens when the scripts that Livewire hooks into is not working as intended (say, a form with wire:submit.prevent="submit" is submitting the actual form instead of sending the AJAX request), but Livewire is installed and @livewireScrtips is rendering as it should. For whatever reason this happens, I'm not sure (as I haven't experienced it first hand), but its quite simple to fix.

The solution for these scenarios is to reinstall Livewire - and you do that by simply removing and require the package again. After the reinstall, its a good idea to clear the cache, just to ensure that the view is not cached without the Livewire-directives.

composer remove livewire/livewire && composer require livewire/livewire && php artisan optimize:clear