Skip to main content
This guide explains how to use the GlobalSearchController and register Vue components for search results.

​
Configuring GlobalSearchController

The GlobalSearchController allows you to register models that can be searched.

​
Location

The controller file is located at: 
app/Http/Controllers/Api/GlobalSearchController.php

​
Example Code

Here is the default implementation of the controller: 
<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Team;
use App\Models\User;
use Illuminate\Http\Request;
use VelureLabs\VelureCms\Facades\GlobalSearch;

class GlobalSearchController extends Controller
{
    /**
     * Handle the incoming request.
     */
    public function __invoke(Request $request)
    {
        GlobalSearch::registerModel(User::class, ['name', 'email']);
        GlobalSearch::registerModel(Team::class, ['name']);

        return GlobalSearch::handleSearchRequest($request);
    }
}
To add new models to the global search, use the GlobalSearch::registerModel method. For example: 
GlobalSearch::registerModel(Post::class, ['name', 'content']);
Replace Post::class with the name of your model and specify the attributes to include in the search.

​
Registering Vue Components for Search Results

After setting up the controller, register Vue components to display the search results.

​
Location

Register Vue components in: 
resources/js/app.js

​
Example Registration

Add your component to the globalSearchComponents section: 
globalSearchComponents: {
    User: UserResult,
    Team: TeamResult, // Example for a new component
}

​
Example Vue Component

Below is an example Vue component for displaying search results. Use the Link component from Inertia.js to link to the resource. 
<template>
    <Link :href="url" class="mb-2">
        <div class="bold">{{ name }}</div>
        <div class="truncate text-xs text-gray-500 italic">{{ email }}</div>
    </Link>
</template>

<script setup>
import { Link } from '@inertiajs/vue3';

defineProps({
    email: String,
    name: String,
    url: String,
});
</script>

​
Adding New Vue Components

To add a new Vue component:
  1. Create a new Vue file in the appropriate folder (e.g., resources/js/components).
  2. Follow the example structure above.
  3. Register the component in app.js.

​
Final Notes

  • Ensure that your models and Vue components are properly linked.
  • Test your implementation by performing a search.
For further assistance, refer to the project documentation or contact the maintainers.