Livewire

2024 laravel conf demo transfer big size to small size. https://www.youtube.com/watch?v=VmXbw9GU1SU&t=7484s 2:02:00 Start livewire ListPost.php public function render() { return view('livewire.list-post'); } public function t() { info('t'); } list-post.blade.php <div> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>List Post</h1> <div> <button wire:click="t" class="btn btn-primary">T</button> </div> <div style="height:100px; overflow: auto; margin-top: 30px;"> <livewire:all-post /> </div> </div> </div> </div> </div> AllPost.php About 5MB datas public $Posts; public function mount() { $this->Posts = collect(); for ($i = 0; $i < 10000; $i++) { $this->Posts->push(collect([ 'title' => 'Post Title ' . $i, 'content' => 'Post Content ' . $i, ])); } } public function render() { return view('livewire.all-post'); } all-post.blade.php ...

Before using LiveWire, JavaScript was always the language used for both frontend and backend development. When choosing a framework, one of the most important factors to consider is validation. Validation is a crucial and time-consuming aspect of development. It needs to be performed on the frontend, backend, and when modifying the database through input, update, or delete operations. In some cases, the validation process may be performed twice. Typically, the backend performs validation using the same language. This makes validation a reusable function. On the other hand, the frontend often uses JavaScript, which is a different language. ...

In liveiwre word some button action and alpine @click action be clicked, livewire 3 update (ajax) is different your think. Component public $test_input=1; public function tt() { info('tt'); info($this->test_input); } blade <div class="row row-cols-1 row-cols-md-3 g-4" x-data> <form wire:submit="tt"> <input type="text" wire:model='test_input'> <button type="submit">form type=submit</button> {{-- // update (ajax) --}} <button type="button">form type=button</button> {{-- // No update (ajax) --}} <button wire:click='tt; $wire.test_input=3;'>form wire:click</button> {{-- // update (ajax) and run twice --}} <button @click='$wire.tt; $wire.test_input=3;'>form @click</button> {{-- // update (ajax) and run twice --}} </form> <button type="submit">out form type=submit</button> {{-- // No update (ajax) --}} <button type="button">out form type=button</button> {{-- // No update (ajax) --}} <button wire:click='tt; $wire.test_input=3;'>out form wire:click</button> {{-- // update (ajax) --}} <button @click='$wire.tt; $wire.test_input=3;'>out form @click</button> {{-- // update (ajax) --}} </div> So be careful and try to understand ...

https://github.com/sueboy19/livewire_demo

winnmp for windows a. create project livewire (Database and user auto create livewire) b. https://winnmp.wtriple.com/tutorial/laravel update composer a. mkdir new directory "t" b. cd t c. https://getcomposer.org/download/ c1. php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" c2. php -r "if (hash_file('sha384', 'composer-setup.php') === '55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" c3. php composer-setup.php c4. php -r "unlink('composer-setup.php');" c5. mv composer.phar to C:\WinNMP\bin\composer cd \WinNMP\WWW\livewire a. delete index.php b. composer create-project --prefer-dist laravel/laravel . c. composer require laravel/ui d. composer install e. edit .env e1. DB_DATABASE=livewire DB_USERNAME=livewire f. php artisan ui bootstrap --auth g. php artisan migrate h. developer tools composer require doctrine/dbal composer require --dev barryvdh/laravel-ide-helper composer require --dev beyondcode/laravel-dump-server composer require --dev barryvdh/laravel-debugbar composer require --dev roave/security-advisories:dev-master php artisan vendor:publish --provider="BeyondCode\DumpServer\DumpServerServiceProvider" php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider" I. php artisan key:generate install node.js for windows a. https://nodejs.org/zh-tw/download b. npm install c. npm run dev ...