June 4, 2024

Setting Up Mingle JS in JetStream Livewire Laravel

> A comprehensive guide to setting up Mingle JS with JetStream Livewire in Laravel, including detailed installation steps, configuration, and customization.

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:

bash

composer create-project laravel/laravel example-appcd example-appcomposer 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.

bash

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:

bash

npm installnpm run buildphp 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:

bash

npm run build

Setting Up Mingle

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

Installing Mingle

Use Composer to install Mingle:

bash

composer require ijpatricio/mingle

Installing Frontend Dependencies

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

For Vue:

bash

npm i vue @vitejs/plugin-vue

For React:

bash

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

Installing Mingle

To install Mingle, run the following Artisan command:

bash

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:

bash

php artisan make:mingle

To avoid interactive questions, you can pass options directly:

bash

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

<?phpnamespace 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!