Cómo usar Livewire con Vite y Ddev en Roots Radicle
https://roots.io/acorn/docs/using-livewire-with-wordpress/
composer require livewire/livewire
Añadir en .ddev/config.yaml para que funcione el Hot Reload
web_extra_exposed_ports:
- name: vite
container_port: 5173
http_port: 5172
https_port: 5173En .ddev/nginx_full/nginx-site.conf
Eliminar #ddev-generated al comienzo, para que ddev no regenere el archivo al start
Añadir al final, antes de los include:
## This is needed for livewire to work
location ^~ /livewire/ {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ ^/flux/flux(\.min)?\.(js|css)$ {
expires off;
try_files $uri $uri/ /index.php?$query_string;
}Eliminar AlpineJS de app.js ya que livewire ya inicializa su propia instancia:
//Eliminar estas líneas
import alpine from "alpinejs";
Object.assign(window, { Alpine: alpine }).Alpine.start();Añadir a vite.config.js
server: {
// Respond to all network requests
host: "0.0.0.0",
port: 5173,
strictPort: true,
origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\d+$/, "")}:5173`,
cors: {
origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.dvl\.to)(?::\d+)?$/,
},
},Como vincular un input
Con x-model le damos un nombre al valor del input.
Con @input.debounce estamos añadiendo un evento que se ejecuta al hacer input, con un debounce de 300ms. El evento es:
Si search (previamente declarado con x-model) tiene más de 3 caracteres, entonces usamos $wire para establecer el valor de ‘search’ con el valor del input.
//posts-grid.blade.php
<input type="text" x-model="search" @input.debounce.300ms="search.length >= 3 && $wire.set('search', search)"Después en la clase del componente
use Livewire\Component;
class PostsGrid extends Component
{
public string $search = '';
//resto del código...
}Aquí recibimos el valor de $search, que por defecto es un string vacío.
Desplegar Livewire en Plesk
mkdir public/livewire-static
cp vendor/livewire/livewire/dist/* public/livewire-static/
Y en config/livewire.php
<?php
return [
/*
|---------------------------------------------------------------------------
| Class Namespace
|---------------------------------------------------------------------------
|
| This value sets the root class namespace for Livewire component classes in
| your application. This value will change where component auto-discovery
| finds components. It's also referenced by the file creation commands.
|
*/
'class_namespace' => 'App\\Livewire',
/*
|---------------------------------------------------------------------------
| View Path
|---------------------------------------------------------------------------
|
| This value is used to specify where Livewire component Blade templates are
| stored when running file creation commands like `artisan make:livewire`.
| It is also used if you choose to omit a component's render() method.
|
*/
'view_path' => resource_path('views/livewire'),
/*
|---------------------------------------------------------------------------
| Layout
|---------------------------------------------------------------------------
| The view that will be used as the layout when rendering a single component
| as an entire page via `Route::get('/post/create', CreatePost::class);`.
| In this case, the view returned by CreatePost will render into $slot.
|
*/
'layout' => 'components.layouts.app',
/*
|---------------------------------------------------------------------------
| Lazy Loading Placeholder
|---------------------------------------------------------------------------
| Livewire allows you to lazy load components that would otherwise slow down
| the initial page load. Every component can have a custom placeholder or
| you can define the default placeholder view for all components below.
|
*/
'lazy_placeholder' => null,
/*
|---------------------------------------------------------------------------
| Temporary File Uploads
|---------------------------------------------------------------------------
|
| Livewire handles file uploads by storing uploads in a temporary directory
| before the file is stored permanently. All file uploads are directed to
| a global endpoint for temporary storage. You may configure this below:
|
*/
'temporary_file_upload' => [
'disk' => null, // Example: 'local', 's3' | Default: 'default'
'rules' => null, // Example: ['file', 'mimes:png,jpg'] | Default: ['required', 'file', 'max:12288'] (12MB)
'directory' => null, // Example: 'tmp' | Default: 'livewire-tmp'
'middleware' => null, // Example: 'throttle:5,1' | Default: 'throttle:60,1'
'preview_mimes' => [ // Supported file types for temporary pre-signed file URLs...
'png',
'gif',
'bmp',
'svg',
'wav',
'mp4',
'mov',
'avi',
'wmv',
'mp3',
'm4a',
'jpg',
'jpeg',
'mpga',
'webp',
'wma',
],
'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs...
],
/*
|---------------------------------------------------------------------------
| Render On Redirect
|---------------------------------------------------------------------------
|
| This value determines if Livewire will run a component's `render()` method
| after a redirect has been triggered using something like `redirect(...)`
| Setting this to true will render the view once more before redirecting
|
*/
'render_on_redirect' => false,
/*
|---------------------------------------------------------------------------
| Eloquent Model Binding
|---------------------------------------------------------------------------
|
| Previous versions of Livewire supported binding directly to eloquent model
| properties using wire:model by default. However, this behavior has been
| deemed too "magical" and has therefore been put under a feature flag.
|
*/
'legacy_model_binding' => false,
/*
|---------------------------------------------------------------------------
| Auto-inject Frontend Assets
|---------------------------------------------------------------------------
|
| By default, Livewire automatically injects its JavaScript and CSS into the
| <head> and <body> of pages containing Livewire components. By disabling
| this behavior, you need to use @livewireStyles and @livewireScripts.
|
*/
'inject_assets' => true,
/*
|---------------------------------------------------------------------------
| Navigate (SPA mode)
|---------------------------------------------------------------------------
|
| By adding `wire:navigate` to links in your Livewire application, Livewire
| will prevent the default link handling and instead request those pages
| via AJAX, creating an SPA-like effect. Configure this behavior here.
|
*/
'navigate' => [
'show_progress_bar' => true,
'progress_bar_color' => '#2299dd',
],
/*
|---------------------------------------------------------------------------
| HTML Morph Markers
|---------------------------------------------------------------------------
|
| Livewire intelligently "morphs" existing HTML into the newly rendered HTML
| after each update. To make this process more reliable, Livewire injects
| "markers" into the rendered Blade surrounding @if, @class & @foreach.
|
*/
'inject_morph_markers' => true,
/*
|---------------------------------------------------------------------------
| Pagination Theme
|---------------------------------------------------------------------------
|
| When enabling Livewire's pagination feature by using the `WithPagination`
| trait, Livewire will use Tailwind templates to render pagination views
| on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
|
*/
'pagination_theme' => 'tailwind',
'asset_url' => env('LIVEWIRE_URL', null),
];Y en .env
LIVEWIRE_URL=livewire-static/livewire.js
Añadir .htaccess a /public
## BEGIN WordPress
## Las directivas (líneas) entre «BEGIN WordPress» y «END WordPress» son
## generadas dinámicamente y solo deberían ser modificadas mediante filtros de WordPress.
## Cualquier cambio en las directivas que hay entre esos marcadores serán sobrescritas.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
## END WordPress