https://github.com/dell-mic/nuxt-render-on-scroll
A Vue/Nuxt component that allows you to lazily render components only when they are scrolled into the viewport.
https://github.com/dell-mic/nuxt-render-on-scroll
nuxt nuxt-components nuxtjs vue vue-component
Last synced: 8 months ago
JSON representation
A Vue/Nuxt component that allows you to lazily render components only when they are scrolled into the viewport.
- Host: GitHub
- URL: https://github.com/dell-mic/nuxt-render-on-scroll
- Owner: dell-mic
- License: mit
- Created: 2020-11-14T15:09:54.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-06-27T17:49:40.000Z (almost 3 years ago)
- Last Synced: 2025-08-15T08:34:13.090Z (10 months ago)
- Topics: nuxt, nuxt-components, nuxtjs, vue, vue-component
- Language: JavaScript
- Homepage:
- Size: 1.35 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
](https://github.com/petr-nazarov/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
```sh
yarn add nuxt-render-on-scroll
# OR
npm i nuxt-render-on-scroll
```
```js
import RenderOnScroll from 'nuxt-render-on-scroll'
export default {
components: {
RenderOnScroll,
// ...
},
}
```
## Simple Usage
```html
This content will be renderd only when it enters viewport
```
## Advanced Usage
```html
This content will already be rendered when scrolled 100px near it
```
```html
This content will only be rendered when at least 40px scrolled into the
180px high placeholder space
```
## 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.
```html
This content will be rendered before scroll reaches the main element.
This content will be renderd only when it enters viewport
```
## Configuration Options
| prop | type | default | comments |
| ------- | :----: | ------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| height | String | '' | CSS string for height property of the wrapping div. Useful to preserve the space while to content is not rendered yet. Can be used in combination with a negative value `offsetY` render only when scrolled into the content area, e.g., for large charts. |
| offsetY | Number | 0 | Additional amount of pixel to be added on the content's bounds. E.g. value of 100 will render the content when scrolled within 100px _near_ it.
## Development
This project is based on [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup)
### Clone this repo
```sh
git clone git@github.com:Michi-4G/nuxt-render-on-scroll.git
cd nuxt-render-on-scroll
```
### Install dependencies
```sh
npm install
```
### Run development server
```sh
npm run serve
```
### Build for production
```sh
npm run build
```