This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Intersection observer

The v-intersect directive utilizes the Intersection Observer API. It provides an easy-to-use interface for detecting when elements are visible within the user’s viewport. This is also used for the v-lazy component.

Usage

Scroll the window and watch the colored dot. Notice as the v-card comes into view that it changes from error to success.

v-intersect/usage.vue

API

Examples

Props

Options

The v-intersect directive accepts options. Available options can be found in the Intersection Observer API. Below is an example using the threshold option.

v-intersect/prop-options.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.