I am looking for solutions how I can check whether a given element on a page is in viewport. There are a lot of ready-made solutions for Vue version 2 on the Internet, but I can't find something that would work in Vue 3. I can do it in Vanilla JS but I'm just learning the Vue 3 framework and I don't know how to do it right. Please help.

I am looking for solutions how I can check whether a given element on a page is in viewport. There are a lot of ready-made solutions for Vue version 2 on the Internet, but I can't find something that would work in Vue 3. I can do it in Vanilla JS but I'm just learning the Vue 3 framework and I don't know how to do it right. Please help.

• javascript
• vue.js
• vuejs3

• 1 It's IntersectionObserver applied to element ref. I'm unaware of libs that do this in 3 (and asking for libs specifically is offtopic on SO). But if they are, they likely implement it this way. – Estus Flask Commented Jun 1, 2021 at 9:14
• For Vue3 use this github.com/Akryum/vue-observe-visibility/tree/next made by a Vue Core Team Member – Coz Commented Mar 4, 2022 at 20:27
• The v-on:ready directive accomplished this without trouble in Vue 2. A little stumped at the dearth of both interest in and solutions to this question for Vue3. All solutions proposed here involve adding third-party utilities, polyfills, etc. It's a reactive framework ... why the need to add more stuff to get callbacks for such a basic thing as when an element (that is not a full component) is visible? – NFB Commented Oct 24, 2022 at 18:09

1 Answer 1

For Vue 3 there is this popular collection of essential Vue Composition Utilities called https://vueuse.org/. Is has the utilty https://vueuse.org/core/useElementVisibility/, that is (probably) what you are looking for. It comes with a great code example how to use it and a link to the source code so you can investigate how it is implemented.