Instalación

Livewire es un paquete Laravel, por lo que necesitará tener una aplicación Laravel en funcionamiento antes de poder instalar y utilizar Livewire. Si necesitas ayuda para configurar una nueva aplicación Laravel, por favor consulta la documentación oficial de Laravel.

Para instalar Livewire, abre tu terminal y navega al directorio de tu aplicación Laravel, luego ejecuta el siguiente comando:

composer require livewire/livewire

Eso es todo. Si quieres más opciones de personalización, sigue leyendo. Si no, puedes empezar a usar Livewire.

Publicación del archivo de configuración

Livewire es “zero-config”, lo que significa que puedes utilizarlo siguiendo las convenciones, sin ninguna configuración adicional. Sin embargo, si es necesario, puedes publicar y personalizar el archivo de configuración de Livewire ejecutando el siguiente comando de Artisan:

php artisan livewire:publish --config

Esto creará un nuevo archivo livewire.php en el directorio de configuración de tu aplicación Laravel.

Incluir manualmente los archivos frontales de Livewire

Por defecto, Livewire inyecta los archivos JavaScript y CSS que necesita en cada página que incluye un componente Livewire.

Si quieres un mayor control sobre este comportamiento, puede incluir manualmente los activos en una página utilizando las siguientes directivas Blade:

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

Al incluir estos archivos manualmente en una página, Livewire sabe que no debe inyectarlos automáticamente.

Aunque rara vez es necesario, puede desactivar el comportamiento de auto-inyección de activos de Livewire actualizando la opción de configuración inject_assets en el archivo config/livewire.php de su aplicación:

'inject_assets' => false,

Si prefieres forzar a Livewire a inyectar sus activos en una o varias páginas, puede llamar al siguiente método global desde la ruta actual o desde un proveedor de servicios.

\Livewire\Livewire::forceAssetInjection();

Configuración del endpoint de actualización de Livewire

Cada actualización en un componente Livewire envía una petición de red al servidor en el siguiente endpoint: https://example.com/livewire/update

Esto puede ser un problema para algunas aplicaciones que utilizan localización o multi-tenancy.

En esos casos, puede registrar su propio endpointcomo quiera, y siempre que lo haga dentro de Livewire::setUpdateRoute(), Livewire sabrá usar este endpointpara todas las actualizaciones del componente:

Livewire::setUpdateRoute(function ($handle) {
    return Route::post('/custom/livewire/update', $handle);
});

Ahora, en lugar de usar /livewire/update, Livewire enviará las actualizaciones de los componentes a /custom/livewire/update.

Dado que Livewire le permite registrar su propia ruta de actualización, puede declarar cualquier middleware adicional que desee que Livewire utilice directamente dentro de setUpdateRoute():

Livewire::setUpdateRoute(function ($handle) {
    return Route::post('/custom/livewire/update', $handle)
        ->middleware([...]);
});

Personalización de la URL de los archivos

Por defecto, Livewire servirá sus activos JavaScript desde la siguiente URL: https://example.com/livewire/livewire.js. Además, Livewire hará referencia a este activo desde una etiqueta script como esta:

<script src="/livewire/livewire.js" ...

Si tu aplicación tiene prefijos de ruta globales debido a localización o multi-tenancy, puede registrar su propio endpointque Livewire debería usar internamente cuando obtenga su JavaScript.

Para utilizar un endpoint de activo JavaScript personalizado, puede registrar su propia ruta dentro de Livewire::setScriptRoute():

Livewire::setScriptRoute(function ($handle) {
    return Route::get('/custom/livewire/livewire.js', $handle);
});

Ahora, Livewire cargará su JavaScript así:

<script src="/custom/livewire/livewire.js" ...

Cargar manualmente Livewire y Alpine JS

Por defecto, Alpine JS y Livewire se cargan usando la etiqueta <script src="livewire.js">, lo que significa que no tienes control sobre el orden en que se cargan estas librerías. En consecuencia, la importación y registro de plugins Alpine, como se muestra en el siguiente ejemplo, ya no funcionará:

// Advertencia: Este fragmento demuestra lo que NO se debe hacer...
import Alpine from "alpinejs";
import Clipboard from "@ryangjchandler/alpine-clipboard";

Alpine.plugin(Clipboard);
Alpine.start();

Para solucionar este problema, debemos informar a Livewire de que queremos utilizar nosotros mismos la versión ESM (módulo ECMAScript) y evitar la inyección de la etiqueta script livewire.js. Para conseguirlo, debemos añadir la directiva @livewireScriptConfig a nuestro archivo de diseño (resources/views/components/layouts/app.blade.php):

<html>
<head>
    <!-- ... -->
    @livewireStyles
    @vite(['resources/js/app.js'])
</head>
<body>
    {{ $slot }}

    @livewireScriptConfig
</body>
</html>

Cuando Livewire detecte la directiva @livewireScriptConfig, se abstendrá de inyectar los scripts de Livewire y Alpine. Si está utilizando la directiva @livewireScripts para cargar manualmente Livewire, asegúrese de eliminarla. Asegúrese de añadir la directiva @livewireStyles si no está ya presente.

El paso final es importar Alpine y Livewire en nuestro archivo app.js, permitiéndonos registrar cualquier recurso personalizado, y finalmente iniciar Livewire y Alpine:

import {
  Livewire,
  Alpine,
} from "../../vendor/livewire/livewire/dist/livewire.esm";
import Clipboard from "@ryangjchandler/alpine-clipboard";

Alpine.plugin(Clipboard);

Livewire.start();

Publicación de los assets del frontend de Livewire

Publicar los assets no es n

Publicar los assets de Livewire no es necesario para que Livewire funcione. Sólo hágalo si tiene una necesidad específica para ello.

Si prefieres que los activos JavaScript sean servidos por tu servidor web y no a través de Laravel, utiliza el comando livewire:publish:

php artisan livewire:publish --assets

Para mantener los activos actualizados y evitar problemas en futuras actualizaciones, le recomendamos encarecidamente que añada el siguiente comando a su archivo composer.json:

{
  "scripts": {
    "post-update-cmd": [
      // Otros scripts
      "@php artisan vendor:publish --tag=livewire:assets --ansi --force"
    ]
  }
}