Call Actions, emit and listen for Events, and more - all from Vanilla JavaScript.

CBWIRE provides a handful of JavaScript hooks and functionality you can use as needed.

Inline JavaScript

We recommend you use AlpineJS for most of your JavaScript needs, but you can use <script> tags directly inside your components.

    <!--- Your component's template --->
        document.addEventListener('livewire:load', function () {
            // Your JS here.

Your scripts will be run only once upon the first render of the component. If you need to run a JavaScript function later, you can emit the Event from the component and listen to it in JavaScript.

Lifecycle Hooks

CBWIRE allows you to execute JavaScript during various events.



Called when a component has been initialized on the page by CBWIRE


Called when CBWIRE initializes an individual element


Called before CBWIRE updates an element during its DOM-diffing cycle after a network roundtrip


Called after CBWIRE updates an element during its DOM-diffing cycle after a network roundtrip


Called after CBWIRE removes an element during its DOM-diffing cycle


Called when a CBWIRE update triggers a message sent to the server via AJAX


Called if the message send fails for some reason


Called when a message has finished its roundtrip, but before CBWIRE updates the DOM


Called after CBWIRE processes all side effects (including DOM-diffing) from a message

        <!-- HTML goes here -->
            document.addEventListener("DOMContentLoaded", () => {
                cbwire.hook('component.initialized', (wire) => {})
                cbwire.hook('element.initialized', (el, wire) => {})
                cbwire.hook('element.updating', (fromEl, toEl, wire) => {})
                cbwire.hook('element.updated', (el, wire) => {})
                cbwire.hook('element.removed', (el, wire) => {})
                cbwire.hook('message.sent', (message, wire) => {})
                cbwire.hook('message.failed', (message, wire) => {})
                cbwire.hook('message.received', (message, wire) => {})
                cbwire.hook('message.processed', (message, wire) => {})

    <!--- Component definition goes here --->

Component Interaction

You can interact with your component's actions, set data properties, and more, using cbwire.find. Once you have a reference to the component, you can use the methods below.

        <!-- HTML goes here -->
            document.addEventListener("livewire:load", function() {
                // _id contains the id of our wire
                var component = cbwire.find('#_id#');
                // gets the value of a data property called 'count'
                var count = component.count;
                // updates the values of a data property
                component.count = 5;
                // calls the increment action on our wire
                // calls the addTask action and passes parameters   
                component.addTask( 'someTask' ); 
                // same as increment call above
       'increment' ); 
                // On someEvent, console log
                component.on( 'someEvent', function() {
                    console.log('Got someEvent');
                } );
                // emits someEvent and pass parameters
                component.emit('someEvent', 'foo', 'bar');
            } );

Last updated