> ## 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.

# Inertia Setup

> If you are using Velure CMS or just plain Inertia.

This guide explains how to integrate the `@robojuice/velure-ui` package into an [Inertia.js](https://inertiajs.com/) application with [Laravel](https://laravel.com) and [Vue 3](https://vuejs.org/).

***

## Full Code Block

```js theme={null}
import './bootstrap';
import '../css/app.css';

import {VelureVuePlugin} from '@robojuice/velure-ui';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import {} from "pinia";
import UserResult from "@/Components/Search/UserResult.vue";

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => \`\${title} - \${appName}\`,
    resolve: (name) => resolvePageComponent(\`./Pages/\${name}.vue\`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(VelureVuePlugin, (app) => {
                return {
                    globalSearchQuery: async (query) => {
                        // get the route using Ziggy
                        const route = app.config.globalProperties.route('api.global-search');
                        const response = await axios.get(route, {params: {query}});

                        response.data.data.sort((a, b) => {
                            if (a.type < b.type) { return -1; }
                            if (a.type > b.type) { return 1; }

                            return 0;
                        });

                        return response.data;
                    },
                    globalSearchComponents: {
                        User: UserResult,
                    }
                };
            })
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});
```

***

## Explanation

### 1. **Imports**

* **`bootstrap` and `app.css`**: Initialize JavaScript and CSS assets.
* **`VelureVuePlugin`**: Main plugin from `@robojuice/velure-ui` for integration.
* **`createApp` and `h`**: Core Vue 3 APIs to create and render the app.
* **`createInertiaApp`**: Helper function for simplifying Inertia.js app setup.
* **`resolvePageComponent`**: Utility to dynamically load Vue page components.
* **`ZiggyVue`**: Adds Laravel route helpers to the Vue app.
* **`pinia`**: Placeholder for future state management needs.
* **`UserResult`**: Vue component for rendering user-related search results.

***

### 2. **Application Name**

The app name is loaded from the `VITE_APP_NAME` environment variable, defaulting to `"Laravel"`. It's used to dynamically set document titles.

***

### 3. **Creating the Inertia App**

* **`createInertiaApp`**:
* **`title`**: Dynamically sets document titles based on the current page and app name.
* **`resolve`**: Dynamically loads page components using `resolvePageComponent`.

***

### 4. **Setting Up the Application**

The `setup` function initializes the Vue app and integrates the necessary plugins:

* **Inertia.js Plugin**: Enables smooth Inertia navigation.
* **ZiggyVue**: Adds Laravel route helpers (`route()`).
* **VelureVuePlugin**: Configures `velure-ui` for:
* **`globalSearchQuery`**: Defines a search handler:
* Constructs the API endpoint using Ziggy.
* Fetches search results with `axios`.
* Sorts results by type and returns the data.
* **`globalSearchComponents`**: Registers custom components (e.g., `UserResult`) for rendering search results.

***

### 5. **Mounting the App**

The app is mounted to the DOM element provided by Inertia.js.

***

### 6. **Progress Indicator**

Defines a progress bar with a custom color (`#4B5563`) to indicate page transitions.

***

## How It Works

1. **VelureVuePlugin**: Adds functionality for global search and component registration.
2. **Dynamic Page Loading**: Pages are loaded on demand using `resolvePageComponent`.
3. **Ziggy**: Simplifies route definitions within the app.
4. **Integration**: Combines Inertia.js, Laravel, Vue, and `velure-ui` into a cohesive setup.

***

## When to Use

This setup is ideal for integrating `@robojuice/velure-ui` in a Laravel project using Inertia.js and Vue 3, especially when implementing global search or other Velure-specific features.

Let me know if you have any questions or need further clarification!