Skip to main content
This guide explains how to integrate the @robojuice/velure-ui package into an Inertia.js application with Laravel and Vue 3.

​
Full Code Block

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!