This project is a reproduction of the issue described here
steps to reproduce:
-
ensure docker + docker-compose are installed and working on your system
-
clone the project and enter the livewire-refresh folder
-
install npm and composer dependencies
composer installnpm install- start Laravel sail service, that will set up the docker containers:
./vendor/bin/sail up -d- start vite server
./vendor/bin/sail npm run dev-
open your browser at http://localhost
-
you will see a simple page with a basic livewire component that greets you when you type your name in the field
-
type your name in the text field
-
an "Hello message appears"
-
let's say you want to style the greetings message, to do so open the .blade file in
resources/views/livewire/hello-world.blade.php -
at the line 12, add a new tailwind class to the
div:
<div class="p-10 relative flex items-center justify-center">
<div class="flex flex-col items-center space-y-3">
<h1 class="font-bold text-xl">Hello World!</h1>
<span>Pleas enter your name:</span>
<div>
<input class="border-2" type="text" wire:model="name"/>
</div>
@if($name)
- <div class="text-lg">Hello {{$name}}</div>
+ <div class="text-lg text-red-500">Hello {{$name}}</div>
@endif
</div>
</div>- in your browser, you will see that the page had a full refresh and the livewire component has been reset to its initial state, compelling you to type again your name to see the result
bonus
if you comment out this code in node_modules/vite/dist/node/chunks/dep-71eeb12cb.js (the file may change):
// #3716, #3913
// For a non-CSS file, if all of its importers are CSS files (registered via
// PostCSS plugins) it should be considered a dead end and force full reload.
if (!isCSSRequest(node.url) &&
[...node.importers].every((i) => isCSSRequest(i.url))) {
return true;
}you will see that you can easily change the hello-world.blade.php and immediately see the results, without having to re-type your name again