BootstrapVue — Reacting on Visibility

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we look at how to use the v-b-visible directive to run something when something becomes visible or not.

Directive Syntax

We can use the v-b-visible directive, by writing:

<div v-b-visible.[mod1].[mod2]="callback">content</div>

mod1 and mod2 are modifiers.

callback is a function that runs when the visibility status changes.

It has a parameter to indicate visibility.

The parameter can be true or false .

The callback will be run each time the element’s visibility changes except when the once modifier is used.

All modifiers are optional.

Example

We can use it by writing:

<template>
  <div v-b-visible="visibleHandler">...</div>
</template>

<script>
export default {
  methods: {
    visibleHandler(isVisible) {
      if (isVisible) {
        // Do something
      } else {
        // Do something else
      }
    }
  }
};
</script>

We have the visibleHandler function.

isVisible indicates whether the div is visible or not.

Then we can do something according to the visibility status.

Use v-b-visible with the once Modifier

We can use the once modifier with v-b-visible .

For example, we can write:

<template>
  <div v-b-visible.once="visibleHandler"> ... </div>
</template>

<script>
export default {
  methods: {
    visibleHandler(isVisible) {
      if (isVisible) {
        // ...
      } else {
        // ...
      }
    }
  }
}
</script>

Then visibleHandler is only called once.

So isVisible can be true once when the element becomes visible for the first time.

isVisible can be false for zero or more times.

It’ll never be false after the element has become visible.

Use with once and Offset Modifiers

We can also add an offset modifier.

For instance, we can write:

<template>
  <div v-b-visible.once.350="visibleHandler">...</div>
</template>
<script>
export default {
  methods: {
    visibleHandler(isVisible) {
      if (isVisible) {
        //...
      } else {
        //...
      }
    }
  }
};
</script>

The offset is the number of pixels away from the edge of the viewport to determine when the element is considered to be in the viewport.

Therefore, it’ll be considered to be in the viewport if it’s within 350px of the viewport.

For example, we write:

<template>
  <div
    v-b-visible.once.350="visibleHandler"
    :class="[isVisible ? 'bg-info' : 'bg-light', 'text-center']"
  >
    <p v-for="n in 100" :key="n">{{n}}</p>
    <b-badge v-b-visible="visibleHandler">Element with v-b-visible directive</b-badge>
    <p v-for="n in 100" :key="n">{{n}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: false
    };
  },
  methods: {
    visibleHandler(isVisible) {
      this.isVisible = isVisible;
    }
  }
};
</script>

We’ll see the background in green if we see the badge.

Otherwise, we’ll see a light-colored background.

This is because we added the v-b-visible directive to the b-badge .

The visibilityHandler is run when the badge becomes visible or not as we scroll.

The class prop on the div will change the class according to the isVisible state, which we update in visibleHandler .

CSS Display Visibility Detection

We can detect visibility with CSS.

For instance, we can write:

<template>
  <div>
    <b-button @click="show = !show">Toggle display</b-button>
    <p>Visible: {{ isVisible }}</p>
    <div class="border p-3">
      <div v-show="show" class="bg-info p-3">
        <b-badge v-b-visible="handleVisibility">Element with v-b-visible directive</b-badge>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      isVisible: false
    };
  },
  methods: {
    handleVisibility(isVisible) {
      this.isVisible = isVisible;
    }
  }
};
</script>

v-show shows and hides elements and components with CSS.

When it’s shown or hidden, handleVisibility will be triggered.

Therefore, the isVisible will be triggered at the same time as show .

Conclusion

We can use the v-b-visible directive to detect visibility changes of elements or components.

Then we can run callbacks to do something when the visibility of something changes.