https://github.com/opuu/inview-vue
Check if an element is visible in the viewport using Vue 3 directives.
https://github.com/opuu/inview-vue
aos infinite-scroll inview inviewport lazy-loading vue vue-directive vue-directives vue-inview vue3 vuejs
Last synced: about 1 month ago
JSON representation
Check if an element is visible in the viewport using Vue 3 directives.
- Host: GitHub
- URL: https://github.com/opuu/inview-vue
- Owner: opuu
- License: mit
- Created: 2025-08-01T01:02:52.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-08-01T01:20:34.000Z (11 months ago)
- Last Synced: 2025-08-01T02:56:47.178Z (11 months ago)
- Topics: aos, infinite-scroll, inview, inviewport, lazy-loading, vue, vue-directive, vue-directives, vue-inview, vue3, vuejs
- Language: TypeScript
- Homepage: https://opuu.github.io/inview/demo/
- Size: 37.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# InView Vue
Vue 3 directives for viewport detection. Simple `v-inview` and `v-outview` directives.
[](https://badge.fury.io/js/%40opuu%2Finview-vue)
[](https://opensource.org/licenses/MIT)
## Installation
```bash
npm install @opuu/inview-vue
```
## Setup
```javascript
// main.js
import { createApp } from "vue";
import { createInViewDirective, createOutViewDirective } from "@opuu/inview-vue";
const app = createApp(App);
app.directive("inview", createInViewDirective());
app.directive("outview", createOutViewDirective());
app.mount("#app");
```
## Usage
```vue
I'm visible!
I'm hidden!
Track both
function handleEnter(event) {
console.log("Visible:", event.percentage + "%");
}
function handleExit(event) {
console.log("Hidden");
}
function onEnter(event) {
event.target.classList.add("visible");
}
function onExit(event) {
event.target.classList.remove("visible");
}
```
## Examples
### Lazy Loading
```vue
function lazyLoad(event) {
const img = event.target;
img.src = img.dataset.src;
}
```
### Animations
```vue
Animate me!
function fadeIn(event) {
event.target.classList.add("animate");
}
function fadeOut(event) {
event.target.classList.remove("animate");
}
.box {
opacity: 0;
transition: opacity 0.3s;
}
.box.animate {
opacity: 1;
}
```
### Analytics
```vue
Hero content
function trackView(event) {
if (event.percentage > 50) {
analytics.track("section_viewed", {
section: event.target.dataset.section,
});
}
}
```
## Configuration
You can configure directives globally:
```javascript
import { createInViewDirective } from "@opuu/inview-vue";
app.directive(
"inview",
createInViewDirective({
delay: 100, // Debounce delay in ms
precision: "high", // "low", "medium", or "high"
})
);
```
| Option | Default | Description |
| ----------- | ---------- | ------------------------------ |
| `delay` | `0` | Debounce delay in milliseconds |
| `precision` | `"medium"` | Observation precision level |
## Local Registration
```vue
Local directive
import { createInViewDirective } from "@opuu/inview-vue";
const vInview = createInViewDirective({ delay: 200 });
function handleEnter(event) {
console.log("Triggered:", event.percentage);
}
```
## TypeScript
```vue
import type { InViewEvent } from "@opuu/inview-vue";
function handleEnter(event: InViewEvent): void {
console.log(`Element is ${event.percentage}% visible`);
}
```
## Nuxt.js
Create a plugin:
```javascript
// plugins/inview.js
import { createInViewDirective, createOutViewDirective } from "@opuu/inview-vue";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.directive("inview", createInViewDirective());
nuxtApp.vueApp.directive("outview", createOutViewDirective());
});
```
## License
MIT