Inline Scripts

Be amazing at Livewire
with our in-depth screencasts. Watch Now

Introduction
Using the @js directive
Accessing the JavaScript component instance

Introduction

Livewire recommends that you use AlpineJS for most of your JavaScript needs, but it does support using <script> tags directly inside your component's view.

        1<div>
2    <!-- Your components HTML -->
3 
4    <script>
5        document.addEventListener('livewire:load', function () {
6            // Your JS here.
7        })
8    </script>
9</div>

Please note that your scripts will be run only once upon the first render of the component. If you need to run a JavaScript function later - emit the event from the component and listen to it in JavaScript as described here)

You can also push scripts directly onto Blade stacks from your Livewire component:

        1<!-- Your component's view here -->
2 
3@push('scripts')
4<script>
5    // Your JS here.
6</script>
7@endpush

Using the `@js` directive

If ever you need to output PHP data for use in Javascript, you can now use the @js directive.

        1<script>
2    let posts = @js($posts)
3 
4    // "posts" will now be a JavaScript array of post data from PHP.
5</script>

Accessing the JavaScript component instance

Because Livewire has both a PHP AND a JavaScript portion, each component also has a JavaScript object. You can access this object using the special @this blade directive in your component's view.

Here's an example:

         1<script>
 2    document.addEventListener('livewire:load', function () {
 3        // Get the value of the "count" property
 4        var someValue = @this.count
 5 
 6        // Set the value of the "count" property
 7        @this.count = 5
 8 
 9        // Call the increment component action
10        @this.increment()
11 
12        // Run a callback when an event ("foo") is emitted from this component
13        @this.on('foo', () => {})
14    })
15</script>