diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..b29aeba
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+current node
+last 2 versions and > 2%
+ie > 10
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..de59089
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,16 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = [
+  [
+    '@babel/preset-env',
+    // Config for @babel/preset-env
+    {
+      // Example: Always transpile optional chaining/nullish coalescing
+      // include: [
+      //   /(optional-chaining|nullish-coalescing)/
+      // ],
+    },
+  ],
+];
+module.exports = {
+  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+};
diff --git a/build/rollup.config.js b/build/rollup.config.js
new file mode 100644
index 0000000..dd41f12
--- /dev/null
+++ b/build/rollup.config.js
@@ -0,0 +1,172 @@
+// 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 resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import babel from '@rollup/plugin-babel';
+import PostCSS from 'rollup-plugin-postcss';
+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');
+
+// Extract babel preset-env config, to combine with esbrowserslist
+const babelPresetEnvConfig = require('../babel.config')
+  .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
+
+const argv = minimist(process.argv.slice(2));
+
+const projectRoot = path.resolve(__dirname, '..');
+
+const baseConfig = {
+  input: 'src/entry.js',
+  plugins: {
+    preVue: [
+      alias({
+        entries: [
+          {
+            find: '@',
+            replacement: `${path.resolve(projectRoot, 'src')}`,
+          },
+        ],
+      }),
+    ],
+    replace: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+    vue: {
+      preprocessStyles: true
+    },
+    postVue: [
+      resolve({
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      }),
+      // Process only `<style module>` blocks.
+      PostCSS({
+        modules: {
+          generateScopedName: '[local]___[hash:base64:5]',
+        },
+        include: /&module=.*\.css$/,
+      }),
+      // Process all `<style>` blocks except `<style module>`.
+      PostCSS({ include: /(?<!&module=.*)\.css$/ }),
+      commonjs(),
+    ],
+    babel: {
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      babelHelpers: 'bundled',
+    },
+  },
+};
+
+// 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,
+    input: 'src/entry.esm.js',
+    external,
+    output: {
+      file: 'dist/vue-infinite-loading.esm.js',
+      format: 'esm',
+      exports: 'named',
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel({
+        ...baseConfig.plugins.babel,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              ...babelPresetEnvConfig,
+              targets: esbrowserslist,
+            },
+          ],
+        ],
+      }),
+    ],
+  };
+  buildFormats.push(esConfig);
+}
+
+if (!argv.format || argv.format === 'cjs') {
+  const umdConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vue-infinite-loading.ssr.js',
+      format: 'cjs',
+      name: 'VueInfiniteLoading',
+      exports: 'auto',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+    ],
+  };
+  buildFormats.push(umdConfig);
+}
+
+if (!argv.format || argv.format === 'iife') {
+  const unpkgConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vue-infinite-loading.min.js',
+      format: 'iife',
+      name: 'VueInfiniteLoading',
+      exports: 'auto',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+      terser({
+        output: {
+          ecma: 5,
+        },
+      }),
+    ],
+  };
+  buildFormats.push(unpkgConfig);
+}
+
+// Export config
+export default buildFormats;
diff --git a/dev/serve.js b/dev/serve.js
new file mode 100644
index 0000000..4fb2956
--- /dev/null
+++ b/dev/serve.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import Dev from './serve.vue';
+
+const app = createApp(Dev);
+app.mount('#app');
diff --git a/dev/serve.vue b/dev/serve.vue
new file mode 100644
index 0000000..8dd1018
--- /dev/null
+++ b/dev/serve.vue
@@ -0,0 +1,17 @@
+<script>
+import { defineComponent } from 'vue';
+import InfiniteLoading from '@/components/InfiniteLoading.vue';
+
+export default defineComponent({
+  name: 'ServeDev',
+  components: {
+    InfiniteLoading,
+  }
+});
+</script>
+
+<template>
+  <div id="app">
+    <InfiniteLoading />
+  </div>
+</template>
diff --git a/dist/vue-infinite-loading.esm.js b/dist/vue-infinite-loading.esm.js
new file mode 100644
index 0000000..5f13bda
--- /dev/null
+++ b/dist/vue-infinite-loading.esm.js
@@ -0,0 +1,755 @@
+import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createElementVNode, createCommentVNode, Text, resolveComponent, withDirectives, normalizeStyle, renderSlot, normalizeProps, guardReactiveProps, createVNode, vShow, createBlock, resolveDynamicComponent, createTextVNode, toDisplayString, pushScopeId, popScopeId } from 'vue';
+
+function E () {
+  // Keep this empty so it's easier to inherit from
+  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
+}
+
+E.prototype = {
+  on: function (name, callback, ctx) {
+    var e = this.e || (this.e = {});
+
+    (e[name] || (e[name] = [])).push({
+      fn: callback,
+      ctx: ctx
+    });
+
+    return this;
+  },
+
+  once: function (name, callback, ctx) {
+    var self = this;
+    function listener () {
+      self.off(name, listener);
+      callback.apply(ctx, arguments);
+    }
+    listener._ = callback;
+    return this.on(name, listener, ctx);
+  },
+
+  emit: function (name) {
+    var data = [].slice.call(arguments, 1);
+    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+    var i = 0;
+    var len = evtArr.length;
+
+    for (i; i < len; i++) {
+      evtArr[i].fn.apply(evtArr[i].ctx, data);
+    }
+
+    return this;
+  },
+
+  off: function (name, callback) {
+    var e = this.e || (this.e = {});
+    var evts = e[name];
+    var liveEvents = [];
+
+    if (evts && callback) {
+      for (var i = 0, len = evts.length; i < len; i++) {
+        if (evts[i].fn !== callback && evts[i].fn._ !== callback)
+          liveEvents.push(evts[i]);
+      }
+    }
+
+    // Remove event from queue to prevent memory leak
+    // Suggested by https://github.com/lazd
+    // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
+
+    (liveEvents.length)
+      ? e[name] = liveEvents
+      : delete e[name];
+
+    return this;
+  }
+};
+
+var tinyEmitter = E;
+var TinyEmitter = E;
+tinyEmitter.TinyEmitter = TinyEmitter;
+
+var instance = new tinyEmitter();
+
+var emitter = instance;
+
+var eventHub = {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args)
+};
+
+const SPINNERS = ['bubbles', 'circles', 'spiral', 'wavedots'];
+var script$1 = /* #__PURE__ */defineComponent({
+  name: 'Spinner',
+  props: ['spinner'],
+  computed: {
+    spinnerView() {
+      return !SPINNERS.includes(this.spinner) ? 'default' : this.spinner;
+    }
+
+  }
+});
+
+const _hoisted_1$1 = {
+  key: 0,
+  class: "loading-default"
+};
+const _hoisted_2$1 = {
+  key: 1,
+  class: "loading-bubbles"
+};
+const _hoisted_3$1 = {
+  key: 2,
+  class: "loading-circles"
+};
+const _hoisted_4 = {
+  key: 3,
+  class: "loading-spiral"
+};
+const _hoisted_5 = {
+  key: 4,
+  class: "loading-wave-dots"
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.spinnerView === 'default' ? (openBlock(), createElementBlock("i", _hoisted_1$1)) : _ctx.spinnerView === 'bubbles' ? (openBlock(), createElementBlock("span", _hoisted_2$1, [(openBlock(), createElementBlock(Fragment, null, renderList(8, x => {
+    return createElementVNode("span", {
+      class: "bubble-item",
+      key: x
+    });
+  }), 64))])) : _ctx.spinnerView === 'circles' ? (openBlock(), createElementBlock("span", _hoisted_3$1, [(openBlock(), createElementBlock(Fragment, null, renderList(8, x => {
+    return createElementVNode("span", {
+      class: "circle-item",
+      key: x
+    });
+  }), 64))])) : _ctx.spinnerView === 'spiral' ? (openBlock(), createElementBlock("i", _hoisted_4)) : _ctx.spinnerView === 'wavedots' ? (openBlock(), createElementBlock("span", _hoisted_5, [(openBlock(), createElementBlock(Fragment, null, renderList(5, x => {
+    return createElementVNode("span", {
+      class: "wave-item",
+      key: x
+    });
+  }), 64))])) : createCommentVNode("", true);
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".loading-wave-dots[data-v-18ae5a62] {\n  position: relative;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-block;\n  margin-top: -8px/2;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  animation: loading-wave-dots-18ae5a62 linear 2.8s infinite;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:first-child {\n  margin-left: -8px/2 + -32px;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(2) {\n  margin-left: -8px/2 + -16px;\n  animation-delay: 0.14s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(3) {\n  margin-left: -8px/2;\n  animation-delay: 0.28s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(4) {\n  margin-left: -8px/2 + 16px;\n  animation-delay: 0.42s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:last-child {\n  margin-left: -8px/2 + 32px;\n  animation-delay: 0.56s;\n}\n@keyframes loading-wave-dots-18ae5a62 {\n0% {\n    transform: translateY(0);\n    background: #bbb;\n}\n10% {\n    transform: translateY(-6px);\n    background: #999;\n}\n20% {\n    transform: translateY(0);\n    background: #bbb;\n}\n100% {\n    transform: translateY(0);\n    background: #bbb;\n}\n}\n.loading-circles[data-v-18ae5a62] .circle-item {\n  width: 5px;\n  height: 5px;\n  animation: loading-circles-18ae5a62 linear 0.75s infinite;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:first-child {\n  margin-top: -5px/2 + -12px;\n  margin-left: -5px/2;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(2) {\n  margin-top: -5px/2 + -8.76px;\n  margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(3) {\n  margin-top: -5px/2;\n  margin-left: -5px/2 + 12px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(4) {\n  margin-top: -5px/2 + 8.76px;\n  margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(5) {\n  margin-top: -5px/2 + 12px;\n  margin-left: -5px/2;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(6) {\n  margin-top: -5px/2 + 8.76px;\n  margin-left: -5px/2 + -8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(7) {\n  margin-top: -5px/2;\n  margin-left: -5px/2 + -12px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:last-child {\n  margin-top: -5px/2 + -8.76px;\n  margin-left: -5px/2 + -8.76px;\n}\n@keyframes loading-circles-18ae5a62 {\n0% {\n    background: #dfdfdf;\n}\n90% {\n    background: #505050;\n}\n100% {\n    background: #dfdfdf;\n}\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item {\n  background: #666;\n  animation: loading-bubbles-18ae5a62 linear 0.75s infinite;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:first-child {\n  margin-top: -1px/2 + -12px;\n  margin-left: -1px/2;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(2) {\n  margin-top: -1px/2 + -8.76px;\n  margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(3) {\n  margin-top: -1px/2;\n  margin-left: -1px/2 + 12px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(4) {\n  margin-top: -1px/2 + 8.76px;\n  margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(5) {\n  margin-top: -1px/2 + 12px;\n  margin-left: -1px/2;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(6) {\n  margin-top: -1px/2 + 8.76px;\n  margin-left: -1px/2 + -8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(7) {\n  margin-top: -1px/2;\n  margin-left: -1px/2 + -12px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:last-child {\n  margin-top: -1px/2 + -8.76px;\n  margin-left: -1px/2 + -8.76px;\n}\n@keyframes loading-bubbles-18ae5a62 {\n0% {\n    width: 1px;\n    height: 1px;\n    box-shadow: 0 0 0 3px #666;\n}\n90% {\n    width: 1px;\n    height: 1px;\n    box-shadow: 0 0 0 0 #666;\n}\n100% {\n    width: 1px;\n    height: 1px;\n    box-shadow: 0 0 0 3px #666;\n}\n}\n.loading-default[data-v-18ae5a62] {\n  position: relative;\n  border: 1px solid #999;\n  animation: loading-rotating-18ae5a62 ease 1.5s infinite;\n}\n.loading-default[data-v-18ae5a62]:before {\n  content: '';\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 50%;\n  margin-top: -6px/2;\n  margin-left: -6px/2;\n  width: 6px;\n  height: 6px;\n  background-color: #999;\n  border-radius: 50%;\n}\n.loading-spiral[data-v-18ae5a62] {\n  border: 2px solid #777;\n  border-right-color: transparent;\n  animation: loading-rotating-18ae5a62 linear 0.85s infinite;\n}\n@keyframes loading-rotating-18ae5a62 {\n0% {\n    transform: rotate(0);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n.loading-bubbles[data-v-18ae5a62],\n.loading-circles[data-v-18ae5a62] {\n  position: relative;\n}\n.loading-circles[data-v-18ae5a62] .circle-item,\n.loading-bubbles[data-v-18ae5a62] .bubble-item {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-block;\n  border-radius: 50%;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(2),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(2) {\n  animation-delay: 0.093s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(3),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(3) {\n  animation-delay: 0.186s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(4),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(4) {\n  animation-delay: 0.279s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(5),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(5) {\n  animation-delay: 0.372s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(6),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(6) {\n  animation-delay: 0.465s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(7),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(7) {\n  animation-delay: 0.558s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:last-child,\n.loading-bubbles[data-v-18ae5a62] .bubble-item:last-child {\n  animation-delay: 0.651s;\n}\n";
+styleInject(css_248z$1);
+
+script$1.render = render$1;
+script$1.__scopeId = "data-v-18ae5a62";
+
+/*
+ * default property values
+ */
+const props = {
+  // the default spinner type
+  spinner: 'default',
+  // the default critical distance
+  distance: 100,
+  // the default force use infinite wrapper flag
+  forceUseInfiniteWrapper: false
+};
+/**
+ * default system settings
+ */
+
+const system = {
+  // the default throttle space of time
+  throttleLimit: 50,
+  // the timeout for check infinite loop, unit: ms
+  loopCheckTimeout: 1000,
+  // the max allowed number of continuous calls, unit: ms
+  loopCheckMaxCalls: 10
+};
+/**
+ * default slot messages
+ */
+
+const slots = {
+  noResults: 'No results :(',
+  noMore: 'No more data :)',
+  error: 'Opps, something went wrong :(',
+  errorBtnText: 'Retry',
+  spinner: ''
+};
+/**
+ * the 3rd argument for event bundler
+ * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ */
+
+const evt3rdArg = (() => {
+  let result = false;
+
+  try {
+    const arg = Object.defineProperty({}, 'passive', {
+      get() {
+        result = {
+          passive: true
+        };
+        return true;
+      }
+
+    });
+    window.addEventListener('testpassive', arg, arg);
+    window.remove('testpassive', arg, arg);
+  } catch (e) {
+    /* */
+  }
+
+  return result;
+})();
+/**
+ * warning messages
+ */
+
+const WARNINGS = {
+  INFINITE_EVENT: '`:on-infinite` property will be deprecated soon, please use `@infinite` event instead.'
+};
+/**
+ * error messages
+ */
+
+const ERRORS = {
+  INFINITE_LOOP: [`executed the callback function more than ${system.loopCheckMaxCalls} times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it. If you want to force to set a element as scroll wrapper ranther than automatic searching, you can do this:`, `
+<!-- add a special attribute for the real scroll wrapper -->
+<div infinite-wrapper>
+  ...
+  <!-- set force-use-infinite-wrapper -->
+  <infinite-loading force-use-infinite-wrapper></infinite-loading>
+</div>
+or
+<div class="infinite-wrapper">
+  ...
+  <!-- set force-use-infinite-wrapper as css selector of the real scroll wrapper -->
+  <infinite-loading force-use-infinite-wrapper=".infinite-wrapper"></infinite-loading>
+</div>
+    `, 'more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169'].join('\n')
+};
+/**
+ * plugin status constants
+ */
+
+const STATUS = {
+  READY: 0,
+  LOADING: 1,
+  COMPLETE: 2,
+  ERROR: 3
+};
+/**
+ * default slot styles
+ */
+
+const SLOT_STYLES = {
+  color: '#666',
+  fontSize: '14px',
+  padding: '10px 0'
+};
+var config = {
+  mode: 'development',
+  props,
+  system,
+  slots,
+  WARNINGS,
+  ERRORS,
+  STATUS
+};
+
+/* eslint-disable no-console */
+/**
+ * console warning in production
+ * @param {String} msg console content
+ */
+
+function warn(msg) {
+  /* istanbul ignore else */
+  {
+    console.warn(`[Vue-infinite-loading warn]: ${msg}`);
+  }
+}
+/**
+ * console error
+ * @param {String} msg console content
+ */
+
+function error(msg) {
+  console.error(`[Vue-infinite-loading error]: ${msg}`);
+}
+const throttleer = {
+  timers: [],
+  caches: [],
+
+  throttle(fn) {
+    if (this.caches.indexOf(fn) === -1) {
+      // cache current handler
+      this.caches.push(fn); // save timer for current handler
+
+      this.timers.push(setTimeout(() => {
+        fn(); // empty cache and timer
+
+        this.caches.splice(this.caches.indexOf(fn), 1);
+        this.timers.shift();
+      }, config.system.throttleLimit));
+    }
+  },
+
+  reset() {
+    // reset all timers
+    this.timers.forEach(timer => {
+      clearTimeout(timer);
+    });
+    this.timers.length = 0; // empty caches
+
+    this.caches = [];
+  }
+
+};
+const loopTracker = {
+  isChecked: false,
+  timer: null,
+  times: 0,
+
+  track() {
+    // record track times
+    this.times += 1; // try to mark check status
+
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.isChecked = true;
+    }, config.system.loopCheckTimeout); // throw warning if the times of continuous calls large than the maximum times
+
+    if (this.times > config.system.loopCheckMaxCalls) {
+      error(ERRORS.INFINITE_LOOP);
+      this.isChecked = true;
+    }
+  }
+
+};
+const scrollBarStorage = {
+  key: '_infiniteScrollHeight',
+
+  getScrollElm(elm) {
+    return elm === window ? document.documentElement : elm;
+  },
+
+  save(elm) {
+    const target = this.getScrollElm(elm); // save scroll height on the scroll parent
+
+    target[this.key] = target.scrollHeight;
+  },
+
+  restore(elm) {
+    const target = this.getScrollElm(elm);
+    /* istanbul ignore else */
+
+    if (typeof target[this.key] === 'number') {
+      target.scrollTop = target.scrollHeight - target[this.key] + target.scrollTop;
+    }
+
+    this.remove(target);
+  },
+
+  remove(elm) {
+    if (elm[this.key] !== undefined) {
+      // remove scroll height
+      delete elm[this.key]; // eslint-disable-line no-param-reassign
+    }
+  }
+
+};
+/**
+ * kebab-case a camel-case string
+ * @param   {String}    str  source string
+ * @return  {String}
+ */
+
+function kebabCase(str) {
+  return str.replace(/[A-Z]/g, s => `-${s.toLowerCase()}`);
+}
+/**
+ * get visibility for element
+ * @param   {DOM}     elm
+ * @return  {Boolean}
+ */
+
+function isVisible(elm) {
+  return elm.offsetWidth + elm.offsetHeight > 0;
+}
+
+var script = /* #__PURE__ */defineComponent({
+  name: 'InfiniteLoading',
+
+  data() {
+    return {
+      scrollParent: null,
+      scrollHandler: null,
+      isFirstLoad: true,
+      // save the current loading whether it is the first loading
+      status: STATUS.READY,
+      slots: config.slots
+    };
+  },
+
+  components: {
+    Spinner: script$1
+  },
+  emits: ['infinite', '$InfiniteLoading:loaded', '$InfiniteLoading:complete', '$InfiniteLoading:reset'],
+  computed: {
+    isShowSpinner() {
+      return this.status === STATUS.LOADING;
+    },
+
+    isShowError() {
+      return this.status === STATUS.ERROR;
+    },
+
+    isShowNoResults() {
+      return this.status === STATUS.COMPLETE && this.isFirstLoad;
+    },
+
+    isShowNoMore() {
+      return this.status === STATUS.COMPLETE && !this.isFirstLoad;
+    },
+
+    slotStyles() {
+      const styles = {};
+      Object.keys(config.slots).forEach(key => {
+        var _this$$slots$name$;
+
+        const name = kebabCase(key);
+
+        if ( // no slot and the configured default slot is not a Vue component
+        !this.$slots[name] && !config.slots[key].render || this.$slots[name] && ((_this$$slots$name$ = this.$slots[name]()[0]) === null || _this$$slots$name$ === void 0 ? void 0 : _this$$slots$name$.type) === Text) {
+          // only apply default styles for pure text slot
+          styles[key] = SLOT_STYLES;
+        } else {
+          styles[key] = {};
+        }
+      });
+      return styles;
+    }
+
+  },
+  props: {
+    distance: {
+      type: Number,
+      default: config.props.distance
+    },
+    spinner: String,
+    direction: {
+      type: String,
+      default: 'bottom'
+    },
+    forceUseInfiniteWrapper: {
+      type: [Boolean, String],
+      default: config.props.forceUseInfiniteWrapper
+    },
+    identifier: {
+      default: +new Date()
+    }
+  },
+  watch: {
+    identifier() {
+      this.stateChanger.reset();
+    }
+
+  },
+
+  mounted() {
+    this.$watch('forceUseInfiniteWrapper', () => {
+      this.scrollParent = this.getScrollParent();
+    }, {
+      immediate: true
+    });
+
+    this.scrollHandler = ev => {
+      if (this.status === STATUS.READY) {
+        if (ev && ev.constructor === Event && isVisible(this.$el)) {
+          throttleer.throttle(this.attemptLoad);
+        } else {
+          this.attemptLoad();
+        }
+      }
+    };
+
+    setTimeout(() => {
+      this.scrollHandler();
+      this.scrollParent.addEventListener('scroll', this.scrollHandler, evt3rdArg);
+    }, 1);
+    eventHub.$on('$InfiniteLoading:loaded', () => {
+      this.isFirstLoad = false;
+
+      if (this.direction === 'top') {
+        // wait for DOM updated
+        this.$nextTick(() => {
+          scrollBarStorage.restore(this.scrollParent);
+        });
+      }
+
+      if (this.status === STATUS.LOADING) {
+        this.$nextTick(this.attemptLoad.bind(null, true));
+      }
+    });
+    eventHub.$on('$InfiniteLoading:complete', () => {
+      this.status = STATUS.COMPLETE; // force re-complation computed properties to fix the problem of get slot text delay
+
+      this.$nextTick(() => {
+        this.$forceUpdate();
+      });
+      this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
+    });
+    eventHub.$on('$InfiniteLoading:reset', () => {
+      this.status = STATUS.READY;
+      this.isFirstLoad = true;
+      scrollBarStorage.remove(this.scrollParent);
+      this.scrollParent.addEventListener('scroll', this.scrollHandler, evt3rdArg); // wait for list to be empty and the empty action may trigger a scroll event
+
+      setTimeout(() => {
+        throttleer.reset();
+        this.scrollHandler();
+      }, 1);
+    });
+    /**
+     * change state for this component, pass to the callback
+     */
+
+    this.stateChanger = {
+      loaded: () => {
+        this.$emit('$InfiniteLoading:loaded', {
+          target: this
+        });
+        eventHub.$emit('$InfiniteLoading:loaded', {
+          target: this
+        });
+      },
+      complete: () => {
+        this.$emit('$InfiniteLoading:complete', {
+          target: this
+        });
+        eventHub.$emit('$InfiniteLoading:complete', {
+          target: this
+        });
+      },
+      reset: () => {
+        this.$emit('$InfiniteLoading:reset', {
+          target: this
+        });
+        eventHub.$emit('$InfiniteLoading:reset', {
+          target: this
+        });
+      },
+      error: () => {
+        this.status = STATUS.ERROR;
+        throttleer.reset();
+      }
+    };
+
+    if (this.onInfinite) {
+      warn(WARNINGS.INFINITE_EVENT);
+    }
+  },
+
+  /**
+   * To adapt to keep-alive feature, but only work on Vue 2.2.0 and above, see: https://vuejs.org/v2/api/#keep-alive
+   */
+  deactivated() {
+    /* istanbul ignore else */
+    if (this.status === STATUS.LOADING) {
+      this.status = STATUS.READY;
+    }
+
+    this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
+  },
+
+  activated() {
+    this.scrollParent.addEventListener('scroll', this.scrollHandler, evt3rdArg);
+  },
+
+  methods: {
+    /**
+     * attempt trigger load
+     * @param {Boolean} isContinuousCall  the flag of continuous call, it will be true
+     *                                    if this method be called in the `loaded`
+     *                                    event handler
+     */
+    attemptLoad(isContinuousCall) {
+      if (this.status !== STATUS.COMPLETE && isVisible(this.$el) && this.getCurrentDistance() <= this.distance) {
+        this.status = STATUS.LOADING;
+
+        if (this.direction === 'top') {
+          // wait for spinner display
+          this.$nextTick(() => {
+            scrollBarStorage.save(this.scrollParent);
+          });
+        }
+
+        if (typeof this.onInfinite === 'function') {
+          this.onInfinite.call(null, this.stateChanger);
+        } else {
+          this.$emit('infinite', this.stateChanger);
+        }
+
+        if (isContinuousCall && !this.forceUseInfiniteWrapper && !loopTracker.isChecked) {
+          // check this component whether be in an infinite loop if it is not checked
+          // more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169
+          loopTracker.track();
+        }
+      } else if (this.status === STATUS.LOADING) {
+        this.status = STATUS.READY;
+      }
+    },
+
+    /**
+     * get current distance from the specified direction
+     * @return {Number}     distance
+     */
+    getCurrentDistance() {
+      let distance;
+
+      if (this.direction === 'top') {
+        distance = typeof this.scrollParent.scrollTop === 'number' ? this.scrollParent.scrollTop : this.scrollParent.pageYOffset;
+      } else {
+        const infiniteElmOffsetTopFromBottom = this.$el.getBoundingClientRect().top;
+        const scrollElmOffsetTopFromBottom = this.scrollParent === window ? window.innerHeight : this.scrollParent.getBoundingClientRect().bottom;
+        distance = infiniteElmOffsetTopFromBottom - scrollElmOffsetTopFromBottom;
+      }
+
+      return distance;
+    },
+
+    /**
+     * get the first scroll parent of an element
+     * @param  {DOM} elm    cache element for recursive search
+     * @return {DOM}        the first scroll parent
+     */
+    getScrollParent(elm = this.$el) {
+      let result;
+
+      if (typeof this.forceUseInfiniteWrapper === 'string') {
+        result = document.querySelector(this.forceUseInfiniteWrapper);
+      }
+
+      if (!result) {
+        if (elm.tagName === 'BODY') {
+          result = window;
+        } else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
+          result = elm;
+        } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
+          result = elm;
+        }
+      }
+
+      return result || this.getScrollParent(elm.parentNode);
+    }
+
+  },
+
+  unmounted() {
+    /* istanbul ignore else */
+    if (!this.status !== STATUS.COMPLETE) {
+      throttleer.reset();
+      scrollBarStorage.remove(this.scrollParent);
+      this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
+    }
+  }
+
+});
+
+const _withScopeId = n => (pushScopeId("data-v-38327aa8"), n = n(), popScopeId(), n);
+
+const _hoisted_1 = {
+  class: "infinite-loading-container"
+};
+
+const _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("br", null, null, -1));
+
+const _hoisted_3 = ["textContent"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_spinner = resolveComponent("spinner");
+
+  return openBlock(), createElementBlock("div", _hoisted_1, [withDirectives(createElementVNode("div", {
+    class: "infinite-status-prompt",
+    style: normalizeStyle(_ctx.slotStyles.spinner)
+  }, [renderSlot(_ctx.$slots, "spinner", normalizeProps(guardReactiveProps({
+    isFirstLoad: _ctx.isFirstLoad
+  })), () => [createVNode(_component_spinner, {
+    spinner: _ctx.spinner
+  }, null, 8, ["spinner"])])], 4), [[vShow, _ctx.isShowSpinner]]), withDirectives(createElementVNode("div", {
+    class: "infinite-status-prompt",
+    style: normalizeStyle(_ctx.slotStyles.noResults)
+  }, [renderSlot(_ctx.$slots, "no-results", {}, () => [_ctx.slots.noResults.render ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.slots.noResults), {
+    key: 0
+  })) : (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createTextVNode(toDisplayString(_ctx.slots.noResults), 1)], 64))])], 4), [[vShow, _ctx.isShowNoResults]]), withDirectives(createElementVNode("div", {
+    class: "infinite-status-prompt",
+    style: normalizeStyle(_ctx.slotStyles.noMore)
+  }, [renderSlot(_ctx.$slots, "no-more", {}, () => [_ctx.slots.noMore.render ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.slots.noMore), {
+    key: 0
+  })) : (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createTextVNode(toDisplayString(_ctx.slots.noMore), 1)], 64))])], 4), [[vShow, _ctx.isShowNoMore]]), withDirectives(createElementVNode("div", {
+    class: "infinite-status-prompt",
+    style: normalizeStyle(_ctx.slotStyles.error)
+  }, [renderSlot(_ctx.$slots, "error", {
+    trigger: _ctx.attemptLoad
+  }, () => [_ctx.slots.error.render ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.slots.error), {
+    key: 0,
+    trigger: _ctx.attemptLoad
+  }, null, 8, ["trigger"])) : (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createTextVNode(toDisplayString(_ctx.slots.error) + " ", 1), _hoisted_2, createElementVNode("button", {
+    class: "btn-try-infinite",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.attemptLoad && _ctx.attemptLoad(...args)),
+    textContent: toDisplayString(_ctx.slots.errorBtnText)
+  }, null, 8, _hoisted_3)], 64))])], 4), [[vShow, _ctx.isShowError]])]);
+}
+
+var css_248z = ".infinite-loading-container[data-v-38327aa8] {\n  clear: both;\n  text-align: center;\n}\n.infinite-loading-container[data-v-38327aa8] *[class^=loading-] {\n  display: inline-block;\n  margin: 5px 0;\n  width: 28px;\n  height: 28px;\n  font-size: 28px;\n  line-height: 28px;\n  border-radius: 50%;\n}\n.btn-try-infinite[data-v-38327aa8] {\n  margin-top: 5px;\n  padding: 5px 10px;\n  color: #999;\n  font-size: 14px;\n  line-height: 1;\n  background: transparent;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  outline: none;\n  cursor: pointer;\n}\n.btn-try-infinite[data-v-38327aa8]:not(:active):hover {\n  opacity: 0.8;\n}\n";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-38327aa8";
+
+// Import vue component
+// IIFE injects install function into component, allowing component
+// to be registered via Vue.use() as well as Vue.component(),
+
+var entry_esm = /* #__PURE__ */(() => {
+  // Get component instance
+  const installable = script; // Attach install function executed by Vue.use()
+
+  installable.install = app => {
+    app.component('VueInfiniteLoading', installable);
+  };
+
+  return installable;
+})(); // It's possible to expose named exports when writing components that can
+// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
+// export const RollupDemoDirective = directive;
+
+export { entry_esm as default };
diff --git a/dist/vue-infinite-loading.js b/dist/vue-infinite-loading.js
deleted file mode 100644
index 6e7fb9e..0000000
--- a/dist/vue-infinite-loading.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*!
- * vue-infinite-loading v2.4.5
- * (c) 2016-2020 PeachScript
- * MIT License
- */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueInfiniteLoading=e():t.VueInfiniteLoading=e()}(this,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var a=e[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)n.d(i,a,function(e){return t[e]}.bind(null,a));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=9)}([function(t,e,n){var i=n(6);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(3).default)("6223ff68",i,!0,{})},function(t,e,n){var i=n(8);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(3).default)("27f0e51f",i,!0,{})},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var a=(o=i,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),r=i.sources.map((function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"}));return[n].concat(r).concat([a]).join("\n")}var o;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n})).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},a=0;a<this.length;a++){var r=this[a][0];"number"==typeof r&&(i[r]=!0)}for(a=0;a<t.length;a++){var o=t[a];"number"==typeof o[0]&&i[o[0]]||(n&&!o[2]?o[2]=n:n&&(o[2]="("+o[2]+") and ("+n+")"),e.push(o))}},e}},function(t,e,n){"use strict";function i(t,e){for(var n=[],i={},a=0;a<e.length;a++){var r=e[a],o=r[0],s={id:t+":"+a,css:r[1],media:r[2],sourceMap:r[3]};i[o]?i[o].parts.push(s):n.push(i[o]={id:o,parts:[s]})}return n}n.r(e),n.d(e,"default",(function(){return f}));var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var r={},o=a&&(document.head||document.getElementsByTagName("head")[0]),s=null,l=0,d=!1,c=function(){},u=null,p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function f(t,e,n,a){d=n,u=a||{};var o=i(t,e);return b(o),function(e){for(var n=[],a=0;a<o.length;a++){var s=o[a];(l=r[s.id]).refs--,n.push(l)}e?b(o=i(t,e)):o=[];for(a=0;a<n.length;a++){var l;if(0===(l=n[a]).refs){for(var d=0;d<l.parts.length;d++)l.parts[d]();delete r[l.id]}}}}function b(t){for(var e=0;e<t.length;e++){var n=t[e],i=r[n.id];if(i){i.refs++;for(var a=0;a<i.parts.length;a++)i.parts[a](n.parts[a]);for(;a<n.parts.length;a++)i.parts.push(m(n.parts[a]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var o=[];for(a=0;a<n.parts.length;a++)o.push(m(n.parts[a]));r[n.id]={id:n.id,refs:1,parts:o}}}}function h(){var t=document.createElement("style");return t.type="text/css",o.appendChild(t),t}function m(t){var e,n,i=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(i){if(d)return c;i.parentNode.removeChild(i)}if(p){var a=l++;i=s||(s=h()),e=w.bind(null,i,a,!1),n=w.bind(null,i,a,!0)}else i=h(),e=y.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}var g,v=(g=[],function(t,e){return g[t]=e,g.filter(Boolean).join("\n")});function w(t,e,n,i){var a=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=v(e,a);else{var r=document.createTextNode(a),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(r,o[e]):t.appendChild(r)}}function y(t,e){var n=e.css,i=e.media,a=e.sourceMap;if(i&&t.setAttribute("media",i),u.ssrId&&t.setAttribute("data-vue-ssr-id",e.id),a&&(n+="\n/*# sourceURL="+a.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}},function(t,e){function n(e){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?t.exports=n=function(t){return typeof t}:t.exports=n=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(e)}t.exports=n},function(t,e,n){"use strict";n.r(e);var i=n(0),a=n.n(i);for(var r in i)"default"!==r&&function(t){n.d(e,t,(function(){return i[t]}))}(r);e.default=a.a},function(t,e,n){(t.exports=n(2)(!1)).push([t.i,'.loading-wave-dots[data-v-46b20d22]{position:relative}.loading-wave-dots[data-v-46b20d22] .wave-item{position:absolute;top:50%;left:50%;display:inline-block;margin-top:-4px;width:8px;height:8px;border-radius:50%;-webkit-animation:loading-wave-dots-data-v-46b20d22 linear 2.8s infinite;animation:loading-wave-dots-data-v-46b20d22 linear 2.8s infinite}.loading-wave-dots[data-v-46b20d22] .wave-item:first-child{margin-left:-36px}.loading-wave-dots[data-v-46b20d22] .wave-item:nth-child(2){margin-left:-20px;-webkit-animation-delay:.14s;animation-delay:.14s}.loading-wave-dots[data-v-46b20d22] .wave-item:nth-child(3){margin-left:-4px;-webkit-animation-delay:.28s;animation-delay:.28s}.loading-wave-dots[data-v-46b20d22] .wave-item:nth-child(4){margin-left:12px;-webkit-animation-delay:.42s;animation-delay:.42s}.loading-wave-dots[data-v-46b20d22] .wave-item:last-child{margin-left:28px;-webkit-animation-delay:.56s;animation-delay:.56s}@-webkit-keyframes loading-wave-dots-data-v-46b20d22{0%{-webkit-transform:translateY(0);transform:translateY(0);background:#bbb}10%{-webkit-transform:translateY(-6px);transform:translateY(-6px);background:#999}20%{-webkit-transform:translateY(0);transform:translateY(0);background:#bbb}to{-webkit-transform:translateY(0);transform:translateY(0);background:#bbb}}@keyframes loading-wave-dots-data-v-46b20d22{0%{-webkit-transform:translateY(0);transform:translateY(0);background:#bbb}10%{-webkit-transform:translateY(-6px);transform:translateY(-6px);background:#999}20%{-webkit-transform:translateY(0);transform:translateY(0);background:#bbb}to{-webkit-transform:translateY(0);transform:translateY(0);background:#bbb}}.loading-circles[data-v-46b20d22] .circle-item{width:5px;height:5px;-webkit-animation:loading-circles-data-v-46b20d22 linear .75s infinite;animation:loading-circles-data-v-46b20d22 linear .75s infinite}.loading-circles[data-v-46b20d22] .circle-item:first-child{margin-top:-14.5px;margin-left:-2.5px}.loading-circles[data-v-46b20d22] .circle-item:nth-child(2){margin-top:-11.26px;margin-left:6.26px}.loading-circles[data-v-46b20d22] .circle-item:nth-child(3){margin-top:-2.5px;margin-left:9.5px}.loading-circles[data-v-46b20d22] .circle-item:nth-child(4){margin-top:6.26px;margin-left:6.26px}.loading-circles[data-v-46b20d22] .circle-item:nth-child(5){margin-top:9.5px;margin-left:-2.5px}.loading-circles[data-v-46b20d22] .circle-item:nth-child(6){margin-top:6.26px;margin-left:-11.26px}.loading-circles[data-v-46b20d22] .circle-item:nth-child(7){margin-top:-2.5px;margin-left:-14.5px}.loading-circles[data-v-46b20d22] .circle-item:last-child{margin-top:-11.26px;margin-left:-11.26px}@-webkit-keyframes loading-circles-data-v-46b20d22{0%{background:#dfdfdf}90%{background:#505050}to{background:#dfdfdf}}@keyframes loading-circles-data-v-46b20d22{0%{background:#dfdfdf}90%{background:#505050}to{background:#dfdfdf}}.loading-bubbles[data-v-46b20d22] .bubble-item{background:#666;-webkit-animation:loading-bubbles-data-v-46b20d22 linear .75s infinite;animation:loading-bubbles-data-v-46b20d22 linear .75s infinite}.loading-bubbles[data-v-46b20d22] .bubble-item:first-child{margin-top:-12.5px;margin-left:-.5px}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(2){margin-top:-9.26px;margin-left:8.26px}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(3){margin-top:-.5px;margin-left:11.5px}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(4){margin-top:8.26px;margin-left:8.26px}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(5){margin-top:11.5px;margin-left:-.5px}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(6){margin-top:8.26px;margin-left:-9.26px}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(7){margin-top:-.5px;margin-left:-12.5px}.loading-bubbles[data-v-46b20d22] .bubble-item:last-child{margin-top:-9.26px;margin-left:-9.26px}@-webkit-keyframes loading-bubbles-data-v-46b20d22{0%{width:1px;height:1px;box-shadow:0 0 0 3px #666}90%{width:1px;height:1px;box-shadow:0 0 0 0 #666}to{width:1px;height:1px;box-shadow:0 0 0 3px #666}}@keyframes loading-bubbles-data-v-46b20d22{0%{width:1px;height:1px;box-shadow:0 0 0 3px #666}90%{width:1px;height:1px;box-shadow:0 0 0 0 #666}to{width:1px;height:1px;box-shadow:0 0 0 3px #666}}.loading-default[data-v-46b20d22]{position:relative;border:1px solid #999;-webkit-animation:loading-rotating-data-v-46b20d22 ease 1.5s infinite;animation:loading-rotating-data-v-46b20d22 ease 1.5s infinite}.loading-default[data-v-46b20d22]:before{content:"";position:absolute;display:block;top:0;left:50%;margin-top:-3px;margin-left:-3px;width:6px;height:6px;background-color:#999;border-radius:50%}.loading-spiral[data-v-46b20d22]{border:2px solid #777;border-right-color:transparent;-webkit-animation:loading-rotating-data-v-46b20d22 linear .85s infinite;animation:loading-rotating-data-v-46b20d22 linear .85s infinite}@-webkit-keyframes loading-rotating-data-v-46b20d22{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loading-rotating-data-v-46b20d22{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loading-bubbles[data-v-46b20d22],.loading-circles[data-v-46b20d22]{position:relative}.loading-bubbles[data-v-46b20d22] .bubble-item,.loading-circles[data-v-46b20d22] .circle-item{position:absolute;top:50%;left:50%;display:inline-block;border-radius:50%}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(2),.loading-circles[data-v-46b20d22] .circle-item:nth-child(2){-webkit-animation-delay:93ms;animation-delay:93ms}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(3),.loading-circles[data-v-46b20d22] .circle-item:nth-child(3){-webkit-animation-delay:.186s;animation-delay:.186s}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(4),.loading-circles[data-v-46b20d22] .circle-item:nth-child(4){-webkit-animation-delay:.279s;animation-delay:.279s}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(5),.loading-circles[data-v-46b20d22] .circle-item:nth-child(5){-webkit-animation-delay:.372s;animation-delay:.372s}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(6),.loading-circles[data-v-46b20d22] .circle-item:nth-child(6){-webkit-animation-delay:.465s;animation-delay:.465s}.loading-bubbles[data-v-46b20d22] .bubble-item:nth-child(7),.loading-circles[data-v-46b20d22] .circle-item:nth-child(7){-webkit-animation-delay:.558s;animation-delay:.558s}.loading-bubbles[data-v-46b20d22] .bubble-item:last-child,.loading-circles[data-v-46b20d22] .circle-item:last-child{-webkit-animation-delay:.651s;animation-delay:.651s}',""])},function(t,e,n){"use strict";n.r(e);var i=n(1),a=n.n(i);for(var r in i)"default"!==r&&function(t){n.d(e,t,(function(){return i[t]}))}(r);e.default=a.a},function(t,e,n){(t.exports=n(2)(!1)).push([t.i,".infinite-loading-container[data-v-644ea9c9]{clear:both;text-align:center}.infinite-loading-container[data-v-644ea9c9] [class^=loading-]{display:inline-block;margin:5px 0;width:28px;height:28px;font-size:28px;line-height:28px;border-radius:50%}.btn-try-infinite[data-v-644ea9c9]{margin-top:5px;padding:5px 10px;color:#999;font-size:14px;line-height:1;background:transparent;border:1px solid #ccc;border-radius:3px;outline:none;cursor:pointer}.btn-try-infinite[data-v-644ea9c9]:not(:active):hover{opacity:.8}",""])},function(t,e,n){"use strict";n.r(e);var i={throttleLimit:50,loopCheckTimeout:1e3,loopCheckMaxCalls:10},a=function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){return t={passive:!0},!0}});window.addEventListener("testpassive",e,e),window.remove("testpassive",e,e)}catch(t){}return t}(),r={STATE_CHANGER:["emit `loaded` and `complete` event through component instance of `$refs` may cause error, so it will be deprecated soon, please use the `$state` argument instead (`$state` just the special `$event` variable):","\ntemplate:",'<infinite-loading @infinite="infiniteHandler"></infinite-loading>',"\nscript:\n...\ninfiniteHandler($state) {\n  ajax('https://www.example.com/api/news')\n    .then((res) => {\n      if (res.data.length) {\n        $state.loaded();\n      } else {\n        $state.complete();\n      }\n    });\n}\n...","","more details: https://github.com/PeachScript/vue-infinite-loading/issues/57#issuecomment-324370549"].join("\n"),INFINITE_EVENT:"`:on-infinite` property will be deprecated soon, please use `@infinite` event instead.",IDENTIFIER:"the `reset` event will be deprecated soon, please reset this component by change the `identifier` property."},o={INFINITE_LOOP:["executed the callback function more than ".concat(i.loopCheckMaxCalls," times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it. If you want to force to set a element as scroll wrapper ranther than automatic searching, you can do this:"),'\n\x3c!-- add a special attribute for the real scroll wrapper --\x3e\n<div infinite-wrapper>\n  ...\n  \x3c!-- set force-use-infinite-wrapper --\x3e\n  <infinite-loading force-use-infinite-wrapper></infinite-loading>\n</div>\nor\n<div class="infinite-wrapper">\n  ...\n  \x3c!-- set force-use-infinite-wrapper as css selector of the real scroll wrapper --\x3e\n  <infinite-loading force-use-infinite-wrapper=".infinite-wrapper"></infinite-loading>\n</div>\n    ',"more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169"].join("\n")},s={READY:0,LOADING:1,COMPLETE:2,ERROR:3},l={color:"#666",fontSize:"14px",padding:"10px 0"},d={mode:"development",props:{spinner:"default",distance:100,forceUseInfiniteWrapper:!1},system:i,slots:{noResults:"No results :(",noMore:"No more data :)",error:"Opps, something went wrong :(",errorBtnText:"Retry",spinner:""},WARNINGS:r,ERRORS:o,STATUS:s},c=n(4),u=n.n(c),p={BUBBLES:{render:function(t){return t("span",{attrs:{class:"loading-bubbles"}},Array.apply(Array,Array(8)).map((function(){return t("span",{attrs:{class:"bubble-item"}})})))}},CIRCLES:{render:function(t){return t("span",{attrs:{class:"loading-circles"}},Array.apply(Array,Array(8)).map((function(){return t("span",{attrs:{class:"circle-item"}})})))}},DEFAULT:{render:function(t){return t("i",{attrs:{class:"loading-default"}})}},SPIRAL:{render:function(t){return t("i",{attrs:{class:"loading-spiral"}})}},WAVEDOTS:{render:function(t){return t("span",{attrs:{class:"loading-wave-dots"}},Array.apply(Array,Array(5)).map((function(){return t("span",{attrs:{class:"wave-item"}})})))}}};function f(t,e,n,i,a,r,o,s){var l,d="function"==typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=n,d._compiled=!0),i&&(d.functional=!0),r&&(d._scopeId="data-v-"+r),o?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),a&&a.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=l):a&&(l=s?function(){a.call(this,this.$root.$options.shadowRoot)}:a),l)if(d.functional){d._injectStyles=l;var c=d.render;d.render=function(t,e){return l.call(e),c(t,e)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,l):[l]}return{exports:t,options:d}}var b=f({name:"Spinner",computed:{spinnerView:function(){return p[(this.$attrs.spinner||"").toUpperCase()]||this.spinnerInConfig},spinnerInConfig:function(){return d.slots.spinner&&"string"==typeof d.slots.spinner?{render:function(){return this._v(d.slots.spinner)}}:"object"===u()(d.slots.spinner)?d.slots.spinner:p[d.props.spinner.toUpperCase()]||p.DEFAULT}}},(function(){var t=this.$createElement;return(this._self._c||t)(this.spinnerView,{tag:"component"})}),[],!1,(function(t){var e=n(5);e.__inject__&&e.__inject__(t)}),"46b20d22",null).exports;function h(t){"production"!==d.mode&&console.warn("[Vue-infinite-loading warn]: ".concat(t))}function m(t){console.error("[Vue-infinite-loading error]: ".concat(t))}var g={timers:[],caches:[],throttle:function(t){var e=this;-1===this.caches.indexOf(t)&&(this.caches.push(t),this.timers.push(setTimeout((function(){t(),e.caches.splice(e.caches.indexOf(t),1),e.timers.shift()}),d.system.throttleLimit)))},reset:function(){this.timers.forEach((function(t){clearTimeout(t)})),this.timers.length=0,this.caches=[]}},v={isChecked:!1,timer:null,times:0,track:function(){var t=this;this.times+=1,clearTimeout(this.timer),this.timer=setTimeout((function(){t.isChecked=!0}),d.system.loopCheckTimeout),this.times>d.system.loopCheckMaxCalls&&(m(o.INFINITE_LOOP),this.isChecked=!0)}},w={key:"_infiniteScrollHeight",getScrollElm:function(t){return t===window?document.documentElement:t},save:function(t){var e=this.getScrollElm(t);e[this.key]=e.scrollHeight},restore:function(t){var e=this.getScrollElm(t);"number"==typeof e[this.key]&&(e.scrollTop=e.scrollHeight-e[this.key]+e.scrollTop),this.remove(e)},remove:function(t){void 0!==t[this.key]&&delete t[this.key]}};function y(t){return t.replace(/[A-Z]/g,(function(t){return"-".concat(t.toLowerCase())}))}function x(t){return t.offsetWidth+t.offsetHeight>0}var k=f({name:"InfiniteLoading",data:function(){return{scrollParent:null,scrollHandler:null,isFirstLoad:!0,status:s.READY,slots:d.slots}},components:{Spinner:b},computed:{isShowSpinner:function(){return this.status===s.LOADING},isShowError:function(){return this.status===s.ERROR},isShowNoResults:function(){return this.status===s.COMPLETE&&this.isFirstLoad},isShowNoMore:function(){return this.status===s.COMPLETE&&!this.isFirstLoad},slotStyles:function(){var t=this,e={};return Object.keys(d.slots).forEach((function(n){var i=y(n);(!t.$slots[i]&&!d.slots[n].render||t.$slots[i]&&!t.$slots[i][0].tag)&&(e[n]=l)})),e}},props:{distance:{type:Number,default:d.props.distance},spinner:String,direction:{type:String,default:"bottom"},forceUseInfiniteWrapper:{type:[Boolean,String],default:d.props.forceUseInfiniteWrapper},identifier:{default:+new Date},onInfinite:Function},watch:{identifier:function(){this.stateChanger.reset()}},mounted:function(){var t=this;this.$watch("forceUseInfiniteWrapper",(function(){t.scrollParent=t.getScrollParent()}),{immediate:!0}),this.scrollHandler=function(e){t.status===s.READY&&(e&&e.constructor===Event&&x(t.$el)?g.throttle(t.attemptLoad):t.attemptLoad())},setTimeout((function(){t.scrollHandler(),t.scrollParent.addEventListener("scroll",t.scrollHandler,a)}),1),this.$on("$InfiniteLoading:loaded",(function(e){t.isFirstLoad=!1,"top"===t.direction&&t.$nextTick((function(){w.restore(t.scrollParent)})),t.status===s.LOADING&&t.$nextTick(t.attemptLoad.bind(null,!0)),e&&e.target===t||h(r.STATE_CHANGER)})),this.$on("$InfiniteLoading:complete",(function(e){t.status=s.COMPLETE,t.$nextTick((function(){t.$forceUpdate()})),t.scrollParent.removeEventListener("scroll",t.scrollHandler,a),e&&e.target===t||h(r.STATE_CHANGER)})),this.$on("$InfiniteLoading:reset",(function(e){t.status=s.READY,t.isFirstLoad=!0,w.remove(t.scrollParent),t.scrollParent.addEventListener("scroll",t.scrollHandler,a),setTimeout((function(){g.reset(),t.scrollHandler()}),1),e&&e.target===t||h(r.IDENTIFIER)})),this.stateChanger={loaded:function(){t.$emit("$InfiniteLoading:loaded",{target:t})},complete:function(){t.$emit("$InfiniteLoading:complete",{target:t})},reset:function(){t.$emit("$InfiniteLoading:reset",{target:t})},error:function(){t.status=s.ERROR,g.reset()}},this.onInfinite&&h(r.INFINITE_EVENT)},deactivated:function(){this.status===s.LOADING&&(this.status=s.READY),this.scrollParent.removeEventListener("scroll",this.scrollHandler,a)},activated:function(){this.scrollParent.addEventListener("scroll",this.scrollHandler,a)},methods:{attemptLoad:function(t){var e=this;this.status!==s.COMPLETE&&x(this.$el)&&this.getCurrentDistance()<=this.distance?(this.status=s.LOADING,"top"===this.direction&&this.$nextTick((function(){w.save(e.scrollParent)})),"function"==typeof this.onInfinite?this.onInfinite.call(null,this.stateChanger):this.$emit("infinite",this.stateChanger),!t||this.forceUseInfiniteWrapper||v.isChecked||v.track()):this.status===s.LOADING&&(this.status=s.READY)},getCurrentDistance:function(){var t;"top"===this.direction?t="number"==typeof this.scrollParent.scrollTop?this.scrollParent.scrollTop:this.scrollParent.pageYOffset:t=this.$el.getBoundingClientRect().top-(this.scrollParent===window?window.innerHeight:this.scrollParent.getBoundingClientRect().bottom);return t},getScrollParent:function(){var t,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.$el;return"string"==typeof this.forceUseInfiniteWrapper&&(t=document.querySelector(this.forceUseInfiniteWrapper)),t||("BODY"===e.tagName?t=window:!this.forceUseInfiniteWrapper&&["scroll","auto"].indexOf(getComputedStyle(e).overflowY)>-1?t=e:(e.hasAttribute("infinite-wrapper")||e.hasAttribute("data-infinite-wrapper"))&&(t=e)),t||this.getScrollParent(e.parentNode)}},destroyed:function(){!this.status!==s.COMPLETE&&(g.reset(),w.remove(this.scrollParent),this.scrollParent.removeEventListener("scroll",this.scrollHandler,a))}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"infinite-loading-container"},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.isShowSpinner,expression:"isShowSpinner"}],staticClass:"infinite-status-prompt",style:t.slotStyles.spinner},[t._t("spinner",[n("spinner",{attrs:{spinner:t.spinner}})])],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isShowNoResults,expression:"isShowNoResults"}],staticClass:"infinite-status-prompt",style:t.slotStyles.noResults},[t._t("no-results",[t.slots.noResults.render?n(t.slots.noResults,{tag:"component"}):[t._v(t._s(t.slots.noResults))]])],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isShowNoMore,expression:"isShowNoMore"}],staticClass:"infinite-status-prompt",style:t.slotStyles.noMore},[t._t("no-more",[t.slots.noMore.render?n(t.slots.noMore,{tag:"component"}):[t._v(t._s(t.slots.noMore))]])],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isShowError,expression:"isShowError"}],staticClass:"infinite-status-prompt",style:t.slotStyles.error},[t._t("error",[t.slots.error.render?n(t.slots.error,{tag:"component",attrs:{trigger:t.attemptLoad}}):[t._v("\n        "+t._s(t.slots.error)+"\n        "),n("br"),t._v(" "),n("button",{staticClass:"btn-try-infinite",domProps:{textContent:t._s(t.slots.errorBtnText)},on:{click:t.attemptLoad}})]],{trigger:t.attemptLoad})],2)])}),[],!1,(function(t){var e=n(7);e.__inject__&&e.__inject__(t)}),"644ea9c9",null).exports;function E(t){d.mode=t.config.productionTip?"development":"production"}Object.defineProperty(k,"install",{configurable:!1,enumerable:!1,value:function(t,e){Object.assign(d.props,e&&e.props),Object.assign(d.slots,e&&e.slots),Object.assign(d.system,e&&e.system),t.component("infinite-loading",k),E(t)}}),"undefined"!=typeof window&&window.Vue&&(window.Vue.component("infinite-loading",k),E(window.Vue));e.default=k}])}));
\ No newline at end of file
diff --git a/dist/vue-infinite-loading.min.js b/dist/vue-infinite-loading.min.js
new file mode 100644
index 0000000..0f0a613
--- /dev/null
+++ b/dist/vue-infinite-loading.min.js
@@ -0,0 +1 @@
+var VueInfiniteLoading=function(e){"use strict";function n(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var i,a,r=[],o=!0,l=!1;try{for(t=t.call(e);!(o=(i=t.next()).done)&&(r.push(i.value),!n||r.length!==n);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==t.return||t.return()}finally{if(l)throw a}}return r}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return t(e,n);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return t(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,i=new Array(n);t<n;t++)i[t]=e[t];return i}function i(){}i.prototype={on:function(e,n,t){var i=this.e||(this.e={});return(i[e]||(i[e]=[])).push({fn:n,ctx:t}),this},once:function(e,n,t){var i=this;function a(){i.off(e,a),n.apply(t,arguments)}return a._=n,this.on(e,a,t)},emit:function(e){for(var n=[].slice.call(arguments,1),t=((this.e||(this.e={}))[e]||[]).slice(),i=0,a=t.length;i<a;i++)t[i].fn.apply(t[i].ctx,n);return this},off:function(e,n){var t=this.e||(this.e={}),i=t[e],a=[];if(i&&n)for(var r=0,o=i.length;r<o;r++)i[r].fn!==n&&i[r].fn._!==n&&a.push(i[r]);return a.length?t[e]=a:delete t[e],this}};var a=i,r=i;a.TinyEmitter=r;var o=new a,l=function(){return o.on.apply(o,arguments)},s=function(){return o.emit.apply(o,arguments)},c=["bubbles","circles","spiral","wavedots"],d=e.defineComponent({name:"Spinner",props:["spinner"],computed:{spinnerView:function(){return c.includes(this.spinner)?this.spinner:"default"}}}),p={key:0,class:"loading-default"},u={key:1,class:"loading-bubbles"},h={key:2,class:"loading-circles"},f={key:3,class:"loading-spiral"},m={key:4,class:"loading-wave-dots"};function g(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}g(".loading-wave-dots[data-v-18ae5a62] {\n  position: relative;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-block;\n  margin-top: -8px/2;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  animation: loading-wave-dots-18ae5a62 linear 2.8s infinite;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:first-child {\n  margin-left: -8px/2 + -32px;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(2) {\n  margin-left: -8px/2 + -16px;\n  animation-delay: 0.14s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(3) {\n  margin-left: -8px/2;\n  animation-delay: 0.28s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(4) {\n  margin-left: -8px/2 + 16px;\n  animation-delay: 0.42s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:last-child {\n  margin-left: -8px/2 + 32px;\n  animation-delay: 0.56s;\n}\n@keyframes loading-wave-dots-18ae5a62 {\n0% {\n    transform: translateY(0);\n    background: #bbb;\n}\n10% {\n    transform: translateY(-6px);\n    background: #999;\n}\n20% {\n    transform: translateY(0);\n    background: #bbb;\n}\n100% {\n    transform: translateY(0);\n    background: #bbb;\n}\n}\n.loading-circles[data-v-18ae5a62] .circle-item {\n  width: 5px;\n  height: 5px;\n  animation: loading-circles-18ae5a62 linear 0.75s infinite;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:first-child {\n  margin-top: -5px/2 + -12px;\n  margin-left: -5px/2;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(2) {\n  margin-top: -5px/2 + -8.76px;\n  margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(3) {\n  margin-top: -5px/2;\n  margin-left: -5px/2 + 12px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(4) {\n  margin-top: -5px/2 + 8.76px;\n  margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(5) {\n  margin-top: -5px/2 + 12px;\n  margin-left: -5px/2;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(6) {\n  margin-top: -5px/2 + 8.76px;\n  margin-left: -5px/2 + -8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(7) {\n  margin-top: -5px/2;\n  margin-left: -5px/2 + -12px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:last-child {\n  margin-top: -5px/2 + -8.76px;\n  margin-left: -5px/2 + -8.76px;\n}\n@keyframes loading-circles-18ae5a62 {\n0% {\n    background: #dfdfdf;\n}\n90% {\n    background: #505050;\n}\n100% {\n    background: #dfdfdf;\n}\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item {\n  background: #666;\n  animation: loading-bubbles-18ae5a62 linear 0.75s infinite;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:first-child {\n  margin-top: -1px/2 + -12px;\n  margin-left: -1px/2;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(2) {\n  margin-top: -1px/2 + -8.76px;\n  margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(3) {\n  margin-top: -1px/2;\n  margin-left: -1px/2 + 12px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(4) {\n  margin-top: -1px/2 + 8.76px;\n  margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(5) {\n  margin-top: -1px/2 + 12px;\n  margin-left: -1px/2;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(6) {\n  margin-top: -1px/2 + 8.76px;\n  margin-left: -1px/2 + -8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(7) {\n  margin-top: -1px/2;\n  margin-left: -1px/2 + -12px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:last-child {\n  margin-top: -1px/2 + -8.76px;\n  margin-left: -1px/2 + -8.76px;\n}\n@keyframes loading-bubbles-18ae5a62 {\n0% {\n    width: 1px;\n    height: 1px;\n    box-shadow: 0 0 0 3px #666;\n}\n90% {\n    width: 1px;\n    height: 1px;\n    box-shadow: 0 0 0 0 #666;\n}\n100% {\n    width: 1px;\n    height: 1px;\n    box-shadow: 0 0 0 3px #666;\n}\n}\n.loading-default[data-v-18ae5a62] {\n  position: relative;\n  border: 1px solid #999;\n  animation: loading-rotating-18ae5a62 ease 1.5s infinite;\n}\n.loading-default[data-v-18ae5a62]:before {\n  content: '';\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 50%;\n  margin-top: -6px/2;\n  margin-left: -6px/2;\n  width: 6px;\n  height: 6px;\n  background-color: #999;\n  border-radius: 50%;\n}\n.loading-spiral[data-v-18ae5a62] {\n  border: 2px solid #777;\n  border-right-color: transparent;\n  animation: loading-rotating-18ae5a62 linear 0.85s infinite;\n}\n@keyframes loading-rotating-18ae5a62 {\n0% {\n    transform: rotate(0);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n.loading-bubbles[data-v-18ae5a62],\n.loading-circles[data-v-18ae5a62] {\n  position: relative;\n}\n.loading-circles[data-v-18ae5a62] .circle-item,\n.loading-bubbles[data-v-18ae5a62] .bubble-item {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-block;\n  border-radius: 50%;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(2),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(2) {\n  animation-delay: 0.093s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(3),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(3) {\n  animation-delay: 0.186s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(4),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(4) {\n  animation-delay: 0.279s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(5),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(5) {\n  animation-delay: 0.372s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(6),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(6) {\n  animation-delay: 0.465s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(7),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(7) {\n  animation-delay: 0.558s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:last-child,\n.loading-bubbles[data-v-18ae5a62] .bubble-item:last-child {\n  animation-delay: 0.651s;\n}\n"),d.render=function(n,t,i,a,r,o){return"default"===n.spinnerView?(e.openBlock(),e.createElementBlock("i",p)):"bubbles"===n.spinnerView?(e.openBlock(),e.createElementBlock("span",u,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(8,(function(n){return e.createElementVNode("span",{class:"bubble-item",key:n})})),64))])):"circles"===n.spinnerView?(e.openBlock(),e.createElementBlock("span",h,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(8,(function(n){return e.createElementVNode("span",{class:"circle-item",key:n})})),64))])):"spiral"===n.spinnerView?(e.openBlock(),e.createElementBlock("i",f)):"wavedots"===n.spinnerView?(e.openBlock(),e.createElementBlock("span",m,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(5,(function(n){return e.createElementVNode("span",{class:"wave-item",key:n})})),64))])):e.createCommentVNode("",!0)},d.__scopeId="data-v-18ae5a62";var b={throttleLimit:50,loopCheckTimeout:1e3,loopCheckMaxCalls:10},v=function(){var e=!1;try{var n=Object.defineProperty({},"passive",{get:function(){return e={passive:!0},!0}});window.addEventListener("testpassive",n,n),window.remove("testpassive",n,n)}catch(e){}return e}(),x={INFINITE_EVENT:"`:on-infinite` property will be deprecated soon, please use `@infinite` event instead."},y={INFINITE_LOOP:["executed the callback function more than ".concat(b.loopCheckMaxCalls," times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it. If you want to force to set a element as scroll wrapper ranther than automatic searching, you can do this:"),'\n\x3c!-- add a special attribute for the real scroll wrapper --\x3e\n<div infinite-wrapper>\n  ...\n  \x3c!-- set force-use-infinite-wrapper --\x3e\n  <infinite-loading force-use-infinite-wrapper></infinite-loading>\n</div>\nor\n<div class="infinite-wrapper">\n  ...\n  \x3c!-- set force-use-infinite-wrapper as css selector of the real scroll wrapper --\x3e\n  <infinite-loading force-use-infinite-wrapper=".infinite-wrapper"></infinite-loading>\n</div>\n    ',"more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169"].join("\n")},w={READY:0,LOADING:1,COMPLETE:2,ERROR:3},k={color:"#666",fontSize:"14px",padding:"10px 0"},E={mode:"development",props:{spinner:"default",distance:100,forceUseInfiniteWrapper:!1},system:b,slots:{noResults:"No results :(",noMore:"No more data :)",error:"Opps, something went wrong :(",errorBtnText:"Retry",spinner:""},WARNINGS:x,ERRORS:y,STATUS:w};var S={timers:[],caches:[],throttle:function(e){var n=this;-1===this.caches.indexOf(e)&&(this.caches.push(e),this.timers.push(setTimeout((function(){e(),n.caches.splice(n.caches.indexOf(e),1),n.timers.shift()}),E.system.throttleLimit)))},reset:function(){this.timers.forEach((function(e){clearTimeout(e)})),this.timers.length=0,this.caches=[]}},L={isChecked:!1,timer:null,times:0,track:function(){var e,n=this;this.times+=1,clearTimeout(this.timer),this.timer=setTimeout((function(){n.isChecked=!0}),E.system.loopCheckTimeout),this.times>E.system.loopCheckMaxCalls&&(e=y.INFINITE_LOOP,console.error("[Vue-infinite-loading error]: ".concat(e)),this.isChecked=!0)}},I={key:"_infiniteScrollHeight",getScrollElm:function(e){return e===window?document.documentElement:e},save:function(e){var n=this.getScrollElm(e);n[this.key]=n.scrollHeight},restore:function(e){var n=this.getScrollElm(e);"number"==typeof n[this.key]&&(n.scrollTop=n.scrollHeight-n[this.key]+n.scrollTop),this.remove(n)},remove:function(e){void 0!==e[this.key]&&delete e[this.key]}};function C(e){return e.offsetWidth+e.offsetHeight>0}var N=e.defineComponent({name:"InfiniteLoading",data:function(){return{scrollParent:null,scrollHandler:null,isFirstLoad:!0,status:w.READY,slots:E.slots}},components:{Spinner:d},emits:["infinite","$InfiniteLoading:loaded","$InfiniteLoading:complete","$InfiniteLoading:reset"],computed:{isShowSpinner:function(){return this.status===w.LOADING},isShowError:function(){return this.status===w.ERROR},isShowNoResults:function(){return this.status===w.COMPLETE&&this.isFirstLoad},isShowNoMore:function(){return this.status===w.COMPLETE&&!this.isFirstLoad},slotStyles:function(){var n=this,t={};return Object.keys(E.slots).forEach((function(i){var a,r=i.replace(/[A-Z]/g,(function(e){return"-".concat(e.toLowerCase())}));!n.$slots[r]&&!E.slots[i].render||n.$slots[r]&&(null===(a=n.$slots[r]()[0])||void 0===a?void 0:a.type)===e.Text?t[i]=k:t[i]={}})),t}},props:{distance:{type:Number,default:E.props.distance},spinner:String,direction:{type:String,default:"bottom"},forceUseInfiniteWrapper:{type:[Boolean,String],default:E.props.forceUseInfiniteWrapper},identifier:{default:+new Date}},watch:{identifier:function(){this.stateChanger.reset()}},mounted:function(){var e,n=this;this.$watch("forceUseInfiniteWrapper",(function(){n.scrollParent=n.getScrollParent()}),{immediate:!0}),this.scrollHandler=function(e){n.status===w.READY&&(e&&e.constructor===Event&&C(n.$el)?S.throttle(n.attemptLoad):n.attemptLoad())},setTimeout((function(){n.scrollHandler(),n.scrollParent.addEventListener("scroll",n.scrollHandler,v)}),1),l("$InfiniteLoading:loaded",(function(){n.isFirstLoad=!1,"top"===n.direction&&n.$nextTick((function(){I.restore(n.scrollParent)})),n.status===w.LOADING&&n.$nextTick(n.attemptLoad.bind(null,!0))})),l("$InfiniteLoading:complete",(function(){n.status=w.COMPLETE,n.$nextTick((function(){n.$forceUpdate()})),n.scrollParent.removeEventListener("scroll",n.scrollHandler,v)})),l("$InfiniteLoading:reset",(function(){n.status=w.READY,n.isFirstLoad=!0,I.remove(n.scrollParent),n.scrollParent.addEventListener("scroll",n.scrollHandler,v),setTimeout((function(){S.reset(),n.scrollHandler()}),1)})),this.stateChanger={loaded:function(){n.$emit("$InfiniteLoading:loaded",{target:n}),s("$InfiniteLoading:loaded",{target:n})},complete:function(){n.$emit("$InfiniteLoading:complete",{target:n}),s("$InfiniteLoading:complete",{target:n})},reset:function(){n.$emit("$InfiniteLoading:reset",{target:n}),s("$InfiniteLoading:reset",{target:n})},error:function(){n.status=w.ERROR,S.reset()}},this.onInfinite&&(e=x.INFINITE_EVENT,console.warn("[Vue-infinite-loading warn]: ".concat(e)))},deactivated:function(){this.status===w.LOADING&&(this.status=w.READY),this.scrollParent.removeEventListener("scroll",this.scrollHandler,v)},activated:function(){this.scrollParent.addEventListener("scroll",this.scrollHandler,v)},methods:{attemptLoad:function(e){var n=this;this.status!==w.COMPLETE&&C(this.$el)&&this.getCurrentDistance()<=this.distance?(this.status=w.LOADING,"top"===this.direction&&this.$nextTick((function(){I.save(n.scrollParent)})),"function"==typeof this.onInfinite?this.onInfinite.call(null,this.stateChanger):this.$emit("infinite",this.stateChanger),!e||this.forceUseInfiniteWrapper||L.isChecked||L.track()):this.status===w.LOADING&&(this.status=w.READY)},getCurrentDistance:function(){var e;"top"===this.direction?e="number"==typeof this.scrollParent.scrollTop?this.scrollParent.scrollTop:this.scrollParent.pageYOffset:e=this.$el.getBoundingClientRect().top-(this.scrollParent===window?window.innerHeight:this.scrollParent.getBoundingClientRect().bottom);return e},getScrollParent:function(){var e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.$el;return"string"==typeof this.forceUseInfiniteWrapper&&(e=document.querySelector(this.forceUseInfiniteWrapper)),e||("BODY"===n.tagName?e=window:(!this.forceUseInfiniteWrapper&&["scroll","auto"].indexOf(getComputedStyle(n).overflowY)>-1||n.hasAttribute("infinite-wrapper")||n.hasAttribute("data-infinite-wrapper"))&&(e=n)),e||this.getScrollParent(n.parentNode)}},unmounted:function(){!this.status!==w.COMPLETE&&(S.reset(),I.remove(this.scrollParent),this.scrollParent.removeEventListener("scroll",this.scrollHandler,v))}}),T={class:"infinite-loading-container"},B=function(n){return e.pushScopeId("data-v-38327aa8"),n=n(),e.popScopeId(),n}((function(){return e.createElementVNode("br",null,null,-1)})),$=["textContent"];g(".infinite-loading-container[data-v-38327aa8] {\n  clear: both;\n  text-align: center;\n}\n.infinite-loading-container[data-v-38327aa8] *[class^=loading-] {\n  display: inline-block;\n  margin: 5px 0;\n  width: 28px;\n  height: 28px;\n  font-size: 28px;\n  line-height: 28px;\n  border-radius: 50%;\n}\n.btn-try-infinite[data-v-38327aa8] {\n  margin-top: 5px;\n  padding: 5px 10px;\n  color: #999;\n  font-size: 14px;\n  line-height: 1;\n  background: transparent;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  outline: none;\n  cursor: pointer;\n}\n.btn-try-infinite[data-v-38327aa8]:not(:active):hover {\n  opacity: 0.8;\n}\n"),N.render=function(n,t,i,a,r,o){var l=e.resolveComponent("spinner");return e.openBlock(),e.createElementBlock("div",T,[e.withDirectives(e.createElementVNode("div",{class:"infinite-status-prompt",style:e.normalizeStyle(n.slotStyles.spinner)},[e.renderSlot(n.$slots,"spinner",e.normalizeProps(e.guardReactiveProps({isFirstLoad:n.isFirstLoad})),(function(){return[e.createVNode(l,{spinner:n.spinner},null,8,["spinner"])]}))],4),[[e.vShow,n.isShowSpinner]]),e.withDirectives(e.createElementVNode("div",{class:"infinite-status-prompt",style:e.normalizeStyle(n.slotStyles.noResults)},[e.renderSlot(n.$slots,"no-results",{},(function(){return[n.slots.noResults.render?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.slots.noResults),{key:0})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(n.slots.noResults),1)],64))]}))],4),[[e.vShow,n.isShowNoResults]]),e.withDirectives(e.createElementVNode("div",{class:"infinite-status-prompt",style:e.normalizeStyle(n.slotStyles.noMore)},[e.renderSlot(n.$slots,"no-more",{},(function(){return[n.slots.noMore.render?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.slots.noMore),{key:0})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(n.slots.noMore),1)],64))]}))],4),[[e.vShow,n.isShowNoMore]]),e.withDirectives(e.createElementVNode("div",{class:"infinite-status-prompt",style:e.normalizeStyle(n.slotStyles.error)},[e.renderSlot(n.$slots,"error",{trigger:n.attemptLoad},(function(){return[n.slots.error.render?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.slots.error),{key:0,trigger:n.attemptLoad},null,8,["trigger"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(n.slots.error)+" ",1),B,e.createElementVNode("button",{class:"btn-try-infinite",onClick:t[0]||(t[0]=function(){return n.attemptLoad&&n.attemptLoad.apply(n,arguments)}),textContent:e.toDisplayString(n.slots.errorBtnText)},null,8,$)],64))]}))],4),[[e.vShow,n.isShowError]])])},N.__scopeId="data-v-38327aa8";var O=function(){var e=N;return e.install=function(n){n.component("VueInfiniteLoading",e)},e}(),P=Object.freeze({__proto__:null,default:O});return Object.entries(P).forEach((function(e){var t=n(e,2),i=t[0],a=t[1];"default"!==i&&(O[i]=a)})),O}(Vue);
\ No newline at end of file
diff --git a/dist/vue-infinite-loading.ssr.js b/dist/vue-infinite-loading.ssr.js
new file mode 100644
index 0000000..2a12313
--- /dev/null
+++ b/dist/vue-infinite-loading.ssr.js
@@ -0,0 +1,795 @@
+'use strict';var vue=require('vue');function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}function E () {
+  // Keep this empty so it's easier to inherit from
+  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
+}
+
+E.prototype = {
+  on: function (name, callback, ctx) {
+    var e = this.e || (this.e = {});
+
+    (e[name] || (e[name] = [])).push({
+      fn: callback,
+      ctx: ctx
+    });
+
+    return this;
+  },
+
+  once: function (name, callback, ctx) {
+    var self = this;
+    function listener () {
+      self.off(name, listener);
+      callback.apply(ctx, arguments);
+    }
+    listener._ = callback;
+    return this.on(name, listener, ctx);
+  },
+
+  emit: function (name) {
+    var data = [].slice.call(arguments, 1);
+    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+    var i = 0;
+    var len = evtArr.length;
+
+    for (i; i < len; i++) {
+      evtArr[i].fn.apply(evtArr[i].ctx, data);
+    }
+
+    return this;
+  },
+
+  off: function (name, callback) {
+    var e = this.e || (this.e = {});
+    var evts = e[name];
+    var liveEvents = [];
+
+    if (evts && callback) {
+      for (var i = 0, len = evts.length; i < len; i++) {
+        if (evts[i].fn !== callback && evts[i].fn._ !== callback)
+          liveEvents.push(evts[i]);
+      }
+    }
+
+    // Remove event from queue to prevent memory leak
+    // Suggested by https://github.com/lazd
+    // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
+
+    (liveEvents.length)
+      ? e[name] = liveEvents
+      : delete e[name];
+
+    return this;
+  }
+};
+
+var tinyEmitter = E;
+var TinyEmitter = E;
+tinyEmitter.TinyEmitter = TinyEmitter;var instance = new tinyEmitter();
+
+var emitter = instance;var eventHub = {
+  $on: function $on() {
+    return emitter.on.apply(emitter, arguments);
+  },
+  $once: function $once() {
+    return emitter.once.apply(emitter, arguments);
+  },
+  $off: function $off() {
+    return emitter.off.apply(emitter, arguments);
+  },
+  $emit: function $emit() {
+    return emitter.emit.apply(emitter, arguments);
+  }
+};var SPINNERS = ['bubbles', 'circles', 'spiral', 'wavedots'];
+var script$1 = /* #__PURE__ */vue.defineComponent({
+  name: 'Spinner',
+  props: ['spinner'],
+  computed: {
+    spinnerView: function spinnerView() {
+      return !SPINNERS.includes(this.spinner) ? 'default' : this.spinner;
+    }
+  }
+});var _hoisted_1$1 = {
+  key: 0,
+  class: "loading-default"
+};
+var _hoisted_2$1 = {
+  key: 1,
+  class: "loading-bubbles"
+};
+var _hoisted_3$1 = {
+  key: 2,
+  class: "loading-circles"
+};
+var _hoisted_4 = {
+  key: 3,
+  class: "loading-spiral"
+};
+var _hoisted_5 = {
+  key: 4,
+  class: "loading-wave-dots"
+};
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.spinnerView === 'default' ? (vue.openBlock(), vue.createElementBlock("i", _hoisted_1$1)) : _ctx.spinnerView === 'bubbles' ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, [(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(8, function (x) {
+    return vue.createElementVNode("span", {
+      class: "bubble-item",
+      key: x
+    });
+  }), 64))])) : _ctx.spinnerView === 'circles' ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, [(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(8, function (x) {
+    return vue.createElementVNode("span", {
+      class: "circle-item",
+      key: x
+    });
+  }), 64))])) : _ctx.spinnerView === 'spiral' ? (vue.openBlock(), vue.createElementBlock("i", _hoisted_4)) : _ctx.spinnerView === 'wavedots' ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, [(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(5, function (x) {
+    return vue.createElementVNode("span", {
+      class: "wave-item",
+      key: x
+    });
+  }), 64))])) : vue.createCommentVNode("", true);
+}function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}var css_248z$1 = ".loading-wave-dots[data-v-18ae5a62] {\n  position: relative;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-block;\n  margin-top: -8px/2;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  animation: loading-wave-dots-18ae5a62 linear 2.8s infinite;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:first-child {\n  margin-left: -8px/2 + -32px;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(2) {\n  margin-left: -8px/2 + -16px;\n  animation-delay: 0.14s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(3) {\n  margin-left: -8px/2;\n  animation-delay: 0.28s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(4) {\n  margin-left: -8px/2 + 16px;\n  animation-delay: 0.42s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:last-child {\n  margin-left: -8px/2 + 32px;\n  animation-delay: 0.56s;\n}\n@keyframes loading-wave-dots-18ae5a62 {\n0% {\n    transform: translateY(0);\n    background: #bbb;\n}\n10% {\n    transform: translateY(-6px);\n    background: #999;\n}\n20% {\n    transform: translateY(0);\n    background: #bbb;\n}\n100% {\n    transform: translateY(0);\n    background: #bbb;\n}\n}\n.loading-circles[data-v-18ae5a62] .circle-item {\n  width: 5px;\n  height: 5px;\n  animation: loading-circles-18ae5a62 linear 0.75s infinite;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:first-child {\n  margin-top: -5px/2 + -12px;\n  margin-left: -5px/2;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(2) {\n  margin-top: -5px/2 + -8.76px;\n  margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(3) {\n  margin-top: -5px/2;\n  margin-left: -5px/2 + 12px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(4) {\n  margin-top: -5px/2 + 8.76px;\n  margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(5) {\n  margin-top: -5px/2 + 12px;\n  margin-left: -5px/2;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(6) {\n  margin-top: -5px/2 + 8.76px;\n  margin-left: -5px/2 + -8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(7) {\n  margin-top: -5px/2;\n  margin-left: -5px/2 + -12px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:last-child {\n  margin-top: -5px/2 + -8.76px;\n  margin-left: -5px/2 + -8.76px;\n}\n@keyframes loading-circles-18ae5a62 {\n0% {\n    background: #dfdfdf;\n}\n90% {\n    background: #505050;\n}\n100% {\n    background: #dfdfdf;\n}\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item {\n  background: #666;\n  animation: loading-bubbles-18ae5a62 linear 0.75s infinite;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:first-child {\n  margin-top: -1px/2 + -12px;\n  margin-left: -1px/2;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(2) {\n  margin-top: -1px/2 + -8.76px;\n  margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(3) {\n  margin-top: -1px/2;\n  margin-left: -1px/2 + 12px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(4) {\n  margin-top: -1px/2 + 8.76px;\n  margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(5) {\n  margin-top: -1px/2 + 12px;\n  margin-left: -1px/2;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(6) {\n  margin-top: -1px/2 + 8.76px;\n  margin-left: -1px/2 + -8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(7) {\n  margin-top: -1px/2;\n  margin-left: -1px/2 + -12px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:last-child {\n  margin-top: -1px/2 + -8.76px;\n  margin-left: -1px/2 + -8.76px;\n}\n@keyframes loading-bubbles-18ae5a62 {\n0% {\n    width: 1px;\n    height: 1px;\n    box-shadow: 0 0 0 3px #666;\n}\n90% {\n    width: 1px;\n    height: 1px;\n    box-shadow: 0 0 0 0 #666;\n}\n100% {\n    width: 1px;\n    height: 1px;\n    box-shadow: 0 0 0 3px #666;\n}\n}\n.loading-default[data-v-18ae5a62] {\n  position: relative;\n  border: 1px solid #999;\n  animation: loading-rotating-18ae5a62 ease 1.5s infinite;\n}\n.loading-default[data-v-18ae5a62]:before {\n  content: '';\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 50%;\n  margin-top: -6px/2;\n  margin-left: -6px/2;\n  width: 6px;\n  height: 6px;\n  background-color: #999;\n  border-radius: 50%;\n}\n.loading-spiral[data-v-18ae5a62] {\n  border: 2px solid #777;\n  border-right-color: transparent;\n  animation: loading-rotating-18ae5a62 linear 0.85s infinite;\n}\n@keyframes loading-rotating-18ae5a62 {\n0% {\n    transform: rotate(0);\n}\n100% {\n    transform: rotate(360deg);\n}\n}\n.loading-bubbles[data-v-18ae5a62],\n.loading-circles[data-v-18ae5a62] {\n  position: relative;\n}\n.loading-circles[data-v-18ae5a62] .circle-item,\n.loading-bubbles[data-v-18ae5a62] .bubble-item {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-block;\n  border-radius: 50%;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(2),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(2) {\n  animation-delay: 0.093s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(3),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(3) {\n  animation-delay: 0.186s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(4),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(4) {\n  animation-delay: 0.279s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(5),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(5) {\n  animation-delay: 0.372s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(6),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(6) {\n  animation-delay: 0.465s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(7),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(7) {\n  animation-delay: 0.558s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:last-child,\n.loading-bubbles[data-v-18ae5a62] .bubble-item:last-child {\n  animation-delay: 0.651s;\n}\n";
+styleInject(css_248z$1);script$1.render = render$1;
+script$1.__scopeId = "data-v-18ae5a62";/*
+ * default property values
+ */
+var props = {
+  // the default spinner type
+  spinner: 'default',
+  // the default critical distance
+  distance: 100,
+  // the default force use infinite wrapper flag
+  forceUseInfiniteWrapper: false
+};
+/**
+ * default system settings
+ */
+
+var system = {
+  // the default throttle space of time
+  throttleLimit: 50,
+  // the timeout for check infinite loop, unit: ms
+  loopCheckTimeout: 1000,
+  // the max allowed number of continuous calls, unit: ms
+  loopCheckMaxCalls: 10
+};
+/**
+ * default slot messages
+ */
+
+var slots = {
+  noResults: 'No results :(',
+  noMore: 'No more data :)',
+  error: 'Opps, something went wrong :(',
+  errorBtnText: 'Retry',
+  spinner: ''
+};
+/**
+ * the 3rd argument for event bundler
+ * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ */
+
+var evt3rdArg = function () {
+  var result = false;
+
+  try {
+    var arg = Object.defineProperty({}, 'passive', {
+      get: function get() {
+        result = {
+          passive: true
+        };
+        return true;
+      }
+    });
+    window.addEventListener('testpassive', arg, arg);
+    window.remove('testpassive', arg, arg);
+  } catch (e) {
+    /* */
+  }
+
+  return result;
+}();
+/**
+ * warning messages
+ */
+
+var WARNINGS = {
+  INFINITE_EVENT: '`:on-infinite` property will be deprecated soon, please use `@infinite` event instead.'
+};
+/**
+ * error messages
+ */
+
+var ERRORS = {
+  INFINITE_LOOP: ["executed the callback function more than ".concat(system.loopCheckMaxCalls, " times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it. If you want to force to set a element as scroll wrapper ranther than automatic searching, you can do this:"), "\n<!-- add a special attribute for the real scroll wrapper -->\n<div infinite-wrapper>\n  ...\n  <!-- set force-use-infinite-wrapper -->\n  <infinite-loading force-use-infinite-wrapper></infinite-loading>\n</div>\nor\n<div class=\"infinite-wrapper\">\n  ...\n  <!-- set force-use-infinite-wrapper as css selector of the real scroll wrapper -->\n  <infinite-loading force-use-infinite-wrapper=\".infinite-wrapper\"></infinite-loading>\n</div>\n    ", 'more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169'].join('\n')
+};
+/**
+ * plugin status constants
+ */
+
+var STATUS = {
+  READY: 0,
+  LOADING: 1,
+  COMPLETE: 2,
+  ERROR: 3
+};
+/**
+ * default slot styles
+ */
+
+var SLOT_STYLES = {
+  color: '#666',
+  fontSize: '14px',
+  padding: '10px 0'
+};
+var config = {
+  mode: 'development',
+  props: props,
+  system: system,
+  slots: slots,
+  WARNINGS: WARNINGS,
+  ERRORS: ERRORS,
+  STATUS: STATUS
+};/* eslint-disable no-console */
+/**
+ * console warning in production
+ * @param {String} msg console content
+ */
+
+function warn(msg) {
+  /* istanbul ignore else */
+  {
+    console.warn("[Vue-infinite-loading warn]: ".concat(msg));
+  }
+}
+/**
+ * console error
+ * @param {String} msg console content
+ */
+
+function error(msg) {
+  console.error("[Vue-infinite-loading error]: ".concat(msg));
+}
+var throttleer = {
+  timers: [],
+  caches: [],
+  throttle: function throttle(fn) {
+    var _this = this;
+
+    if (this.caches.indexOf(fn) === -1) {
+      // cache current handler
+      this.caches.push(fn); // save timer for current handler
+
+      this.timers.push(setTimeout(function () {
+        fn(); // empty cache and timer
+
+        _this.caches.splice(_this.caches.indexOf(fn), 1);
+
+        _this.timers.shift();
+      }, config.system.throttleLimit));
+    }
+  },
+  reset: function reset() {
+    // reset all timers
+    this.timers.forEach(function (timer) {
+      clearTimeout(timer);
+    });
+    this.timers.length = 0; // empty caches
+
+    this.caches = [];
+  }
+};
+var loopTracker = {
+  isChecked: false,
+  timer: null,
+  times: 0,
+  track: function track() {
+    var _this2 = this;
+
+    // record track times
+    this.times += 1; // try to mark check status
+
+    clearTimeout(this.timer);
+    this.timer = setTimeout(function () {
+      _this2.isChecked = true;
+    }, config.system.loopCheckTimeout); // throw warning if the times of continuous calls large than the maximum times
+
+    if (this.times > config.system.loopCheckMaxCalls) {
+      error(ERRORS.INFINITE_LOOP);
+      this.isChecked = true;
+    }
+  }
+};
+var scrollBarStorage = {
+  key: '_infiniteScrollHeight',
+  getScrollElm: function getScrollElm(elm) {
+    return elm === window ? document.documentElement : elm;
+  },
+  save: function save(elm) {
+    var target = this.getScrollElm(elm); // save scroll height on the scroll parent
+
+    target[this.key] = target.scrollHeight;
+  },
+  restore: function restore(elm) {
+    var target = this.getScrollElm(elm);
+    /* istanbul ignore else */
+
+    if (typeof target[this.key] === 'number') {
+      target.scrollTop = target.scrollHeight - target[this.key] + target.scrollTop;
+    }
+
+    this.remove(target);
+  },
+  remove: function remove(elm) {
+    if (elm[this.key] !== undefined) {
+      // remove scroll height
+      delete elm[this.key]; // eslint-disable-line no-param-reassign
+    }
+  }
+};
+/**
+ * kebab-case a camel-case string
+ * @param   {String}    str  source string
+ * @return  {String}
+ */
+
+function kebabCase(str) {
+  return str.replace(/[A-Z]/g, function (s) {
+    return "-".concat(s.toLowerCase());
+  });
+}
+/**
+ * get visibility for element
+ * @param   {DOM}     elm
+ * @return  {Boolean}
+ */
+
+function isVisible(elm) {
+  return elm.offsetWidth + elm.offsetHeight > 0;
+}var script = /* #__PURE__ */vue.defineComponent({
+  name: 'InfiniteLoading',
+  data: function data() {
+    return {
+      scrollParent: null,
+      scrollHandler: null,
+      isFirstLoad: true,
+      // save the current loading whether it is the first loading
+      status: STATUS.READY,
+      slots: config.slots
+    };
+  },
+  components: {
+    Spinner: script$1
+  },
+  emits: ['infinite', '$InfiniteLoading:loaded', '$InfiniteLoading:complete', '$InfiniteLoading:reset'],
+  computed: {
+    isShowSpinner: function isShowSpinner() {
+      return this.status === STATUS.LOADING;
+    },
+    isShowError: function isShowError() {
+      return this.status === STATUS.ERROR;
+    },
+    isShowNoResults: function isShowNoResults() {
+      return this.status === STATUS.COMPLETE && this.isFirstLoad;
+    },
+    isShowNoMore: function isShowNoMore() {
+      return this.status === STATUS.COMPLETE && !this.isFirstLoad;
+    },
+    slotStyles: function slotStyles() {
+      var _this = this;
+
+      var styles = {};
+      Object.keys(config.slots).forEach(function (key) {
+        var _this$$slots$name$;
+
+        var name = kebabCase(key);
+
+        if ( // no slot and the configured default slot is not a Vue component
+        !_this.$slots[name] && !config.slots[key].render || _this.$slots[name] && ((_this$$slots$name$ = _this.$slots[name]()[0]) === null || _this$$slots$name$ === void 0 ? void 0 : _this$$slots$name$.type) === vue.Text) {
+          // only apply default styles for pure text slot
+          styles[key] = SLOT_STYLES;
+        } else {
+          styles[key] = {};
+        }
+      });
+      return styles;
+    }
+  },
+  props: {
+    distance: {
+      type: Number,
+      default: config.props.distance
+    },
+    spinner: String,
+    direction: {
+      type: String,
+      default: 'bottom'
+    },
+    forceUseInfiniteWrapper: {
+      type: [Boolean, String],
+      default: config.props.forceUseInfiniteWrapper
+    },
+    identifier: {
+      default: +new Date()
+    }
+  },
+  watch: {
+    identifier: function identifier() {
+      this.stateChanger.reset();
+    }
+  },
+  mounted: function mounted() {
+    var _this2 = this;
+
+    this.$watch('forceUseInfiniteWrapper', function () {
+      _this2.scrollParent = _this2.getScrollParent();
+    }, {
+      immediate: true
+    });
+
+    this.scrollHandler = function (ev) {
+      if (_this2.status === STATUS.READY) {
+        if (ev && ev.constructor === Event && isVisible(_this2.$el)) {
+          throttleer.throttle(_this2.attemptLoad);
+        } else {
+          _this2.attemptLoad();
+        }
+      }
+    };
+
+    setTimeout(function () {
+      _this2.scrollHandler();
+
+      _this2.scrollParent.addEventListener('scroll', _this2.scrollHandler, evt3rdArg);
+    }, 1);
+    eventHub.$on('$InfiniteLoading:loaded', function () {
+      _this2.isFirstLoad = false;
+
+      if (_this2.direction === 'top') {
+        // wait for DOM updated
+        _this2.$nextTick(function () {
+          scrollBarStorage.restore(_this2.scrollParent);
+        });
+      }
+
+      if (_this2.status === STATUS.LOADING) {
+        _this2.$nextTick(_this2.attemptLoad.bind(null, true));
+      }
+    });
+    eventHub.$on('$InfiniteLoading:complete', function () {
+      _this2.status = STATUS.COMPLETE; // force re-complation computed properties to fix the problem of get slot text delay
+
+      _this2.$nextTick(function () {
+        _this2.$forceUpdate();
+      });
+
+      _this2.scrollParent.removeEventListener('scroll', _this2.scrollHandler, evt3rdArg);
+    });
+    eventHub.$on('$InfiniteLoading:reset', function () {
+      _this2.status = STATUS.READY;
+      _this2.isFirstLoad = true;
+      scrollBarStorage.remove(_this2.scrollParent);
+
+      _this2.scrollParent.addEventListener('scroll', _this2.scrollHandler, evt3rdArg); // wait for list to be empty and the empty action may trigger a scroll event
+
+
+      setTimeout(function () {
+        throttleer.reset();
+
+        _this2.scrollHandler();
+      }, 1);
+    });
+    /**
+     * change state for this component, pass to the callback
+     */
+
+    this.stateChanger = {
+      loaded: function loaded() {
+        _this2.$emit('$InfiniteLoading:loaded', {
+          target: _this2
+        });
+
+        eventHub.$emit('$InfiniteLoading:loaded', {
+          target: _this2
+        });
+      },
+      complete: function complete() {
+        _this2.$emit('$InfiniteLoading:complete', {
+          target: _this2
+        });
+
+        eventHub.$emit('$InfiniteLoading:complete', {
+          target: _this2
+        });
+      },
+      reset: function reset() {
+        _this2.$emit('$InfiniteLoading:reset', {
+          target: _this2
+        });
+
+        eventHub.$emit('$InfiniteLoading:reset', {
+          target: _this2
+        });
+      },
+      error: function error() {
+        _this2.status = STATUS.ERROR;
+        throttleer.reset();
+      }
+    };
+
+    if (this.onInfinite) {
+      warn(WARNINGS.INFINITE_EVENT);
+    }
+  },
+
+  /**
+   * To adapt to keep-alive feature, but only work on Vue 2.2.0 and above, see: https://vuejs.org/v2/api/#keep-alive
+   */
+  deactivated: function deactivated() {
+    /* istanbul ignore else */
+    if (this.status === STATUS.LOADING) {
+      this.status = STATUS.READY;
+    }
+
+    this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
+  },
+  activated: function activated() {
+    this.scrollParent.addEventListener('scroll', this.scrollHandler, evt3rdArg);
+  },
+  methods: {
+    /**
+     * attempt trigger load
+     * @param {Boolean} isContinuousCall  the flag of continuous call, it will be true
+     *                                    if this method be called in the `loaded`
+     *                                    event handler
+     */
+    attemptLoad: function attemptLoad(isContinuousCall) {
+      var _this3 = this;
+
+      if (this.status !== STATUS.COMPLETE && isVisible(this.$el) && this.getCurrentDistance() <= this.distance) {
+        this.status = STATUS.LOADING;
+
+        if (this.direction === 'top') {
+          // wait for spinner display
+          this.$nextTick(function () {
+            scrollBarStorage.save(_this3.scrollParent);
+          });
+        }
+
+        if (typeof this.onInfinite === 'function') {
+          this.onInfinite.call(null, this.stateChanger);
+        } else {
+          this.$emit('infinite', this.stateChanger);
+        }
+
+        if (isContinuousCall && !this.forceUseInfiniteWrapper && !loopTracker.isChecked) {
+          // check this component whether be in an infinite loop if it is not checked
+          // more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169
+          loopTracker.track();
+        }
+      } else if (this.status === STATUS.LOADING) {
+        this.status = STATUS.READY;
+      }
+    },
+
+    /**
+     * get current distance from the specified direction
+     * @return {Number}     distance
+     */
+    getCurrentDistance: function getCurrentDistance() {
+      var distance;
+
+      if (this.direction === 'top') {
+        distance = typeof this.scrollParent.scrollTop === 'number' ? this.scrollParent.scrollTop : this.scrollParent.pageYOffset;
+      } else {
+        var infiniteElmOffsetTopFromBottom = this.$el.getBoundingClientRect().top;
+        var scrollElmOffsetTopFromBottom = this.scrollParent === window ? window.innerHeight : this.scrollParent.getBoundingClientRect().bottom;
+        distance = infiniteElmOffsetTopFromBottom - scrollElmOffsetTopFromBottom;
+      }
+
+      return distance;
+    },
+
+    /**
+     * get the first scroll parent of an element
+     * @param  {DOM} elm    cache element for recursive search
+     * @return {DOM}        the first scroll parent
+     */
+    getScrollParent: function getScrollParent() {
+      var elm = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.$el;
+      var result;
+
+      if (typeof this.forceUseInfiniteWrapper === 'string') {
+        result = document.querySelector(this.forceUseInfiniteWrapper);
+      }
+
+      if (!result) {
+        if (elm.tagName === 'BODY') {
+          result = window;
+        } else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
+          result = elm;
+        } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
+          result = elm;
+        }
+      }
+
+      return result || this.getScrollParent(elm.parentNode);
+    }
+  },
+  unmounted: function unmounted() {
+    /* istanbul ignore else */
+    if (!this.status !== STATUS.COMPLETE) {
+      throttleer.reset();
+      scrollBarStorage.remove(this.scrollParent);
+      this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
+    }
+  }
+});var _withScopeId = function _withScopeId(n) {
+  return vue.pushScopeId("data-v-38327aa8"), n = n(), vue.popScopeId(), n;
+};
+
+var _hoisted_1 = {
+  class: "infinite-loading-container"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(function () {
+  return /*#__PURE__*/vue.createElementVNode("br", null, null, -1);
+});
+
+var _hoisted_3 = ["textContent"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_spinner = vue.resolveComponent("spinner");
+
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [vue.withDirectives(vue.createElementVNode("div", {
+    class: "infinite-status-prompt",
+    style: vue.normalizeStyle(_ctx.slotStyles.spinner)
+  }, [vue.renderSlot(_ctx.$slots, "spinner", vue.normalizeProps(vue.guardReactiveProps({
+    isFirstLoad: _ctx.isFirstLoad
+  })), function () {
+    return [vue.createVNode(_component_spinner, {
+      spinner: _ctx.spinner
+    }, null, 8, ["spinner"])];
+  })], 4), [[vue.vShow, _ctx.isShowSpinner]]), vue.withDirectives(vue.createElementVNode("div", {
+    class: "infinite-status-prompt",
+    style: vue.normalizeStyle(_ctx.slotStyles.noResults)
+  }, [vue.renderSlot(_ctx.$slots, "no-results", {}, function () {
+    return [_ctx.slots.noResults.render ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.slots.noResults), {
+      key: 0
+    })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+      key: 1
+    }, [vue.createTextVNode(vue.toDisplayString(_ctx.slots.noResults), 1)], 64))];
+  })], 4), [[vue.vShow, _ctx.isShowNoResults]]), vue.withDirectives(vue.createElementVNode("div", {
+    class: "infinite-status-prompt",
+    style: vue.normalizeStyle(_ctx.slotStyles.noMore)
+  }, [vue.renderSlot(_ctx.$slots, "no-more", {}, function () {
+    return [_ctx.slots.noMore.render ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.slots.noMore), {
+      key: 0
+    })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+      key: 1
+    }, [vue.createTextVNode(vue.toDisplayString(_ctx.slots.noMore), 1)], 64))];
+  })], 4), [[vue.vShow, _ctx.isShowNoMore]]), vue.withDirectives(vue.createElementVNode("div", {
+    class: "infinite-status-prompt",
+    style: vue.normalizeStyle(_ctx.slotStyles.error)
+  }, [vue.renderSlot(_ctx.$slots, "error", {
+    trigger: _ctx.attemptLoad
+  }, function () {
+    return [_ctx.slots.error.render ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.slots.error), {
+      key: 0,
+      trigger: _ctx.attemptLoad
+    }, null, 8, ["trigger"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+      key: 1
+    }, [vue.createTextVNode(vue.toDisplayString(_ctx.slots.error) + " ", 1), _hoisted_2, vue.createElementVNode("button", {
+      class: "btn-try-infinite",
+      onClick: _cache[0] || (_cache[0] = function () {
+        return _ctx.attemptLoad && _ctx.attemptLoad.apply(_ctx, arguments);
+      }),
+      textContent: vue.toDisplayString(_ctx.slots.errorBtnText)
+    }, null, 8, _hoisted_3)], 64))];
+  })], 4), [[vue.vShow, _ctx.isShowError]])]);
+}var css_248z = ".infinite-loading-container[data-v-38327aa8] {\n  clear: both;\n  text-align: center;\n}\n.infinite-loading-container[data-v-38327aa8] *[class^=loading-] {\n  display: inline-block;\n  margin: 5px 0;\n  width: 28px;\n  height: 28px;\n  font-size: 28px;\n  line-height: 28px;\n  border-radius: 50%;\n}\n.btn-try-infinite[data-v-38327aa8] {\n  margin-top: 5px;\n  padding: 5px 10px;\n  color: #999;\n  font-size: 14px;\n  line-height: 1;\n  background: transparent;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  outline: none;\n  cursor: pointer;\n}\n.btn-try-infinite[data-v-38327aa8]:not(:active):hover {\n  opacity: 0.8;\n}\n";
+styleInject(css_248z);script.render = render;
+script.__scopeId = "data-v-38327aa8";// Import vue component
+// IIFE injects install function into component, allowing component
+// to be registered via Vue.use() as well as Vue.component(),
+
+var component = /* #__PURE__ */(function () {
+  // Get component instance
+  var installable = script; // Attach install function executed by Vue.use()
+
+  installable.install = function (app) {
+    app.component('VueInfiniteLoading', installable);
+  };
+
+  return installable;
+})(); // It's possible to expose named exports when writing components that can
+// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
+// export const RollupDemoDirective = directive;
+var namedExports=/*#__PURE__*/Object.freeze({__proto__:null,'default':component});// only expose one global var, with named exports exposed as properties of
+// that global var (eg. plugin.namedExport)
+
+Object.entries(namedExports).forEach(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+      exportName = _ref2[0],
+      exported = _ref2[1];
+
+  if (exportName !== 'default') component[exportName] = exported;
+});module.exports=component;
\ No newline at end of file
diff --git a/package.json b/package.json
index 53c3c83..d919962 100644
--- a/package.json
+++ b/package.json
@@ -1,21 +1,30 @@
 {
   "name": "vue-infinite-loading",
-  "version": "2.4.5",
+  "version": "3.0.0-alpha.0",
   "description": "An infinite scroll plugin for Vue.js",
-  "main": "dist/vue-infinite-loading.js",
+  "main": "dist/vue-infinite-loading.ssr.js",
+  "browser": "dist/vue-infinite-loading.esm.js",
+  "module": "dist/vue-infinite-loading.esm.js",
+  "unpkg": "dist/vue-infinite-loading.min.js",
   "typings": "types/index.d.ts",
   "files": [
-    "dist/vue-infinite-loading.js",
+    "dist/*",
     "types/*.d.ts",
-    "src"
+    "src/**/*.vue"
+  ],
+  "sideEffects": [
+    "*.vue"
   ],
   "author": {
     "name": "PeachScript",
     "email": "scdzwyxst@gmail.com"
   },
   "scripts": {
-    "dev": "webpack-dev-server --config scripts/webpack.config.js --hot --info=false --port 8000",
-    "build": "NODE_ENV=production webpack --config scripts/webpack.config.js -p --progress --hide-modules",
+    "serve": "vue-cli-service serve dev/serve.js",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
+    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
+    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "docs:deploy": "bash ./scripts/deploy_docs.sh",
@@ -40,27 +49,32 @@
     "url": "https://github.com/PeachScript/vue-infinite-loading/issues"
   },
   "homepage": "https://github.com/PeachScript/vue-infinite-loading",
+  "dependencies": {
+    "tiny-emitter": "^2.1.0"
+  },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.1",
+    "@rollup/plugin-alias": "^3.1.1",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-replace": "^2.3.4",
+    "@vue/cli-plugin-babel": "^4.5.10",
+    "@vue/cli-service": "^4.5.10",
+    "@vue/compiler-sfc": "^3.2.4",
     "@vuepress/plugin-google-analytics": "^1.0.0-alpha.16",
     "autoprefixer": "^9.1.5",
-    "babel-loader": "^8.0.2",
-    "babel-plugin-istanbul": "^5.0.1",
     "chai": "^3.5.0",
-    "css-loader": "^0.28.4",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-formatter-friendly": "^6.0.0",
-    "eslint-loader": "^2.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-vue": "^4.7.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-formatter-friendly": "^7.0.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-vue": "^7.18.0",
     "focus-visible": "^4.1.5",
-    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "karma": "^3.0.0",
     "karma-chai": "^0.1.0",
@@ -70,31 +84,27 @@
     "karma-sinon-chai": "^1.3.1",
     "karma-spec-reporter": "0.0.31",
     "karma-webpack": "^4.0.0-rc.2",
-    "less": "^3.8.1",
-    "less-loader": "^4.1.0",
+    "less": "^4.1.1",
+    "minimist": "^1.2.5",
     "mocha": "^5.2.0",
     "phantomjs-prebuilt": "^2.1.15",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.2.3",
+    "rollup": "^2.36.1",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-scss": "^2.6.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass": "^1.32.12",
     "sinon": "^2.4.1",
     "sinon-chai": "^2.13.0",
-    "vue": "^2.6.10",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.10",
+    "vue": "^3.0.5",
     "vuepress": "^1.0.0-alpha.23",
-    "webpack": "^4.17.2",
-    "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.8"
   },
   "peerDependencies": {
-    "vue": "^2.6.10"
+    "vue": "^3.0.5"
   },
   "license": "MIT",
-  "browserslist": [
-    "> 1%",
-    "last 1 versions",
-    "last 4 Android versions",
-    "last 3 iOS versions"
-  ],
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -117,11 +127,17 @@
     "extends": [
       "airbnb-base",
       "plugin:vue/essential"
-    ]
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    }
   },
   "eslintIgnore": [
+    "build",
+    "dev",
     "dist",
     "test/unit/coverage",
+    "test/unit",
     "scripts"
   ]
 }
diff --git a/src/components/InfiniteLoading.vue b/src/components/InfiniteLoading.vue
index 9efadbd..a9c9c35 100644
--- a/src/components/InfiniteLoading.vue
+++ b/src/components/InfiniteLoading.vue
@@ -1,64 +1,18 @@
-<template>
-  <div class="infinite-loading-container">
-    <div
-      class="infinite-status-prompt"
-      v-show="isShowSpinner"
-      :style="slotStyles.spinner">
-      <slot name="spinner" v-bind="{ isFirstLoad }">
-        <spinner :spinner="spinner" />
-      </slot>
-    </div>
-    <div
-      class="infinite-status-prompt"
-      :style="slotStyles.noResults"
-      v-show="isShowNoResults">
-      <slot name="no-results">
-        <component v-if="slots.noResults.render" :is="slots.noResults"></component>
-        <template v-else>{{ slots.noResults }}</template>
-      </slot>
-    </div>
-    <div
-      class="infinite-status-prompt"
-      :style="slotStyles.noMore"
-      v-show="isShowNoMore">
-      <slot name="no-more">
-        <component v-if="slots.noMore.render" :is="slots.noMore"></component>
-        <template v-else>{{ slots.noMore }}</template>
-      </slot>
-    </div>
-    <div
-      class="infinite-status-prompt"
-      :style="slotStyles.error"
-      v-show="isShowError">
-      <slot name="error" :trigger="attemptLoad">
-        <component
-          v-if="slots.error.render"
-          :is="slots.error"
-          :trigger="attemptLoad">
-        </component>
-        <template v-else>
-          {{ slots.error }}
-          <br>
-          <button
-            class="btn-try-infinite"
-            @click="attemptLoad"
-            v-text="slots.errorBtnText">
-          </button>
-        </template>
-      </slot>
-    </div>
-  </div>
-</template>
 <script>
+import { defineComponent, Text } from 'vue';
+
+import eventHub from '../eventHub';
 import Spinner from './Spinner.vue';
+
 import config, {
   evt3rdArg, WARNINGS, STATUS, SLOT_STYLES,
 } from '../config';
+
 import {
   warn, throttleer, loopTracker, scrollBarStorage, kebabCase, isVisible,
 } from '../utils';
 
-export default {
+export default /* #__PURE__ */defineComponent({
   name: 'InfiniteLoading',
   data() {
     return {
@@ -72,6 +26,7 @@ export default {
   components: {
     Spinner,
   },
+  emits: ['infinite', '$InfiniteLoading:loaded', '$InfiniteLoading:complete', '$InfiniteLoading:reset'],
   computed: {
     isShowSpinner() {
       return this.status === STATUS.LOADING;
@@ -106,11 +61,13 @@ export default {
           // has slot and slot is pure text node
           || (
             this.$slots[name]
-            && !this.$slots[name][0].tag
+            && this.$slots[name]()[0]?.type === Text
           )
         ) {
           // only apply default styles for pure text slot
           styles[key] = SLOT_STYLES;
+        } else {
+          styles[key] = {};
         }
       });
 
@@ -134,7 +91,6 @@ export default {
     identifier: {
       default: +new Date(),
     },
-    onInfinite: Function,
   },
   watch: {
     identifier() {
@@ -161,7 +117,7 @@ export default {
       this.scrollParent.addEventListener('scroll', this.scrollHandler, evt3rdArg);
     }, 1);
 
-    this.$on('$InfiniteLoading:loaded', (ev) => {
+    eventHub.$on('$InfiniteLoading:loaded', () => {
       this.isFirstLoad = false;
 
       if (this.direction === 'top') {
@@ -174,13 +130,9 @@ export default {
       if (this.status === STATUS.LOADING) {
         this.$nextTick(this.attemptLoad.bind(null, true));
       }
-
-      if (!ev || ev.target !== this) {
-        warn(WARNINGS.STATE_CHANGER);
-      }
     });
 
-    this.$on('$InfiniteLoading:complete', (ev) => {
+    eventHub.$on('$InfiniteLoading:complete', () => {
       this.status = STATUS.COMPLETE;
 
       // force re-complation computed properties to fix the problem of get slot text delay
@@ -189,13 +141,9 @@ export default {
       });
 
       this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
-
-      if (!ev || ev.target !== this) {
-        warn(WARNINGS.STATE_CHANGER);
-      }
     });
 
-    this.$on('$InfiniteLoading:reset', (ev) => {
+    eventHub.$on('$InfiniteLoading:reset', () => {
       this.status = STATUS.READY;
       this.isFirstLoad = true;
       scrollBarStorage.remove(this.scrollParent);
@@ -206,10 +154,6 @@ export default {
         throttleer.reset();
         this.scrollHandler();
       }, 1);
-
-      if (!ev || ev.target !== this) {
-        warn(WARNINGS.IDENTIFIER);
-      }
     });
 
     /**
@@ -218,12 +162,15 @@ export default {
     this.stateChanger = {
       loaded: () => {
         this.$emit('$InfiniteLoading:loaded', { target: this });
+        eventHub.$emit('$InfiniteLoading:loaded', { target: this });
       },
       complete: () => {
         this.$emit('$InfiniteLoading:complete', { target: this });
+        eventHub.$emit('$InfiniteLoading:complete', { target: this });
       },
       reset: () => {
         this.$emit('$InfiniteLoading:reset', { target: this });
+        eventHub.$emit('$InfiniteLoading:reset', { target: this });
       },
       error: () => {
         this.status = STATUS.ERROR;
@@ -250,11 +197,11 @@ export default {
   },
   methods: {
     /**
-    * attempt trigger load
-    * @param {Boolean} isContinuousCall  the flag of continuous call, it will be true
-    *                                    if this method be called in the `loaded`
-    *                                    event handler
-    */
+     * attempt trigger load
+     * @param {Boolean} isContinuousCall  the flag of continuous call, it will be true
+     *                                    if this method be called in the `loaded`
+     *                                    event handler
+     */
     attemptLoad(isContinuousCall) {
       if (
         this.status !== STATUS.COMPLETE
@@ -286,9 +233,9 @@ export default {
       }
     },
     /**
-    * get current distance from the specified direction
-    * @return {Number}     distance
-    */
+     * get current distance from the specified direction
+     * @return {Number}     distance
+     */
     getCurrentDistance() {
       let distance;
 
@@ -308,10 +255,10 @@ export default {
       return distance;
     },
     /**
-    * get the first scroll parent of an element
-    * @param  {DOM} elm    cache element for recursive search
-    * @return {DOM}        the first scroll parent
-    */
+     * get the first scroll parent of an element
+     * @param  {DOM} elm    cache element for recursive search
+     * @return {DOM}        the first scroll parent
+     */
     getScrollParent(elm = this.$el) {
       let result;
 
@@ -332,7 +279,7 @@ export default {
       return result || this.getScrollParent(elm.parentNode);
     },
   },
-  destroyed() {
+  unmounted() {
     /* istanbul ignore else */
     if (!this.status !== STATUS.COMPLETE) {
       throttleer.reset();
@@ -340,41 +287,94 @@ export default {
       this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
     }
   },
-};
+});
 </script>
+
+<template>
+  <div class="infinite-loading-container">
+    <div
+      class="infinite-status-prompt"
+      v-show="isShowSpinner"
+      :style="slotStyles.spinner">
+      <slot name="spinner" v-bind="{ isFirstLoad }">
+        <spinner :spinner="spinner" />
+      </slot>
+    </div>
+    <div
+      class="infinite-status-prompt"
+      :style="slotStyles.noResults"
+      v-show="isShowNoResults">
+      <slot name="no-results">
+        <component v-if="slots.noResults.render" :is="slots.noResults"></component>
+        <template v-else>{{ slots.noResults }}</template>
+      </slot>
+    </div>
+    <div
+      class="infinite-status-prompt"
+      :style="slotStyles.noMore"
+      v-show="isShowNoMore">
+      <slot name="no-more">
+        <component v-if="slots.noMore.render" :is="slots.noMore"></component>
+        <template v-else>{{ slots.noMore }}</template>
+      </slot>
+    </div>
+    <div
+      class="infinite-status-prompt"
+      :style="slotStyles.error"
+      v-show="isShowError">
+      <slot name="error" :trigger="attemptLoad">
+        <component
+          v-if="slots.error.render"
+          :is="slots.error"
+          :trigger="attemptLoad">
+        </component>
+        <template v-else>
+          {{ slots.error }}
+          <br>
+          <button
+            class="btn-try-infinite"
+            @click="attemptLoad"
+            v-text="slots.errorBtnText">
+          </button>
+        </template>
+      </slot>
+    </div>
+  </div>
+</template>
+
 <style lang="less" scoped>
-@deep: ~'>>>';
-
-.infinite-loading-container {
-  clear: both;
-  text-align: center;
-
-  @{deep} *[class^=loading-] {
-    @size: 28px;
-    display: inline-block;
-    margin: 5px 0;
-    width: @size;
-    height: @size;
-    font-size: @size;
-    line-height: @size;
-    border-radius: 50%;
+  @deep: ~'>>>';
+
+  .infinite-loading-container {
+    clear: both;
+    text-align: center;
+
+    @{deep} *[class^=loading-] {
+      @size: 28px;
+      display: inline-block;
+      margin: 5px 0;
+      width: @size;
+      height: @size;
+      font-size: @size;
+      line-height: @size;
+      border-radius: 50%;
+    }
   }
-}
-
-.btn-try-infinite {
-  margin-top: 5px;
-  padding: 5px 10px;
-  color: #999;
-  font-size: 14px;
-  line-height: 1;
-  background: transparent;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  outline: none;
-  cursor: pointer;
-
-  &:not(:active):hover {
-    opacity: 0.8;
+
+  .btn-try-infinite {
+    margin-top: 5px;
+    padding: 5px 10px;
+    color: #999;
+    font-size: 14px;
+    line-height: 1;
+    background: transparent;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    outline: none;
+    cursor: pointer;
+
+    &:not(:active):hover {
+      opacity: 0.8;
+    }
   }
-}
 </style>
diff --git a/src/components/Spinner.vue b/src/components/Spinner.vue
index 25a8674..c8f7a17 100644
--- a/src/components/Spinner.vue
+++ b/src/components/Spinner.vue
@@ -1,102 +1,39 @@
 <template>
-  <component :is="spinnerView"></component>
+  <i class="loading-default" v-if="spinnerView === 'default'"></i>
+
+  <span class="loading-bubbles" v-else-if="spinnerView === 'bubbles'">
+    <span v-for="x in 8" class="bubble-item" :key="x"></span>
+  </span>
+
+  <span class="loading-circles" v-else-if="spinnerView === 'circles'">
+    <span v-for="x in 8" class="circle-item" :key="x"></span>
+  </span>
+
+  <i class="loading-spiral" v-else-if="spinnerView === 'spiral'"></i>
+
+  <span class="loading-wave-dots" v-else-if="spinnerView === 'wavedots'">
+    <span v-for="x in 5" class="wave-item" :key="x"></span>
+  </span>
 </template>
 
 <script>
-import config from '../config';
+import { defineComponent } from 'vue';
 
-const SPINNERS = {
-  BUBBLES: {
-    render(createElement) {
-      return createElement('span', {
-        attrs: {
-          class: 'loading-bubbles',
-        },
-      }, Array.apply(Array, Array(8)).map(() => createElement('span', {
-        attrs: {
-          class: 'bubble-item',
-        },
-      })));
-    },
-  },
-  CIRCLES: {
-    render(createElement) {
-      return createElement('span', {
-        attrs: {
-          class: 'loading-circles',
-        },
-      }, Array.apply(Array, Array(8)).map(() => createElement('span', {
-        attrs: {
-          class: 'circle-item',
-        },
-      })));
-    },
-  },
-  DEFAULT: {
-    render(createElement) {
-      return createElement('i', {
-        attrs: {
-          class: 'loading-default',
-        },
-      });
-    },
-  },
-  SPIRAL: {
-    render(createElement) {
-      return createElement('i', {
-        attrs: {
-          class: 'loading-spiral',
-        },
-      });
-    },
-  },
-  WAVEDOTS: {
-    render(createElement) {
-      return createElement('span', {
-        attrs: {
-          class: 'loading-wave-dots',
-        },
-      }, Array.apply(Array, Array(5)).map(() => createElement('span', {
-        attrs: {
-          class: 'wave-item',
-        },
-      })));
-    },
-  },
-};
+const SPINNERS = [
+  'bubbles', 'circles', 'spiral', 'wavedots',
+];
 
-export default {
+export default /* #__PURE__ */defineComponent({
   name: 'Spinner',
+  props: ['spinner'],
   computed: {
     spinnerView() {
-      return (
-        SPINNERS[(this.$attrs.spinner || '').toUpperCase()]
-        || this.spinnerInConfig // fallback to spinner of config
-      );
-    },
-    spinnerInConfig() {
-      let result;
-
-      if (config.slots.spinner && typeof config.slots.spinner === 'string') {
-        // as spinner slot config a pure text spinner
-        result = {
-          render() {
-            return this._v(config.slots.spinner); // eslint-disable-line no-underscore-dangle
-          },
-        };
-      } else if (typeof config.slots.spinner === 'object') {
-        // as spinner slot config a Vue component
-        result = config.slots.spinner;
-      } else {
-        // fallback to spinner property config
-        /* istanbul ignore next */
-        result = SPINNERS[config.props.spinner.toUpperCase()] || SPINNERS.DEFAULT;
-      }
-
-      return result;
+      return !SPINNERS.includes(this.spinner)
+        ? 'default'
+        : this.spinner;
     },
   },
-};
+});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/config.js b/src/config.js
index 41166a1..77782a0 100644
--- a/src/config.js
+++ b/src/config.js
@@ -67,29 +67,7 @@ export const evt3rdArg = (() => {
  */
 
 export const WARNINGS = {
-  STATE_CHANGER: [
-    'emit `loaded` and `complete` event through component instance of `$refs` may cause error, so it will be deprecated soon, please use the `$state` argument instead (`$state` just the special `$event` variable):',
-    '\ntemplate:',
-    '<infinite-loading @infinite="infiniteHandler"></infinite-loading>',
-    `
-script:
-...
-infiniteHandler($state) {
-  ajax('https://www.example.com/api/news')
-    .then((res) => {
-      if (res.data.length) {
-        $state.loaded();
-      } else {
-        $state.complete();
-      }
-    });
-}
-...`,
-    '',
-    'more details: https://github.com/PeachScript/vue-infinite-loading/issues/57#issuecomment-324370549',
-  ].join('\n'),
   INFINITE_EVENT: '`:on-infinite` property will be deprecated soon, please use `@infinite` event instead.',
-  IDENTIFIER: 'the `reset` event will be deprecated soon, please reset this component by change the `identifier` property.',
 };
 
 /**
diff --git a/src/entry.esm.js b/src/entry.esm.js
new file mode 100644
index 0000000..41b3763
--- /dev/null
+++ b/src/entry.esm.js
@@ -0,0 +1,20 @@
+// Import vue component
+import component from './components/InfiniteLoading.vue';
+
+// Default export is installable instance of component.
+// IIFE injects install function into component, allowing component
+// to be registered via Vue.use() as well as Vue.component(),
+export default /* #__PURE__ */(() => {
+  // Get component instance
+  const installable = component;
+
+  // Attach install function executed by Vue.use()
+  installable.install = (app) => {
+    app.component('VueInfiniteLoading', installable);
+  };
+  return installable;
+})();
+
+// It's possible to expose named exports when writing components that can
+// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
+// export const RollupDemoDirective = directive;
diff --git a/src/entry.js b/src/entry.js
new file mode 100644
index 0000000..48dfc63
--- /dev/null
+++ b/src/entry.js
@@ -0,0 +1,11 @@
+// iife/cjs usage extends esm default export - so import it all
+import component, * as namedExports from './entry.esm';
+
+// Attach named exports directly to component. IIFE/CJS will
+// only expose one global var, with named exports exposed as properties of
+// that global var (eg. plugin.namedExport)
+Object.entries(namedExports).forEach(([exportName, exported]) => {
+  if (exportName !== 'default') component[exportName] = exported;
+});
+
+export default component;
diff --git a/src/eventHub.js b/src/eventHub.js
new file mode 100644
index 0000000..9622e45
--- /dev/null
+++ b/src/eventHub.js
@@ -0,0 +1,8 @@
+import emitter from 'tiny-emitter/instance';
+
+export default {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args),
+};
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 8580aa5..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import config from './config';
-import InfiniteLoading from './components/InfiniteLoading.vue';
-
-function syncModeFromVue(Vue) {
-  config.mode = Vue.config.productionTip ? 'development' : 'production';
-}
-
-Object.defineProperty(InfiniteLoading, 'install', {
-  configurable: false,
-  enumerable: false,
-  value(Vue, options) {
-    // override default props
-    Object.assign(config.props, options && options.props);
-
-    // override default slots
-    Object.assign(config.slots, options && options.slots);
-
-    // override default system settings
-    Object.assign(config.system, options && options.system);
-
-    // register component
-    Vue.component('infinite-loading', InfiniteLoading);
-
-    syncModeFromVue(Vue);
-  },
-});
-
-// register component automatically if there has global Vue
-/* istanbul ignore else */
-if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.component('infinite-loading', InfiniteLoading);
-  syncModeFromVue(window.Vue);
-}
-
-export default InfiniteLoading;
diff --git a/src/utils.js b/src/utils.js
index 6c478f6..6168825 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -108,7 +108,7 @@ export const scrollBarStorage = {
  * @return  {String}
  */
 export function kebabCase(str) {
-  return str.replace(/[A-Z]/g, s => `-${s.toLowerCase()}`);
+  return str.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
 }
 
 /**
diff --git a/test/unit/index.js b/test/unit/index.js
index a3da046..103ece6 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.common';
+import Vue from 'vue';
 
 // mock passive event listener support and not support
 (() => {
diff --git a/test/unit/specs/InfiniteLoading.spec.js b/test/unit/specs/InfiniteLoading.spec.js
index 668ca3e..ea9d85d 100644
--- a/test/unit/specs/InfiniteLoading.spec.js
+++ b/test/unit/specs/InfiniteLoading.spec.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import Vue from 'vue/dist/vue.common';
+import Vue from 'vue';
 import { isShow, continuesCall, fakeBox } from '../utils';
 import config from '../../../src/config';
 import { loopTracker } from '../../../src/utils';
diff --git a/test/unit/specs/index.spec.js b/test/unit/specs/index.spec.js
index 26e50e1..814c812 100644
--- a/test/unit/specs/index.spec.js
+++ b/test/unit/specs/index.spec.js
@@ -1,4 +1,6 @@
+// eslint-disable-next-line import/no-unresolved
 import Vue from 'vue/dist/vue.common';
+// eslint-disable-next-line import/extensions,import/no-unresolved
 import InfiniteLoading from '../../../src';
 import config from '../../../src/config';