Vue Appear

Vue directive that helps you appear stuff as it comes into view.

This is simply a helper that adds a class to your desiered elements, actual appearing should be done using CSS.

Quickstart

Installation

Install with your preffered package manager:

npm install --save vue-appear
# or
yarn add vue-appear

Setup

Once installed register the plugin with Vue:

import Vue from 'vue'
import VueAppear from 'vue-appear'

Vue.use(VueAppear)

If you wish to override default settings you can pass in the options as a second argument:

Vue.use(VueAppear, {
  immediate: false,
  toggle: false,
  children: false,
  offset: 150,
  hook: 'onEnter',
  delay: 0,
  class: 'appear',
  selector: null,
  callback: () => {}
})

Usage in templates

To make elements appear in your templates:

<!-- Appear once element comes into view -->
<div v-appear></div>

<!-- Appear immediately -->
<div v-appear.immediate></div>

<!-- Toggle apperance as they come into view, and leave -->
<div v-appear.toggle></div>

<!-- Appear children as they come into view -->
<div v-appear.children>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sin</p>
</div>

<!-- Combine modifiers as you wish -->
<div v-appear.toggle.children>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sin</p>
</div>

<!-- Pass in additional options -->
<div v-appear="{
  offset: 300,
  delay: 300,
  class: 'show',
  callback: onShow,
  enabled: isAppearEnabled
}"></div>

API Options

Setting	Description	Type	Default
immediate	Set if element should appear immediately, ignoring scroll.	boolean	false
toggle	Toggle element appearance when enters and leaves scroll view.	boolean	false
children	Appear element children instead.	boolean	false
offset	Offset amount before element appears.	number	150
hook	When should element appear in relation to the view ('onEnter', 'onCenter' or 'onLeave').	string	'onEnter'
delay	How long should pass after page load before applying the appear class.	number	0
class	Class to add when element appears.	string	'appear'
selector	Query selector for children, if passed in children are appeared.	string	null
callback	Callback function when element appears or disappears, receives a boolean argument.	function	null
enabled	A boolean value that can be used to toggle the appearing.	boolean	true

Release notes

To see changes view the Changelog file.