Supporting kebab-case for component attributes

[mho22]

Hi,

I noticed while using eslint-plugin-vue rule : vue/attribute-hyphenation [ used in plugin:vue/vue3-strongly-recommended ] that the InertiaLink component attributes for events are not accepted with PascalCase :

Finding a quote on VueJS.org :

Technically, you can also use camelCase when passing props to a child component (except in [DOM templates](https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats)). However, the convention is using kebab-case in all cases to align with HTML attributes

Error :

import { Link } from '@inertiajs/vue3';


<Link
    ...
    v-bind:onStart="() => { isLoading = true; }"
    ...
>...</Link>

Fixed :

import { Link } from '@inertiajs/vue3';


<Link
    ...
    v-bind:on-start="() => { isLoading = true; }"
    ...
>...</Link>

My actual solution is a simple addition to my eslint rules :

"vue/attribute-hyphenation": [ "warn", "always", { "ignore" : [ "onStart", ... ] } ],

However, this could be problematic if I mistakenly add these bindings on other components.
Another alternative could be to set additional attributes in the Inertia Components without removing the initial ones.

I'm not sure this idea could have some kind of value, just asking.

[LucaRed]

Woah, this bit me exactly now! I was writing this and wondering why it didn't work:

<Link :on-success="doThings">Test</Link>

I had to change it to this to make it work, but it feels a bit "wrong":

<Link :onSuccess="doThings">Test</Link>

[mho22]

I agree, but I'm hesitant to suggest a pull request for this. It has been a year since I initiated this discussion