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. Open your browser's developer tools, scroll the page up and down and observe the changes in the console. The directive can be applied both to Vue components and DOM elements. You can apply the data-root-margin
(default: "0px"
, value should be in pixels or percent) and data-threshold
(default: 1.0
, value should be a number) HTML attributes to fine-tune the behavior of the directive (check the official documentation for more info). You might also want to check our visibility-observer and navigator-online components
Brandcompete's UI library for Vue, based on TailwindCSS. We have a growing collection of ready to use UI, forms and layout components, directives and plenty of helpers
The UI library of brandcompete for Vue, based on Tailwind. We have a growing collection of ready to use ui, forms and layout components, directives and plenty of helpers. This website has been built with the library itself and you can use it as a complete reference, starting here. Bookmark our release notes page to stay informed of what's new
intersection api, directive, directives, viewport, scroll, visibility