Add v-inertia directive

[claudiodekker]

Usage:

• <a href="/link" v-inertia>Click me!</a>
• <a href="/logout v-inertia:post>Logout</a>
• <a href="/update" v-inertia:patch="{ title: form.title }>Save Changes</a>
• <a href="/" v-inertia="{ options: { ... } }">Visit with request options</a>

Under the hood, this feature uses the existing request methods, and acts as an alternative for <inertia-link>.

[lostdesign]

I am wondering what the use case would be for this? Or why is there a need to use the directive over inertia-link?

[claudiodekker]

@lostdesign Essentially, it works exactly the same but just uses a different (more vue-ish/non-component) syntax.

[lostdesign]

Well it's a nice addition for sure I guess. The patch one baffles me a bit though, when would you need to pass data directly into the link to patch? Wouldn't you have a method rather that does an $inertia.patch?

[claudiodekker]

No idea, but it exists for inertia-link as well, right? I'm just trying to keep the API's the same.

[lostdesign]

OH TIL then :D Well it's a nifty addition then as I mentioned.

[shaffe-fr]

It's a nice addition. Inertia svelte as a similar feature https://github.com/inertiajs/inertia/pull/206.

[claudiodekker]

Thanks for the feedback everyone!

So far, more than half of the responses (including Twitter and our Discord) mention they would not use this feature, with roughly ~25% giving positive feedback.

Because of this reason, as well as to focus on more important things and to not end up in a situation where we'd be maintaining 5 different ways to do the same thing, we've decided to place this idea back on the shelf for now.

[Zzombiee2361]

@claudiodekker Please reconsider reopening this pr. This is the perfect way to use inertia with vuetify. I can't just drop <inertia-link> anywhere between vuetify tag, it will break the visuals.

For example, putting inertia-link inside list:

<v-list dense>
  <inertia-link :href="route('admin.dashboard')">
    <v-list-item>
      <v-list-item-action>
        <v-icon>mdi-view-dashboard</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title>Dashboard</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </inertia-link>

  <inertia-link :href="route('admin.news.index')">
    <v-list-item>
      <v-list-item-action>
        <v-icon>mdi-newspaper</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title>News</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </inertia-link>
</v-list>

The list is underlined, the hover and ripple effect is gone.

Again, please reconsider reopening this pr.

[reinink]

Happy to review this.

@claudiodekker Would it make sense to abstract some of this behaviour, to be shared by both the Inertia link component and this new directive?

We'll also need to add the new event callbacks.

[claudiodekker]

@reinink Yeah, I can definitely look at doing that..!

[reinink]

Hey! Thanks so much for your interest in Inertia.js and for submitting this contribution.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this PR is still relevant, and if that's the case feel free to re-submit it. If it's a new feature and not a bug fix maybe respond here first to make sure that it's something we want to include in the library.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️