- How do I install MingleJS in a Laravel/Livewire project?
- Run `composer require ijpatricio/mingle` and follow the setup steps in the [official docs](https://minglejs.unitedbycode.com). Ensure you have Laravel 9+ and Livewire 2.x/3.x installed. For JS tooling, configure either Laravel Mix or Vite (recommended) to bundle your Vue/React components.
- Can I use MingleJS with Filament admin panels?
- Yes, MingleJS works with Filament. Embed Vue/React components in Filament panels or resources by using the `@mingle` directive in your Livewire-based Filament views. Pass Filament data (e.g., `$resource`, `$record`) as props to your JS components.
- What’s the performance impact of using MingleJS vs. Alpine.js?
- MingleJS adds minimal overhead since it mounts components only where needed (island architecture). Alpine.js is lighter for simple interactivity, but MingleJS excels for complex UIs. Benchmark your specific use case—test hydration time and bundle size with both tools to compare.
- How do I pass Livewire data to a Vue/React component?
- Use the `@mingle` directive in your Livewire component’s Blade template, e.g., `@mingle('TodoList', ['todos' => $todos])`. The data is automatically serialized and passed as props to your JS component. For reactive updates, use Livewire’s `$wire` helper inside your JS component.
- Does MingleJS support real-time features like Laravel Echo?
- Yes, MingleJS components can integrate with Laravel Echo/Pusher. Use Vue’s `watch` or React’s `useEffect` to listen for Echo events and update your component state. For example, listen to `Echo.channel('...').listen(...)` inside your JS component.
- What’s the migration path from Livewire-only to MingleJS?
- Start with a non-critical Livewire component (e.g., a settings panel). Replace its Blade/Alpine.js logic with a Vue/React component, using `@mingle` to pass data. Test hydration, prop updates, and edge cases. Roll out incrementally using feature flags or environment variables.
- Can I use MingleJS with Tailwind CSS?
- Absolutely. MingleJS components work seamlessly with Tailwind. Ensure your JS components import Tailwind directives (e.g., `@tailwind base` in Vue SFCs) and that your build tool (Vite/Mix) processes Tailwind CSS. Shared styles between Livewire and JS components will apply consistently.
- How do I debug issues when a MingleJS component fails to mount?
- Check the browser console for errors (e.g., missing dependencies, failed hydration). Verify your `@mingle` directive includes all required props. Use `window.$wire` in the browser console to test Livewire actions manually. For Vue/React errors, inspect the component’s error boundaries or devtools.
- What’s the difference between MingleJS and Livewire’s built-in Alpine.js support?
- Alpine.js is lightweight for simple interactivity, while MingleJS enables full Vue/React components with state management (Pinia/Redux), complex logic, and server actions via `$wire`. Use Alpine for quick tweaks and MingleJS for reusable, scalable UI components.
- Does MingleJS work with Laravel’s Inertia.js?
- No, MingleJS is designed specifically for Livewire. Inertia.js serves a different purpose—it bridges Laravel with React/Vue by proxying API requests. If you need both, consider using MingleJS for Livewire components and Inertia for full-page React/Vue apps.