Introduction
Laravel Livewire is a library that makes it simple to build modern, reactive, dynamic interfaces using Laravel Blade as your templating language. This is a great stack to choose if you want to build an application that is dynamic and reactive but don't feel comfortable jumping into a full JavaScript framework like Vue.js.
When using Livewire, your application's routes will respond with typical Blade templates. However, within these templates you may render Livewire components as necessary:
<div class="mt-4">
@livewire('server-list')
</div>When using the Livewire stack, Jetstream has some unique features that you should be aware of. We will discuss each of these features below.
Livewire Documentation
Before using the Livewire stack, you are strongly encouraged to review the entire Livewire documentation.
Components
While building the Jetstream Livewire stack, a variety of Blade components (buttons, panels, inputs, modals) were created to assist in creating UI consistency and ease of use. You are free to use or not use these components. However, if you would like to use them, you should publish them using the Artisan vendor:publish command:
php artisan vendor:publish --tag=jetstream-viewsYou may gain insight into how to use these components by reviewing their usage within Jetstream's existing views located within your resources/views directory.
Modals
Most of the Jetstream Livewire stack's components have no communication with your backend. However, the Livewire modal components included with Jetstream do interact with your Livewire backend to determine their open / closed state. In addition, Jetstream includes two types of modals: dialog-modal and confirmation-modal. The confirmation-modal may be used when confirming destructive actions such as deletions, while the dialog-modal is a more generic modal window that may be used at any time.
To illustrate the use of modals, consider the following modal that confirms a user would like to delete their account:
<x-jet-confirmation-modal wire:model="confirmingUserDeletion">
<x-slot name="title">
Delete Account
</x-slot>
<x-slot name="content">
Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted.
</x-slot>
<x-slot name="footer">
<x-jet-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
Nevermind
</x-jet-secondary-button>
<x-jet-danger-button class="ml-2" wire:click="deleteUser" wire:loading.attr="disabled">
Delete Account
</x-jet-danger-button>
</x-slot>
</x-jet-confirmation-modal>As you can see, the modal's open / close state is determined by a wire:model property that is declared on the component. This property name should correspond to a boolean property on your Livewire component's corresponding PHP class. The modal's contents may be specified by hydrating three slots: title, content, and footer.
Original Web-site:
https://jetstream.laravel.com/1.x/stacks/livewire.html
