<script> tag inside the component's root div. For example:
<div> <script>alert('Hello World');</script> </div>
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.
<div> <button wire:click="checkout">Checkout</button> <loading-spinner wire:loading></loading-spinner> </div>
window.Vueobject 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:
Alternatively, it is possible to instead bind Livewire properties to custom Vue components like so:
Livewire will listen for "input" events emitted from the Vue component, and pass down "value" properties just like Vue does. It just works.
Building and using Web Components is outside the scope of this documentation, but the lit-element project is a great starting point for writing and using web components easily.