Tailwind CSS ( Flowbite ) 导航栏组件未在 laravel 10 Livewire 3 中加载

Question

我安装了标准的 laravel 10 和 livewire 3，我正在 SPA 应用程序中实现 flowbite 主题。

1. 全页面刷新后，导航栏组件会正确显示。
2. 但是当我通过导航栏（wire:navigate）单击任何其他页面时，某些元素不会加载，例如暗模式切换按钮和下拉菜单不起作用。

经过搜索，我在 livewire 的文档中找到了它，并在 app.js 中实现了它，如下所示

import './bootstrap';
import 'flowbite';
import './dark-mode';
import { initFlowbite } from 'flowbite';

document.addEventListener('livewire:navigated', () => {
    // console.log('navigated');
    initFlowbite();
})

在上面的代码之后，组件在表单更新时正确呈现，但当我单击导航时则不然。

请查看以下屏幕截图。

1. 第一个屏幕截图是当我刷新整个页面时。
2. 第二个屏幕截图是我单击导航中的设置时的屏幕截图。

注意导航栏和切换暗模式按钮。

请帮忙。

Answer 1

只需确保在所有页面中注入 livewire 资源即可。

请注意，这是 livewire 中的一个错误，livewire:naviged 无法在第一页上工作并重定向，请查看此链接