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.

<PageFeatures />

Usage

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

<ExamplesExample file="v-intersect/usage" /> <PromotedEntry />

API

Directive	Description
v-intersect	The intersection observer directive

<ApiInline hide-links />

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.

<ExamplesExample file="v-intersect/prop-options" />