# vue-scroll-reveal

> A Vue 3 directive to wrap @jlmake's excellent ScrollReveal library.

Latest version **2.1.0** (published 2023-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-scroll-reveal
pnpm add vue-scroll-reveal
yarn add vue-scroll-reveal
bun add vue-scroll-reveal
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2023-04-13 |
| First published | 2017-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tserkov |
| Maintainers | tserkov |
| Keywords | vue, vue3, directive, scroll, reveal, scrollreveal |

## Links

- npm: https://www.npmjs.com/package/vue-scroll-reveal
- Repository: https://github.com/tserkov/vue-scroll-reveal
- Homepage: https://github.com/tserkov/vue-scroll-reveal#readme
- Issues: https://github.com/tserkov/vue-scroll-reveal/issues
- npm.io page: https://npm.io/package/vue-scroll-reveal

## Recent versions

- 2.1.0 (latest) — 2023-04-13
- 1.0.11 — 2018-09-29
- 1.0.10 — 2018-09-22
- 1.0.8 — 2018-04-07
- 1.0.7 — 2018-03-16
- 1.0.6 — 2018-03-13
- 1.0.5 — 2017-12-29
- 1.0.4 — 2017-12-28
- 1.0.3 — 2017-10-13
- 1.0.2 — 2017-08-19
- 1.0.1 — 2017-06-04
- 1.0.0 — 2017-06-04

## README

# vue-scroll-reveal [![license](https://img.shields.io/github/license/tserkov/vue-scroll-reveal.svg)]()
A Vue 3 directive to wrap [@jlmakes](https://github.com/jlmakes)' excellent [ScrollReveal](https://github.com/scrollreveal/scrollreveal) library.

The directive exposes `reset`, `nodesktop`, and `nomobile` as modifiers (ie. `v-scroll-reveal.reset.nomobile`).

## Install

ScrollReveal must be installed alongside this directive, since it is a peer dependency.

``` bash
# npm
npm install --save vue-scroll-reveal@2 scrollreveal
```

``` bash
# yarn
yarn add vue-scroll-reveal@2 scrollreveal
```

## Use
Any of the [ScrollReveal options](https://scrollrevealjs.org/api/reveal.html) can be passed.


```vue
<script setup>
// if using default options
import { vScrollReveal } from 'vue-scroll-reveal';

// OR if using custom default options
import { createScrollRevealDirective } from 'vue-scroll-reveal'; 
const vScrollReveal = createScrollRevealDirective({
    delay: 1000,
    duration: 150,
});
</script>

<template>
  <main>

    <section>
      <h1>Scroll down!</h1>
    </section>

    <!-- This section will reveal itself each time it's scrolled into view -->
    <section v-scroll-reveal.reset>
      <h1>Tada!</h1>
    </section>

    <!-- Element-specific configuration options can be passed like this -->
    <section v-scroll-reveal.reset="{ delay: 1500 }">
      <h1>Slightly late tada!</h1>
    </section>

  </main>
</template>

<style>
  section {
    height: 100vh;
  }
</style>
```

## Methods

As of vue-scroll-reveal@2.0.0, ScrollReveal() methods are no longer exposed. If you wish to use
any, import and use them directly, like so:

```javascript
import ScrollReveal from 'scrollreveal';

ScrollReveal.isSupported(); // for example
```

## Nuxt 3

Vue directives are [registered as a plugin](https://v3.nuxtjs.org/guide/directory-structure/plugins#vue-directives)
by creating the following file (the filename is very important):
```typescript
// plugins/scrollReveal.client.ts

import { vScrollReveal } from 'vue-scroll-reveal'; // if using default options
import { createScrollRevealDirective } from 'vue-scroll-reveal'; // OR if using custom default options

export default defineNuxtPlugin((nuxtApp) => {
  // if using default options
  nuxtApp.vueApp.directive('scroll-reveal', vScrollReveal);

  // OR if using custom default options
  nuxtApp.vueApp.directive('scroll-reveal', createScrollRevealDirective({
    delay: 1000,
    duration: 150,
    reset: true,
  }));
});
```

## Changelog

v2.1.0: Add `createScrollRevealDirective` so default options can be applied. [(#40)](https://github.com/tserkov/vue-scroll-reveal/issues/40#issuecomment-1258741430)

v2.0.0: Refactor in Typescript+Rollup for use in Vue 3 (& Nuxt 3).

## License

While the code within this component (tserkov/vue-scroll-reveal) is [MIT-licensed](https://github.com/tserkov/vue-scroll-reveal/blob/master/LICENSE.md), ScrollReveal is [GPL3-licensed](https://github.com/scrollreveal/scrollreveal#license), and requires the purchase of a [Commercial License](https://scrollrevealjs.org/pricing/) if you want to use it in a closed-source project.

For an explanation of why this component is licensed differently, see [#15](https://github.com/tserkov/vue-scroll-reveal/issues/21#issuecomment-424193121).

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