First public release

.browserslistrc

@@ -0,0 +1,3 @@
+current node
+last 2 versions and > 2%
+ie > 10

.gitignore

@@ -0,0 +1,87 @@
+# File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
+
+# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,macos,nuxt,nuxtjs,vue,vuejs
+# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,macos,nuxt,nuxtjs,vue,vuejs
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Nuxt ###
+# gitignore template for Nuxt.js projects
+#
+# Recommended template: Node.gitignore
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist
+
+### Nuxtjs ###
+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+
+# Nuxt generate
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/tasks.json
+!.vscode/launch.json
+*.code-workspace
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### Vue ###
+# gitignore template for Vue.js projects
+# Recommended template: Node.gitignore
+
+# TODO: where does this rule come from?
+docs/_book
+
+# TODO: where does this rule come from?
+test/
+
+### Vuejs ###
+# Recommended template: Node.gitignore
+
+node_modules/
+dist/
+yarn-error.log
+
+# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,macos,nuxt,nuxtjs,vue,vuejs
+
+# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
+

README.md

@@ -0,0 +1,72 @@
+# 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 via 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
+<render-on-scroll>
+  <div>This content will be loaded only when it enters viewport</div>
+</render-on-scroll>
+```
+
+## Advanced Usage
+```html
+<render-on-scroll :offset-y="100">
+  <div>This content will already be rendered when scrolled 100px near it</div>
+</render-on-scroll>
+```
+```html
+<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>
+```
+## 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
+```

babel.config.js

@@ -0,0 +1,5 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = ['@babel/preset-env'];
+module.exports = {
+  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+};

build/rollup.config.js

@@ -0,0 +1,159 @@
+// rollup.config.js
+import fs from 'fs';
+import path from 'path';
+import vue from 'rollup-plugin-vue';
+import alias from '@rollup/plugin-alias';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import babel from 'rollup-plugin-babel';
+import { terser } from 'rollup-plugin-terser';
+import minimist from 'minimist';
+
+// Get browserslist config and remove ie from es build targets
+const esbrowserslist = fs.readFileSync('./.browserslistrc')
+  .toString()
+  .split('\n')
+  .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
+
+const argv = minimist(process.argv.slice(2));
+
+const projectRoot = path.resolve(__dirname, '..');
+
+const baseConfig = {
+  input: 'src/entry.js',
+  plugins: {
+    preVue: [
+      alias({
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+        entries: {
+          '@': path.resolve(projectRoot, 'src'),
+        },
+      }),
+    ],
+    replace: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.ES_BUILD': JSON.stringify('false'),
+    },
+    vue: {
+      css: true,
+      template: {
+        isProduction: true,
+      },
+    },
+    babel: {
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+    },
+  },
+};
+
+// ESM/UMD/IIFE shared settings: externals
+// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
+const external = [
+  // list external dependencies, exactly the way it is written in the import statement.
+  // eg. 'jquery'
+  'vue',
+];
+
+// UMD/IIFE shared settings: output.globals
+// Refer to https://rollupjs.org/guide/en#output-globals for details
+const globals = {
+  // Provide global variable names to replace your external imports
+  // eg. jquery: '$'
+  vue: 'Vue',
+};
+
+// Customize configs for individual targets
+const buildFormats = [];
+if (!argv.format || argv.format === 'es') {
+  const esConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      file: 'dist/render-on-scroll.esm.js',
+      format: 'esm',
+      exports: 'named',
+    },
+    plugins: [
+      replace({
+        ...baseConfig.plugins.replace,
+        'process.env.ES_BUILD': JSON.stringify('true'),
+      }),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      babel({
+        ...baseConfig.plugins.babel,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: esbrowserslist,
+            },
+          ],
+        ],
+      }),
+      commonjs(),
+    ],
+  };
+  buildFormats.push(esConfig);
+}
+
+if (!argv.format || argv.format === 'cjs') {
+  const umdConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/render-on-scroll.ssr.js',
+      format: 'cjs',
+      name: 'RenderOnScroll',
+      exports: 'named',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue({
+        ...baseConfig.plugins.vue,
+        template: {
+          ...baseConfig.plugins.vue.template,
+          optimizeSSR: true,
+        },
+      }),
+      babel(baseConfig.plugins.babel),
+      commonjs(),
+    ],
+  };
+  buildFormats.push(umdConfig);
+}
+
+if (!argv.format || argv.format === 'iife') {
+  const unpkgConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/render-on-scroll.min.js',
+      format: 'iife',
+      name: 'RenderOnScroll',
+      exports: 'named',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      babel(baseConfig.plugins.babel),
+      commonjs(),
+      terser({
+        output: {
+          ecma: 5,
+        },
+      }),
+    ],
+  };
+  buildFormats.push(unpkgConfig);
+}
+
+// Export config
+export default buildFormats;

dev/serve.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import Dev from './serve.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: (h) => h(Dev),
+}).$mount('#app');

dev/serve.vue

@@ -0,0 +1,45 @@
+<script>
+import Vue from "vue";
+import RenderOnScroll from "@/render-on-scroll.vue";
+
+export default Vue.extend({
+  name: "ServeDev",
+  components: {
+    RenderOnScroll,
+  },
+  data: function() {
+    return {
+      contents: [...Array(50).keys()].map((i) => ({
+        text: "sample content #" + i,
+      })),
+    };
+  },
+});
+</script>
+
+<template>
+  <div id="app">
+    <render-on-scroll height="100px" v-for="item in contents" :key="item.text">
+      <div class="sampleContent">
+        {{ item.text }}
+      </div>
+    </render-on-scroll>
+  </div>
+</template>
+
+<style>
+.sampleContent {
+  height: 100px;
+  animation: fadein 3s;
+  text-align: center;
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>