Routing

Overview

As opposed to single-page applications, endpoints do not need to be redefined on the front-end. Vue Router is not needed — simply define your routes in routes/*.php like you would do with normal Laravel applications.

The only catch is to return a hybrid view instead of a Blade view. This is done by using the hybridly or Hybridly\view functions:

use App\Data\UserData;
use App\Models\User;

class ShowUserController
{
    public function __invoke(User $user)
    {
        return view('users.show', [
        return hybridly('users.show', [
            'user' => UserData::from($user)
        ]);
    }
}

Learn more about sending responses in the their documentation.

Generating URLs

Since views are written in single-file components, global Laravel or PHP functions like route are not available.

Instead, you may use Hybridly's route util. This function is typed and its typings are updated live as your routes/*.php files are saved.

// routes/web.php
Route::get('/', ShowIndexController::class)
  ->name('index')

Route::get('/users/{user}', [UsersController::class, 'show'])
  ->name('users.show')

// In a .vue or .ts file
route('index')
route('users.show', { user: 1 })

Reactivity

The route function is not reactive, in the sense that it returns a string, not a Ref<string>.

Excluding or including routes

By default, vendor routes are not made available to the front-end and will not appear when using the route util.

This can be configured by updating the router.allowed_vendors key in config/hybridly.php.

return [
      'router' => [
        'allowed_vendors' => [
            'laravel/fortify',
        ],
        'exclude' => [],
    ],
];

Additionally, you may exclude specific routes by adding patterns to the router.exclude key. These filters are matched against the final URI, and support wildcards.

return [
      'router' => [
        'allowed_vendors' => [],
        'exclude' => [
            'admin*'
        ],
    ],
];