LuXDAmore/vue-cursor-fx

Invalid prop: type check failed for prop "hideOutside".

chrisjansky opened this issue · 1 comments

Hey!

Thanks for a great Nuxt.js plugin. It seems I am unable to set boolean true for "hide-outside" attribute.

<cursor-fx hide-outside="true" color="#fff" mix-blend-mode="difference" inside-size=".5em" />

Produces the following console warning:

[Vue warn]: Invalid prop: type check failed for prop "hideOutside". Expected Boolean, got String with value "true".

Hey @chrisjansky , I'm sorry for my late reply! 😞


This is because the right code should be:
<cursor-fx :hide-outside="true" color="#fff" mix-blend-mode="difference" inside-size=".5em" />

VueJs need to bind Boolean props, so you have to put the : before the attribute.

Or, otherwise, better, for attributes/props with a true value, you can simply omit the value:
<cursor-fx hide-outside color="#fff" mix-blend-mode="difference" inside-size=".5em" />

With hide-outside="true" you are passing down a value of type String.

Hope this help! 😄