Livewire 是服务端驱动的全栈框架,无需 npm 安装,要求 laravel 8+,通过 composer require livewire/livewire 安装,需配置 @livewireScripts、声明 public 属性并正确命名组件。

Livewire 不需要单独“安装组件”,它是一个服务端驱动的全栈框架,核心是通过 php 类 + Blade 模板实现响应式交互,npm 或 js 文件不是必需项(除非你主动启用 Alpine.js 支持)。
确认 Laravel 版本并执行 Composer 安装
Livewire 要求 Laravel 8+(推荐 10.x 或 11.x)。低于 8 的版本不支持,强行装会报 class 'LivewireLivewire' not found 错误。
- 运行
composer require livewire/livewire(Laravel 9+ 自动注册服务提供者;Laravel 8 需手动在config/app.php中添加LivewireLivewireServiceProvider::class) - 如果项目启用了
composer.lock,建议先composer update livewire/livewire确保版本一致 - 别用
npm install livewire—— 这是旧版(v1)遗留命令,v2+ 完全移除了前端包依赖
发布 Livewire 配置和资源(可选但推荐)
运行 php artisan livewire:publish --config 可生成 config/livewire.php,用于调整 middleware、rendering 或 dev_mode。开发阶段建议开启 dev_mode,能暴露更详细的错误堆栈。
-
php artisan livewire:publish --assets:仅当你要自定义 Livewire 的 JS 加载逻辑(比如 cdn 引入或延迟加载)才需要 -
php artisan livewire:publish --views:覆盖默认错误提示模板(如livewire.Error-message),一般不用动 - 不执行任何 publish 命令也能跑起来,但出错时调试会困难很多
创建第一个 Livewire 组件并引入到 Blade
用命令行快速生成:php artisan make:livewire counter,它会在 app/Livewire/Counter.php 和 resources/views/livewire/counter.blade.php 创建骨架文件。
注意:类名必须 PascalCase(Counter),而 Blade 视图路径默认按 kebab-case 解析(),大小写不匹配会报 Component [counter] not found。
- 确保主布局中已加载 Livewire 的 JS:在
底部加@livewireScripts(Laravel 9+ 默认已有;若手动删过,需补上) - 不要在组件内写
document.addEventListener或手动调用Alpine.start()—— Livewire 自动接管 dom 更新 - 如果页面刷新后状态丢失,检查是否忘了在组件类里定义
public $count = 0;(Livewire 只响应 public 属性)
常见交互失败原因排查
点击按钮没反应、表单提交无更新、控制台报 Uncaught ReferenceError: Livewire is not defined 是高频问题。
- 检查是否漏了
@livewireScripts或把它放在了里(必须在内且在所有组件标签之后) - 确认
APP_URL在.env中设置正确(如http://localhost:8000),否则 Livewire 的 XHR 请求会跨域失败 - 使用
wire:click.prevent="increment"时,方法名必须与组件类中的 public function 名完全一致(区分大小写) - 表单提交失败常因验证规则返回了
redirect()—— Livewire 要求验证失败时返回$this或抛出ValidationException,不能跳转
最易被忽略的是:Livewire 的响应式更新依赖于组件的 public 属性,所有需要响应的数据都得显式声明,不能靠 $this->data['key'] 或临时变量撑场子。