Fusion: PHP and JavaScript in a New Dimension

Introduction

Web development is evolving rapidly, and we are constantly searching for more efficient ways to integrate the backend with the frontend. Fusion arrives as a revolutionary solution to unite Laravel with Vue.js and React, allowing developers to write PHP code directly within frontend components.

Imagine being able to declare variables, methods, and logic in PHP inside a Vue or React file without needing APIs, controllers, or additional routes. Fusion makes this possible, breaking the barrier between the backend and the frontend.

🚀 What is Fusion, and Why Should You Care?

Fusion is a library in development that enables PHP code inside .vue and .jsx files, simplifying communication between Laravel and the frontend without relying on REST APIs or GraphQL.

With Fusion, you can:

✅ Write PHP inside Vue or React without extra configuration.
✅ Synchronize state between frontend and backend efficiently.
✅ Call PHP methods directly from the frontend without defining endpoints.
✅ Use Laravel's lifecycle with authentication, middleware, and routing.

Example of a Vue component with embedded PHP:

<php>
  // Define a variable in PHP
  $name = prop(Auth::user()->name);
</php>

<template>
  <h1>Hello {{ name }}!</h1>
</template>

Here, $name is defined in PHP and automatically sent to the frontend, without needing to define props in Vue.

🔥 How Does Fusion Work?

Fusion uses Vite to process .vue or .jsx files, extracting PHP code and executing it in Laravel. This means:

1️⃣ The backend still runs PHP in Laravel as usual.
2️⃣ The frontend receives state from PHP, without manually defining props.
3️⃣ You can write procedural or class-based PHP inside the <php> block.

Example using a PHP class:

<php>
  new class {
    public string $name;

    public function mount()
    {
      $this->name = Auth::user()->name;
    }
  }
</php>

<template>
  <h1>Hello {{ name }}!</h1>
</template>

This structure turns the class into a Laravel-style controller inside the frontend, enabling data synchronization without an external API.

🎯 Key Benefits of Fusion

🔹 Eliminates unnecessary APIs: No need to define controllers or endpoints to sync data between Laravel and Vue/React.
🔹 Boosts productivity: Allows full-stack developers to write less code and manage state more easily.
🔹 Seamless Laravel integration: Compatible with Laravel’s routing, middleware, and authentication.
🔹 Effortless state synchronization: Fusion enables backend-to-frontend data sharing with no extra code.
🔹 Clearer logic flow: Backend logic can live in the same file as the UI without losing organization.

🛠️ Installation and Getting Started

Fusion is installed as a Composer package in Laravel:

composer require fusionphp/fusion

Then, run the installation command:

php artisan fusion:install

This sets up Fusion with Vite and Vue/React automatically.

To start your project with Fusion, simply run:

npm run dev

And that’s it—now you can write PHP inside Vue/React without extra configurations.

🔮 The Future of Fusion: What’s Next?

Fusion is still in early development, but it promises to be one of the most innovative tools for Laravel. In the coming months, we can expect:

🔹 Support for React and Svelte.
🔹 Better integration with Inertia.js.
🔹 Performance and security optimizations.

Fusion is redefining how the frontend and backend interact in Laravel, removing unnecessary barriers and making data synchronization faster and easier than ever.

🏆 Conclusion

Fusion is a revolutionary tool that brings Laravel and Vue/React closer than ever. Thanks to its seamless integration, developers can write less code and manage state without additional APIs.

If you work with Laravel and Vue/React, Fusion is a technology you definitely need to try! 🚀

🔗 GitHub Repository:
👉 https://github.com/fusion-php/fusion

📢 What do you think about Fusion? Do you believe it will change how we work with Laravel and Vue/React?