Use Vue or React Components in a Livewire App with MingleJS

MingleJS is a helper for using Vue and React components in a Livewire or Filament application. Created by Joao Patricio, this package is useful for landing pages and complex components where you want to use Vue or React. It can also be used as an incremental way to adopt Livewire or utilize third-party components in the Vue or React ecosystem.

MingleJS works by rendering a <div> on the server side and then mounts a component on the client side. A server-side Livewire component renders each JS component, so you get JavaScript interactivity on the front end that is isolated to your Livewire component. Additionally, the backend can pass data to the component available on the front end.

namespace App\Livewire;
 
use Ijpatricio\Mingle\Concerns\InteractsWithMingles;
use Ijpatricio\Mingle\Contracts\HasMingles;
use Livewire\Component;
 
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 🍾',
        ];
    }
 
    // ...
}

A mingle includes a Livewire component that uses the InteractsWithMingles trait, a glue JavaScript file, and the frontend component file. Here's an example of what the Mingle component might look like using React:

// resources/js/ChatApp/index.js
import mingle from '@mingle/mingleReact'
import ChatApp from './ChatApp.jsx'
 
mingle('resources/js/ChatApp/index.js', ChatApp)
 
// resources/js/ChatApp/ChatApp.jsx
import React from 'react'
 
function ChatApp({wire, ...props}) {
 
    const message = props.mingleData.message
 
    console.log(message) // 'Message in a bottle 🍾'
 
    wire.doubleIt(2)
        .then(data => {
            console.log(data) // 4
        })
 
    return (
        <div>
            {/* <!-- Create something great! --> */}
        </div>
    )
}
 
export default ChatApp

#Learn More

To get started with MingleJS, head over to the MingleJS documentation. The author of MingleJS has also provided an open-source MingleJS demo app, and a live demo if you want to kick the tires.