I'm using a Vue component, vue-carousel, in a Jekyll project. Everything is working except the control via attributes because the component is expecting camel case but Jekyll converts attributes to lowercase. So my code:
<carousel
:perPage="1"
:navigationEnabled="true"
:navigationNextLabel="'❯'"
:navigationPrevLabel="'❮'"
:paginationEnabled="false"
class="gr__carousel">
{% for slide in include.content.slides %}
{% include slide.html %}
{% endfor %}
</carousel>
gets generated with attributes:
<div
class="VueCarousel gr__carousel"
perpage="1"
navigationenabled="true"
navigationnextlabel="❯"
navigationprevlabel="❮">
...
</div>
one solution from Why Jekyll convert my Capital words into lowercase in Categories
was to edit the Jekyll gem but I would like to avoid this if possible. Is there any other work around for this situation?
Vue allows the attributes used for passing props to use either camelCase or kebab-case. So if Jekyll is causing problems with :perPage you can just use :per-page instead.
https://v2.vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case
https://v2.vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended
Vue will normalize these prop names when creating the component instances, so they'll always be accessible using camelCase on the instance. So it'll be this.perPage no matter how you pass it.
I'm not 100% sure but I think the conversion is done in normalizeProps: