Link not working with inertia

[Wesley Sinde]

I have an issue with this package when i am using it in inertia, the link doesn't work despite using the example given in your docs. kindly show me a detailed example on how to use this package in inertia,
Here is my component

<template>
  <sidebar-menu :menu="menu" :link-component-name="'custom-link'"></sidebar-menu>
</template>
<script>
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'


export default {
  components: {
    SidebarMenu
  },
  data() {
    return {
      menu: [
        {
          header: 'Main Navigation',
          hiddenOnCollapse: true
        },
        {
          href: '/dashboard',
          title: 'Dashboard',
          icon: 'fa fa-user'
        },
        {
          href: '/charts',
          title: 'Charts',
          icon: 'fa fa-chart-area',
          child: [
            {
              href: '/dashboard',
              title: 'Sub Link'
            }
          ]
        },
        {
          title: 'dashboard',
          child: [
            {
              href: route('dashboard'),
              title: 'dashboard'
            },
            {
              href: route('dashboard'),
              title: 'dashboard'
            }
          ]
        }
      ]
    }
  }
}
</script>

I have used this in my main js

import link from "@inertiajs/inertia-vue3/src/link";

const customLink = {
    name: "CustomLink",
    props: ["item", "/dashboard"],
    render() {
        return h(link, this.$slots.default);
    },
    watch: {
        "$page.url"() {
            this.onRouteChange();
        },
    },
    inject: ["onRouteChange"],
};
const app = createApp(App);
app.component("custom-link", customLink);

what is missing here?

[yaminncco]

Can you provide a minimal reproduction?

[Márlon Etiene]

@Wesley-Sinde
try to change this return h(link, this.$slots.default); to this return h(this.item.href ? link : 'a', {}, this.$slots)

[Rafael Henrique Capati]

You can replace the default router-link with inertia-link:

import { InertiaLink, createInertiaApp } from "@inertiajs/inertia-vue3";
import { createApp, h } from "vue";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

const appName =
  window.document.getElementsByTagName("title")[0]?.innerText || "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)
      .component("inertia-link", InertiaLink)
      .component("router-link", {
        props: ["to", "custom"],
        template: `<inertia-link :href="to"><slot/></inertia-link>`,
      })
      .mount(el);
  },
});

And use :link-component-name="'inertia-link'".