Livewire makes it extremely easy to use Vue components inside your Livewire components, and it even goes a step further and interfaces with them directly!

Let's say we have a <loading-spinner> Vue component, and we want to use it in our Livewire component.

    <button wire:click="checkout">Checkout</button>

    <loading-spinner wire:loading></loading-spinner>

That's it!

In order to use Livewire with Vue a window.Vue object must be made available to Livewire.

Binding data to Vue components

We can even take this integration a step further and actually bind Livewire properties to Vue components.

Let's assume we have a custom Vue component that we typically use for "taggable" input fields called <input-taggable></input-taggable>. Normally, inside Vue, you would bind data to this component like so:

<input-taggable v-model="names"></input-taggable>

Alternatively, it is possible to instead bind Livewire properties to custom Vue components like so:

<input-taggable wire:model="names"></input-taggable>

Livewire will listen for "input" events emitted from the Vue component, and pass down "value" properties just like Vue does. It just works.

← Previous Topic

Inline Scripts

Next Topic →

Third-Party Libraries