Jetstream login not working after install WireUI

[jantbox]

Jetstream login stops working after install WireUI.

After some additional testing, the issue is related to the x-label and x-input tags added by Jetstream. It might be a good idea to add a prefix (configurable) for the WireUI components.

Steps to reproduce the behavior:

1. Create a new Laravel project with Livewire v3
2. Install and configure Jetstream
3. Check login page (login button has a black background)
4. Install WireUI
5. npm run build; php artisan optimize:clear
6. Check login page again: login button has a white background and doesn't work

Expected behavior A clear and concise description of what you expected to happen.

Screenshots or Videos If applicable, add screenshots or videos to help explain your problem.

Dependencies

• WireUI Version: 1.8.1
• Laravel Version: 10.28.0
• Alpine.js Version: 3.X.X
• Livewire Version: 3.0.8
• Lang: en_US, es_ES, ...

[a7medKhalid]

same here

[jantbox]

Quick fix: Change aliases in WireUI config file (config/wireui.php)

I've changed mines like...

...
  'avatar' => [
      'class' => Components\Avatar::class,
      'alias' => 'wui.avatar',
  ],
...

[DiegoAlonso27]

I was also a long time with the same problem, as the previous message says you can change the alias or what I did I put the Jetstream components in a folder called jet inside the components folder so you can differentiate them.

also for the login to work you will have to put the submit to the button and if you want to see the same color you will have to configure it as the wui web says.

The same for the other components that have the same name as the Jetstream components.

[douglas-moreno]

I added the prefix (wui) in all aliases in the config/wireui.php file:

... 'avatar' => [ 'class' => Components\Avatar::class, 'alias' => 'wui.avatar', ], ...

But the Jetstream login don't work. What else should I do to work again?

Thanks

[DiegoAlonso27]

I added the prefix (wui) in all aliases in the config/wireui.php file:

... 'avatar' => [ 'class' => Components\Avatar::class, 'alias' => 'wui.avatar', ], ...

But the Jetstream login don't work. What else should I do to work again?

Thanks

you would have to do the following in the code

`

@if (Route::has('password.request')) {{ __('Forgot your password?') }} @endif

            <x-wui-button type="submit" dark label="{{ __('Log in') }}" class="ml-4" />
        </div>`

[jantbox]

You need to change your code and add the prefix/alias like this:

Before: <x-select label="User" placeholder="Select user" multiselect option-key-value="true" wire:model.defer="form.users_selected" :options="$users" />

After: <x-wui.select label="User" placeholder="Select user" multiselect option-key-value="true" wire:model.defer="form.users_selected" :options="$users" />

[douglas-moreno]

Thank you!

[JohnMSykes]

FWIW, the underlying issue appears to be that Jetstream 3.0 has dropped the <x-jet-[ui_element]> syntax, e.g.,

<x-jet-button>

and changed to just <x-[ui_element]>, e.g.,

<x-jet-button>

is now called as

<x-button>

as per this from their upgrade docs:

https://github.com/laravel/jetstream/blob/4.x/UPGRADE.md#views

Jetstream's UI element names now collide with WireUI's default element names, i.e.,

<x-buttonw> == <x-button>

On Jetstream's forms, e.g., the login form, the WireUI login button is being rendered by WireUI's

<x-button>

instead of Jetstream's bundled

<x-button>

This had us foxed for a bit and we're glad that the alias/prefix option is available in/for WireUI via config/wireui.php - To enable/publish the config file:

php artisan vendor:publish --tag='wireui.config'

Doc for same: https://v1.wireui.dev/docs/customization

The thread above was super-helpful - Thank you!

[joaopalopes24]

In version 1, the config can be published and the component names can be changed. In the new version, available in beta, you can add a global prefix for all components.