Event listeners are not firing

#1

What seems to be the problem:

I am currently using an event emitter to render some Javascript to show a Stripe credit card input. The desired outcome is to show a modal and then render the credit card input using a Javascript event listener.

Steps to Reproduce:

I have a button like so to show a Jetstream modal:

<x-jet-secondary-button type="button" wire:click="showCreateModal">Show</x-jet-secondary-button>

Within the Livewire component this is method:

public function showCreateModal()
{
    $this->emit('loadCard');

    $this->showCreate = true;
}

And then this is the Javascript event listener:

<script type="text/javascript">
        var STRIPE = Stripe('{{ config("cashier.key") }}');
        var elements = STRIPE.elements();

        Livewire.on('loadCard', function () {
            setTimeout(function() {
                var card = elements.create('card');
                card.mount('#card-element');
            }, 500)
        });
</script>

I have tried 3 or 4 different versions and so far no luck. Any help/feedback would be appreciated.

Are you using the latest version of Livewire: Yep

#2

Found the issue. I was loading Vue into the page on top of the @livewireScripts blade directive. By removing Vue, resolved the issue.