Html attribute camel-case with vue directive

I am working on a MVC project with Vue.js(Vue3) front-end.
For some reason when I am trying to use any directive that contains camel-case arguments, like in the example below, they are automatically turned to all lower-case, rendering my directive completely ineffective.

<label for="Name" class="required" v-init:camelCaseAttribute="'variableValue"> labelValue </label>

This also happens when I define said atributes with the use of a dictionary:

@Html.TextBoxFor(m => m.Registration.Section03.Address.ZipCode, htmlAttributes: new Dictionary<string, object> { { "v-init:camelCaseAttribute", "'variableValue'" } })

I know this is a HTML thing, but are there any known work-arounds for this?

Are you saying this is done after compiling or by your IDE as you edit code?

it’s not the IDE that does that. the razor view renders the code html, so the data sent to the vue directive turns out to be all lower case in the end

https://www.w3.org/TR/2010/WD-html-markup-20101019/documents.html#case-insensitivity

Here is some more context to the question

   const myComponent = { // my component
    data: function () {
        return {
            camelCaseProperty: '' // property I am trying to initialise with some value
        }
    },
    directives: {
        init: { // custom init directive
            mounted(el, binding, vnode) {
                console.log(binding.arg)
                binding.instance[binding.arg] = binding.value;
            }
        }
    }
};

“init” is indeed not a built in Vue directive, so as I am trying to migrate the project from angularjs, which has an init directive, I tried to come up with something that offers a similar functionality to some extent, as seen in the snippet. Writing the directive argument in kebab-case (v-init:camel-case-property=“something”) has no effect, as logging the binding.arg that actually reaches the directive is still in kebab-case.

I’m confused by your comment here. Are you trying to pass a prop to the component or are you trying to pass an argument to the directive? These are very different use cases.

I am trying to pass argument to the custom directive. There is no component just a single vue instance.

After recreating your use case in a jsfiddle (for future topics, I recommend you do this) I can now understand your issue. I don’t, however, have a solution for you as the use case is unorthodox. I understand why you’re trying to do it this way, but directives were never designed for this use case - this is what props are designed for.

It is possible that the arg being lowercase is an implementation error/bug so it could be worth filing an issue on GitHub.