[Feature Request] Add supoort for <inertia-link> component

Problem to solve

I’m using Inertia.js with Laravel after a lot of frustration with Nuxt. Inertia do it’s navigation magic with the <inertia-link> component. It’s something linke <nuxt-link>. It would be nice to have support for this on <v-btn>, <v-chip> just like we have for nuxt.

Proposed solution

It could be something as simple as: <v-btn inertia to="route">. The same deal going on with <v-btn nuxt to="route>

[garrensweet]

This really sounds like a deal breaker to me. With BootstrapVue there is a workaround (see bootstrap-vue/bootstrap-vue#5759) as there is a way to assign custom link component to it. Is there any similar workaround here?

Stumbled across this and wanted to an answer as well. I found that the inertia-link component has the as property which accepts any DOM element or vue component. Additionally, the props passed to the inertia-link component are passed to the rendered component implementation when using as so you’re able to leverage the standard Vuetify v-btn properties on it as well and it all works great.

<inertia-link as="v-btn" href="/" color="secondary" block small> Link </inertia-link>

[OrkhanAlikhanov]

In my case I was not using vue router in the project, so I registered the inertia-link globally as router-link.

Vue.component('router-link', {
  functional: true,
  render(h, context) {
    const data = { ...context.data }
    delete data.nativeOn
    const props = data.props as any || {}
    props.href = props.to /// v-btn passes `to` prop but inertia-link requires `href`, so we just copy it
    return h('inertia-link', data, context.children)
  },
})