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*'
],
],
];