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.

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:

composer create-project laravel/laravel example-app
cd example-app
composer 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.

php artisan jetstream:install livewire 
php 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:

npm install
npm run build
php 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:

npm run build

Setting Up Mingle

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

Installing Mingle

Use Composer to install Mingle:

composer require ijpatricio/mingle

Installing Frontend Dependencies

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

For Vue:

npm i vue @vitejs/plugin-vue

For React:

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

Installing Mingle

To install Mingle, run the following Artisan command:

php 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:

php artisan make:mingle

To avoid interactive questions, you can pass options directly:

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

Customizing Livewire Components

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

<?php

namespace App\Livewire;

use Ijpatricio\Mingle\Concerns\InteractsWithMingles;
use Ijpatricio\Mingle\Contracts\HasMingles;
use Livewire\Component;

#[Layout('layouts.guest')]  // or #[Layout('layouts.app')]
class ChatApp extends Component implements HasMingles
{
    use InteractsWithMingles;

    public function component(): string
    {
        return 'resources/js/ChatApp/index.js';
    }

    public function mingleData()
    {
        return [
            'message' => 'Message in a bottle 🍾',
        ];
    }

    public function doubleIt($amount)
    {
        return $amount * 2;
    }
}

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!