Inline Scripts

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.

<div>
    <!-- Your components HTML -->

    <script>
        document.addEventListener('livewire:load', function () {
            // Your JS here.
        })
    </script>
</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:

<!-- Your component's view here -->

@push('scripts')
<script>
    // Your JS here.
</script>
@endpush

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:

<script>
    document.addEventListener('livewire:load', function () {
        // Get the value of the "count" property
        var someValue = @this.count

        // Set the value of the "count" property
        @this.count = 5

        // Call the increment component action
        @this.increment()

        // Run a callback when an event ("foo") is emitted from this component
        @this.on('foo', () => {})
    })
</script>

Note: the @this directive compiles to the following string for JavaScript to interpret: "Livewire.find([component-id])"

← Previous Topic

Laravel Echo

Next Topic →

Inline Scripts

Accessing the JavaScript component instance

Laravel Echo

Testing