nuxt-render-on-scroll

nuxt-render-on-scroll - A Vue/Nuxt component that allows you to lazily render components only when they are scrolled into the viewport.

Based on the idea from vue-render-on-scroll and adopted for SSR usage in Nuxt.js: Adding v-if="false" to the content of the component as long as the component is not in the current viewport or while in SSR mode.

Nevertheless, it should still be usable independent of Nuxt with stock Vue.

Install

yarn add nuxt-render-on-scroll
# OR
npm i nuxt-render-on-scroll

import RenderOnScroll from 'nuxt-render-on-scroll'
export default {
  components: {
    RenderOnScroll,
    // ...
  },
}

Simple Usage

<render-on-scroll>
  <div>This content will be renderd only when it enters viewport</div>
</render-on-scroll>

Advanced Usage

<render-on-scroll :offset-y="100">
  <div>This content will already be rendered when scrolled 100px near it</div>
</render-on-scroll>

<render-on-scroll height="180px" :offset-y="-40">
  <div>
    This content will only be rendered when at least 40px scrolled into the
    180px high placeholder space
  </div>
</render-on-scroll>

Placeholder Support

A placeholder can also be shown before the scroll reaches the element. This will be usefull if you want to show something else while the component is rendering or if you are fetching asynchronous data from.

<render-on-scroll>
  <template #placeholder>
    <div>
      This content will be rendered before scroll reaches the main element. 
    </div>
  </template>
  <div>This content will be renderd only when it enters viewport</div>
</render-on-scroll>

Configuration Options

Development

This project is based on vue-sfc-rollup

Clone this repo

git clone git@github.com:Michi-4G/nuxt-render-on-scroll.git
cd nuxt-render-on-scroll

Install dependencies

npm install

Run development server

npm run serve

Build for production

npm run build