Setting Up Mingle JS in JetStream Livewire Laravel

JetStream Livewire is a powerful stack in Laravel that provides a full-featured authentication system with support for teams, profile management, and more. In this guide, we'll walk through the steps to set up Mingle with JetStream Livewire, ensuring you have all the necessary configurations and customizations for a smooth integration.

::badge{type="success"} JetStream ♥️ Livewire ♥️ MingleJS ::

Installation

Installing JetStream

To begin, we need to install JetStream in a new Laravel project. Use Composer to create a new Laravel project and install JetStream:

1composer create-project laravel/laravel example-app
2cd example-app
3composer require laravel/jetstream

After installing the JetStream package, execute the jetstream:install Artisan command. This command accepts the name of the stack you prefer (livewire or inertia). You may also use the --teams switch to enable team support.

1php artisan jetstream:install livewire 
2php artisan jetstream:install livewire --teams # Or for team support

JetStream is designed for new Laravel applications. Installing it in an existing application may lead to unexpected behavior.

Finalizing the JetStream Installation

After installing JetStream, install and build your NPM dependencies and migrate your database:

1npm install
2npm run build
3php artisan migrate

Customizing the Application Logo

If you're using the Livewire stack, customize the SVGs located in the following Blade components:

• resources/views/components/application-logo.blade.php
• resources/views/components/application-mark.blade.php
• resources/views/components/authentication-card-logo.blade.php

After making these changes, rebuild your assets:

1npm run build

Setting Up Mingle

Next, we will set up Mingle in our Laravel application.

Installing Mingle

Use Composer to install Mingle:

1composer require ijpatricio/mingle

Installing Frontend Dependencies

Depending on whether you prefer Vue or React, install the necessary dependencies.

For Vue:

1npm i vue @vitejs/plugin-vue

For React:

1npm i @vitejs/plugin-react react react-dom

Installing Mingle

To install Mingle, run the following Artisan command:

1php artisan mingle:install

Creating Mingles

To create a new Mingle, use the make:mingle command. This command will prompt you for the details of the Mingle you want to create:

1php artisan make:mingle

To avoid interactive questions, you can pass options directly:

1php artisan make:mingle react ChatApp --jsfile=resources/js/Foo.js

Customizing Livewire Components

Let's look at a component's class with Mingle integration:

1<?php
2
3namespace App\Livewire;
4
5use Ijpatricio\Mingle\Concerns\InteractsWithMingles;
6use Ijpatricio\Mingle\Contracts\HasMingles;
7use Livewire\Component;
8
9#[Layout('layouts.guest')]  // or #[Layout('layouts.app')]
10class ChatApp extends Component implements HasMingles
11{
12    use InteractsWithMingles;
13
14    public function component(): string
15    {
16        return 'resources/js/ChatApp/index.js';
17    }
18
19    public function mingleData()
20    {
21        return [
22            'message' => 'Message in a bottle 🍾',
23        ];
24    }
25
26    public function doubleIt($amount)
27    {
28        return $amount * 2;
29    }
30}

Conclusion

Congratulations! You have successfully set up Mingle with JetStream Livewire in your Laravel application. By following the steps outlined in this guide, you've installed and configured JetStream, customized your application logo, and created your first Mingle component. This setup will enhance your application's interactivity and user experience, leveraging the power of Livewire and Mingle.

Remember to explore the documentation of Livewire and Mingle for more advanced features and best practices. Happy coding!