Today I made a run of the mill global Vue component. The only thing "special" about it was the fact that it needed an id passed by prop. Looked something like this:
<my-component myProp="string value"></my-component>
The prop was defined inside the vue component,
props: ['myProp'] and everything worked fine.
After inserting the component without any problems in about two dozen places, it suddenly stopped working correctly. I checked on the older pages, everything was fine. In this new instance, it was not.
Instead of receiving the prop value, I got
undefined. After hopefully switching to the
<my-component :myProp="'string value'"></my-component> without avail, I was left scracthing my head and trying my luck on Google.
Most of the results were about people integrating vue props incorrectly, which was not my case. I mean, it worked before, right?
Well, turns out I was embarassingly wrong and did a rookie mistake. I integrated my component initially inside .vue templates where the prop casing did not matter. However, it stopped working inside a component with an external template, included inside a php file. The fix was easy, I just had to change the case from
<my-component my-prop="string value"></my-component>
It's actually mentioned in the official documentation:
HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents.
If you somehow run into this problem, make sure you have the correct casing, otherwise you'll end up like me.