The #[Js] attribute designates methods that return JavaScript code to be executed on the client-side. Methods marked with #[Js] can be called directly from your templates without making a server request.
Apply the #[Js] attribute to methods that return JavaScript expressions:
<?php // resources/views/components/post/âš¡create.blade.php
use Livewire\Attributes\Js;
use Livewire\Component;
new class extends Component {
public $title = '';
public $content = '';
#[Js] // [tl! highlight:start]
public function resetForm()
{
return <<<'JS'
$wire.title = ''
$wire.content = ''
JS;
} // [tl! highlight:end]
};<form wire:submit="save">
<input wire:model="title" placeholder="Title">
<textarea wire:model="content" placeholder="Content"></textarea>
<button type="submit">Save</button>
<button type="button" @click="$wire.resetForm()">Reset</button> <!-- [tl! highlight] -->
</form>When $wire.resetForm() is called, the JavaScript executes directly in the browser — no server round-trip occurs.
If you need to execute JavaScript after a server action completes, use the js() method instead:
<?php // resources/views/components/post/âš¡create.blade.php
use Livewire\Component;
use App\Models\Post;
new class extends Component {
public $title = '';
public function save()
{
Post::create(['title' => $this->title]);
$this->js("alert('Post saved successfully!')"); // [tl! highlight]
}
};The js() method queues JavaScript to be executed when the server response arrives.
You can access the component's $wire object inside JavaScript expressions:
#[Js]
public function resetForm()
{
return <<<'JS'
$wire.title = ''
$wire.content = ''
JS;
}Use #[Js] when you need to:
There's an important distinction:
#[Js] methods are defined in PHP and return JavaScript code. They are called via $wire.methodName() without making a server request.$js.methodName) are defined entirely in JavaScript using @script blocks.Both approaches execute JavaScript on the client without a server round-trip. The difference is where the JavaScript code is defined.
<?php // resources/views/components/âš¡example.blade.php
use Livewire\Attributes\Js;
use Livewire\Component;
new class extends Component {
public $count = 0;
// JavaScript defined in PHP
#[Js]
public function showCount()
{
return "alert('Count is: {$this->count}')";
}
};<div>
<button @click="$wire.showCount()">Show Count (from PHP)</button>
<button @click="$js.incrementLocal()">Increment Local (from JS)</button>
</div>
@script
<script>
// JavaScript defined in JavaScript
$js('incrementLocal', () => {
console.log('No server request made')
})
</script>
@endscriptFor more information about JavaScript integration in Livewire, see: