Home » vue » Understanding undocumented Vue.js attributes ( Vue + Pug )

Understanding undocumented Vue.js attributes ( Vue + Pug )

Posted by: admin November 26, 2021 Leave a comment


So i was just browsing through certain vue.js code HERE. and came across the following code below:

  :right="task.type === 'reward'",

I don’t quite understand this attribute :right that is inserted in the code ? What is it doing and what is its purpose , i am new to Vue.js , but by looking around a bit i was able to find documentation for the rest of the attributes except this attribute called :right ? Can anybody shed some light on this ?


The : in front of html attributes is a shorthand for the v-bind directive. what v-bind allows you to do is have a variable value to the specified html attribute.
ex: v-bind:alt="kittenPhotoDescription" is the same as doing alt:"kittenPhotoDescription".

Here is where it’s found in the docs.


I don’t know Pug well, but it seems to me that the pasted Pug code creates a menu-dropdown element with those given attributes. right attribute is bound to a dynamic value from the Vue model using the v-bind: directive’s shorthand :.

I searched for menu-dropdown component’s definition in the repository you linked, and find this file:

This is where the right attribute is defined as a Vue prop:

export default {
  props: {
    right: Boolean,

You can read more about props in the Vue documentation.