> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Global Search

> GlobalSearch Integration Documentation

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 theme={null}
<?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);
    }
}
```

### Adding New Models to Search

To add new models to the global search, use the `GlobalSearch::registerModel` method. For example:

```php theme={null}
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:

```javascript theme={null}
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.

```vue theme={null}
<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.