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.
Before using the Livewire stack, you are strongly encouraged to review the entire Livewire documentation
When we created 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
php artisan vendor:publish --tag=jetstream-views
You may gain insight into how to use these components by reviewing their usage within Jetstream's existing views located within your application's
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:
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. The property's name should correspond to a boolean property on your Livewire component's corresponding PHP class. Typically, you will set this property to
true when the user clicks a UI element in your application that should open the modal. Of course, the property should be set to
false when you are ready to close the modal.
The modal's contents may be specified by hydrating three Blade component slots: