Splitbutton without vue-router

[alierdem]

hi
i want to use splitbutton but it uses MenuModel which depends on vue-router. i am using primevue with laravel inertia. is there any way i can use it without vue router ?

[MarkEdmunds]

You can create a little helper component in your app.js to route any vue-router calls through to inertia-link.

See the router-link component below:

Code: Select all

import './bootstrap';
import Vue, { createApp, provide, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import PrimeVue from 'primevue/config';
import { InertiaLink } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from "@inertiajs/progress";

InertiaProgress.init();

/* The router-link special component is required for the primevue
   menu model derived components.  It is normally handled by vue-router
   however because we are using inertia, so instead I pass the 'to'
   parameter across to inertia-link as a href so it can do it's magic.
 */
createInertiaApp({
    title: (title) => `${title} - CGS`,
    resolve: (name) => require(`./Pages/${name}`),
    setup({el, App, props, plugin}) {
        createApp({render: () => h(App, props)})
            .use(plugin)
            .use(PrimeVue)
            .component('inertia-link', InertiaLink)
            .component("router-link", {
                props: ["to","custom"],
                template: `<inertia-link :href="to"><slot/></inertia-link>`,
            })
            .use(Notifications)
            .mixin({methods: {route}})
            .mount(el);
    },
});

[tugce.kucukoglu]

Thanks for the great explanation. If you have a codesandbox, could you share it with us? It will help the community.