Fusion Developer Preview is released: Write PHP inside your Vue and React components

Aaron Francis and Try Hard Studios just officially launched Fusion and you can find it on Github!

Fusion is the simplest way to combine your modern JavaScript frontend with your Laravel backend. Send state from your backend to your frontend, declare methods on the backend that can be called without API endpoints from your frontend. Fusion simplifies the process of working with JavaScript in Laravel, while still giving you full control and the full power of a batteries-included backend.

A few days ago, Aaron sat down with me to record a podcast about Fusion, where the idea originated, and more. Give it a listen:

Introduction to Fusion

Aaron also has a video out covering the basics of Fusion and some of the features:

Highlights include:

Write PHP and JavaScript in the same file.
Call backend functions directly from the frontend.
Automatically sync state between your backend and frontend.

Please Note Fusion is in a very early development preview. Please do not use it in production yet! There are still lots of bugs (probably.)

Fusion Concepts

The readme notes that it is important to note up front what Fusion does not do:

Fusion does not transpile your PHP to WASM.
Fusion does not turn your JavaScript into PHP/Blade.
Fusion does not use the "PHP for templating."
Fusion does not automatically sync frontend/backend state.

What Fusion does do:

Fusion uses Vite to extract the PHP blocks from your JavaScript files and writes the PHP to disk.
Fusion uses Vite to inject some information into your JavaScript file as it is being transpiled.
Fusion runs your PHP on the backend and your JavaScript on the frontend.
Fusion turns your PHP block into a sort of controller.
Fusion uses the standard Laravel request/response lifecycle, router, auth, middleware, etc.
Fusion allows you to sync frontend/backend state.

You can think of the <php> block in your file as your controller, with a little bit of auto-wiring applied to inject state and call methods.

Basic Fusion Example

<php>
  // Define a prop in PHP
  $name = prop(Auth::user()->name);
</php>
 
<template>
  <!-- Use it in Vue! -->
  Hello {{ name }}!
</template>

This exposes the $name variable to your Vue template as name. It will be passed down to the frontend upon first load. You do not need to define any props on the Vue side, we take care of that for you.

You can also do class based style:

<php>
new class {
  public string $name;
 
  public function mount()
  {
     $this->name = Auth::user()->name;
  }
}
</php>
 
<template>
  Hello {{ name }}!
</template>