# @sygnas/vue-inview

> Scroll in viewport add data attribute.

Latest version **0.3.0** (published 2022-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sygnas/vue-inview
pnpm add @sygnas/vue-inview
yarn add @sygnas/vue-inview
bun add @sygnas/vue-inview
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2022-07-29 |
| First published | 2019-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hiroshi Fukuda |
| Maintainers | sygnas |
| Keywords | scroll, effect, navigation |

## Links

- npm: https://www.npmjs.com/package/@sygnas/vue-inview
- Repository: https://github.com/sygnas/syg-vue-inview
- Homepage: https://github.com/sygnas/syg-vue-inview#readme
- Issues: https://github.com/sygnas/syg-vue-inview/issues
- npm.io page: https://npm.io/package/@sygnas/vue-inview

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.3.0 (latest) — 2022-07-29
- 0.2.0 — 2019-11-14
- 0.1.0 — 2019-11-14

## README

# syg-vue-inview
Vue用のIntersectionObserverなもの。


## Description
スクロールしてビューポートに入ったらdata属性を与える。

画面に入ったらエフェクトを加えたいけど、余計な機能は不要、cssは自分で書く、という人向け。

## Release

- 2022.07.29
  - Vue3用に変更
- 2019.11.14
  - とりあえず公開

## Usage

### Install

```sh
npm install --save @sygnas/vue-inview
```
### html / JS / css

```Vue
<div v-inview class="inview">foo</div>
```

```JavaScript
import VueInview from '@sygnas/vue-inview';

Vue.use(VueInview);
```

```Sass
.inview{
    opacity: 0;
    transform: translateY(20px);
    transition: .2s;

    // ビューポートに入ると data-inview属性が「true」になるので、
    // エレメントを表示させる
    &[data-inview = "true"]{
        opacity: 1;
        transform: translateY(0);
    }
}
```


## License
MIT

---
_Source: https://npm.io/package/@sygnas/vue-inview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._