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 Demo Component
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 AppLivewire;
use IjpatricioMingleConcernsInteractsWithMingles;
use IjpatricioMingleContractsHasMingles;
use LivewireComponent;
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.
The post Use Vue or React Components in a Livewire App with MingleJS appeared first on Laravel News.
Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.
Source: Read MoreÂ
