Link not working with inertia
Wesley-Sinde opened this issue · comments
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?
Can you provide a minimal reproduction?
@Wesley-Sinde
try to change this return h(link, this.$slots.default);
to this return h(this.item.href ? link : 'a', {}, this.$slots)
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'"
.