https://github.com/bastinald/laravel-livewire-modals

Dynamic Laravel Livewire Bootstrap modals.
https://github.com/bastinald/laravel-livewire-modals

bootstrap component dynamic laravel laravel-livewire laravel-livewire-modals livewire livewire-component modals php

Last synced: 25 days ago
JSON representation

Dynamic Laravel Livewire Bootstrap modals.

• Host: GitHub
• URL: https://github.com/bastinald/laravel-livewire-modals
• Owner: bastinald
• Created: 2021-05-09T19:10:18.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-05-30T04:42:34.000Z (5 months ago)
• Last Synced: 2024-10-01T09:22:54.980Z (about 1 month ago)
• Topics: bootstrap, component, dynamic, laravel, laravel-livewire, laravel-livewire-modals, livewire, livewire-component, modals, php
• Language: PHP
• Homepage:
• Size: 17.6 KB
• Stars: 67
• Watchers: 1
• Forks: 32
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Laravel Livewire Modals

This package allows you to dynamically show your Laravel Livewire components inside Bootstrap modals.

## Documentation

- [Requirements](#requirements)

- [Installation](#installation)

- [Usage](#usage)

    - [Modal Views](#modal-views)

    - [Showing Modals](#showing-modals)

    - [Mount Parameters](#mount-parameters)

    - [Hiding Modals](#hiding-modals)

    - [Emitting Events](#emitting-events)

- [Publishing Assets](#publishing-assets)

    - [Custom View](#custom-view)

## Requirements

- Bootstrap 5 must be installed via webpack first

## Installation

Require the package:

```console

composer require bastinald/laravel-livewire-modals

```

Add the `livewire:modals` component to your app layout view:

```html

```

Require `../../vendor/bastinald/laravel-livewire-modals/resources/js/modals` in your app javascript file:

```javascript

require('@popperjs/core');

require('bootstrap');

require('../../vendor/bastinald/laravel-livewire-modals/resources/js/modals');

```

## Usage

### Modal Views

Make a Livewire component you want to show as a modal. The view for this component must use the Bootstrap `modal-dialog` container:

```html



    


        


            
Modal title

            

        

        


            
Modal body text goes here.

        

        


            Close

            Save changes

        

    



```


### Showing Modals

Show a modal by emitting the `showModal` event with the component alias:

```html

    {{ __('Update Profile') }}

```

### Mount Parameters

Pass parameters to the component `mount` method after the alias:

```html

    {{ __('Update User #' . $user->id) }}

```

The component `mount` method for the example above would look like this: 

```php

namespace App\Http\Livewire\Users;

use App\Models\User;

use Livewire\Component;

class Update extends Component

{

    public $user;

    

    public function mount(User $user)

    {

        $this->user = $user;

    }

    

    public function render()

    {

        return view('users.update');

    }

}

```

### Hiding Modals

Hide the currently open modal by emitting the `hideModal` event:

```html

    {{ __('Close') }}

```

Or by using the Bootstrap `data-bs-dismiss` attribute:

```html

    {{ __('Close') }}

```

### Emitting Events

You can emit events inside your views:

```html

    {{ __('Close') }}

```

Or inside your components, just like any normal Livewire event:

```php

public function save()

{

    $this->validate();

    // save the record

    $this->emit('hideModal');

}

```

## Publishing Assets

### Custom View

Use your own modals view by publishing the package view:

```console

php artisan vendor:publish --tag=laravel-livewire-modals:views

```

Now edit the view file inside `resources/views/vendor/laravel-livewire-modals`. The package will use this view to render the component.