Crear proyecto Livewire con Alpine

laravel new lava_alpine --jet
php artisan migrate
npm install
npm run dev
php artisan make:livewire alpinelsg

En: \resources\views\dashboard.blade.php
@livewire("alpinelsg")

Y ya trabajar con el controlador y su correspondiente view:
app\Http\Livewire\Alpinelsg.php
resources\views\livewire\alpinelsg.blade.php


Alpine: Métodos mágicos

  <div x-data>
        <button @click="$refs.pAux.innerHTML='Texto cambiado'">
            Hazme click
        </button>
        <p x-ref="pAux">xxxx</p>
        <hr>

        <input type="text" @input="console.log($event.target.value);">
        <hr>
    </div>

    <div x-data="{mensaje:null}">
        <input type="text" x-model="mensaje" @input="$dispatch('customizar-lsg',mensaje)">    
    </div>

    <div x-data="{mensaje:null}" @customizar-lsg.window="mensaje=$event.detail">
        <input type="text" x-model="mensaje">    
    </div>

Alpine: Eventos

 <div x-data="getDataUno()" @resize.window="mostrar=window.outerWidth > 768 ? true:false">
        <p x-show="mostrar">Este mensaje solo en pantalla grande</p>
    </div>

    <div x-data="getDataDos()" >
        <form action="" @submit.prevent="console.log(mensaje1)"> <!-- prevent es para q no se envie el form -->
            <input type="text" x-model="mensaje1">
        
            <button @click.away="console.log('Has hecho click fuera del botón')">
                Enviar
            </button>
        </form>
        <hr>
        KEYDOWN: <input type="text" x-model="mensaje2" @keydown="console.log(mensaje2)">
        <hr>
        ENTER: <input type="text" x-model="mensaje3" @keydown.enter="console.log(mensaje3)">
        <hr>
        ESCAPE: <input type="text" x-model="mensaje4" @keydown.escape="console.log(mensaje4)">
        <hr>
        CTRL+A: <input type="text" x-model="mensaje5" @keydown.ctrl.a="console.log(mensaje5)">
    </div>

    <script>
        function getDataUno() {
            return {
                mostrar:true
            }
        }

        function getDataDos() {
            return {
                mensaje1: null,
                mensaje2: null,
                mensaje3: null,
                mensaje4: null,
                mensaje5: null
            }
        }
    </script>

Alpine: recorrer arrays y objetos

 <!-- recorrer un array normal -->
    <div x-data="getDataArray()">
        <ul>
            <template x-for="product in products"> 
                    <li>
                        <template x-if="product.precio>25">El precio es mayor de 25 - </template>
                        <span x-text="product.nombre"></span> - 
                        <span x-text="product.precio"></span> €
                    </li>
            </template>
        </ul>
    </div>
   
     <!-- recorrer un objeto -->
    <div x-data="getDataObject()">
           <ul>
            <template x-for="product in Object.values(products)"> 
                    <li>
                        <template x-if="product.precio>250">
                            El precio es mayor de 250
                        </template>
                        <span x-text="product.nombre"></span> - 
                        <span x-text="product.precio"></span> €
                    </li>
            </template>
        </ul>
    </div>
    
    <script>
        function getDataArray() {
            return {
                products: [
                    { 
                        id: 1,
                        nombre: 'uno',
                        precio: '11'
                    },
                    { 
                        id:2,
                        nombre: 'dos',
                        precio: '22'
                    },
                    { 
                        id:3,
                        nombre: 'tres',
                        precio: '33'
                    },
                    { 
                        id:4,
                        nombre: 'cuatro',
                        precio: '44'
                    },
                ]
            }
        }
        
        function getDataObject() {
            return {
                products: {
                    1: { 
                        id: 1,
                        nombre: 'uno',
                        precio: 111
                    },
                    2: { 
                        id:2,
                        nombre: 'dos',
                        precio: 222
                    },
                    3: { 
                        id:3,
                        nombre: 'tres',
                        precio: 333
                    },
                    4: { 
                        id:4,
                        nombre: 'cuatro',
                        precio: 444
                    },
                }
            }
        }
    </script>

Alpine x-model

<div x-data="{mensaje:null}">
        <input type="text" x-model="mensaje">
        <button @click="$refs.msjMostrar.innerText=mensaje">Enviar</button>
        <p x-ref="msjMostrar"></p> <!-- x-ref es para identificarlo -->
</div> 

Alpine: x-bind

X-bind se puede sustituir por :
x-on se puede sustituir por @
<style>.ocultar { display:none; }</style>
...
<button :disabled="abrir" @click="checkOpen()">
...
<nav class="ocultar" :class="{'ocultar': !abrir}" @click.away="cerrar()">
...


Alpine: Ejemplo básico

 <div x-data="getData()" x-init="iniciar()"> <!-- solo poniendo x-data ya se aplica alpine a este div -->
        <button x-on:click="checkOpen()">
            Menú
        </button>

        <nav x-show="abrir" x-on:click.away="cerrar()"> <!-- away para cuando se pulse fuera del nav -->
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </nav>
    </div>

    <script>
        function getData() {
            return {
                abrir: null,
                iniciar() {
                    this.abrir = false
                },
                checkOpen() {
                    this.abrir = !this.abrir
                },
                cerrar() {
                    this.abrir = false
                }
            }
        }
    </script>


Incluir CKEditor pero usando Alpine y que lo almacene en la propiedad que queramos

En el layout que estemos usando (por ejemplo resources\views\layouts\admin.blade.php) incluir el CDN:
<script src="https://cdn.ckeditor.com/ckeditor5/28.0.0/classic/ckeditor.js"></script>
En el componente definimos la propiedad $description.

Y en la view:
<div class="mb-4" wire:ignore>
    <x-jet-label value="Descripción"></x-jet-label>
    <textarea
        class="w-full form-control"
        wire:model="description"
        x-data="" x-init="ClassicEditor.create($refs.editorLSG)
        .then(function(editor) {
                editor.model.document.on('change:data', () => {
                    @this.set('description', editor.getData())
                })
        })
        .catch( error => {
            console.error( error );
        });"
        x-ref="editorLSG"
        rows=4>
    </textarea>
</div>