Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR support #18

Closed
tobeorla opened this issue Oct 3, 2016 · 45 comments
Closed

SSR support #18

tobeorla opened this issue Oct 3, 2016 · 45 comments

Comments

@tobeorla
Copy link

tobeorla commented Oct 3, 2016

¿Will SSR be supported?

ReferenceError: window is not defined
at C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:12046
at C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:11978
at p.exports (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:12264)
at Object. (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:12740)
at e (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:408)
at Object.module.exports.render._h.staticClass (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:9170)
at e (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:408)
at Object. (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:640)
at e (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:408)
at p.__esModule.default (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:496)

@PeachScript
Copy link
Owner

Excuse me, I don't know what is the SSR, could you explain to me?

@cwirz
Copy link

cwirz commented Oct 10, 2016

@cwirz
Copy link

cwirz commented Oct 10, 2016

Does someone know how to prevent this error?: ReferenceError: window is not defined

@PeachScript
Copy link
Owner

PeachScript commented Oct 10, 2016

Thanks for your explanation @Wirzi , SSR stands for Server-Side rendering.

But in fact I hasn't been used it, so I need some time to try it, if you solved this problem, please help me to improve this plugin, thanks again :)

@cwirz
Copy link

cwirz commented Oct 10, 2016

Sure I will help but i just started to use server side rendering.
I think we should change the code to make sure window is not called when code is running on server, because there is no window in node: https://rc.vuejs.org/guide/ssr.html#Simple-SSR-with-the-Express-Web-Server

@josemanuelp
Copy link

I could make it work using jsdom.

const jsdom     = require('jsdom').jsdom
//...
global.document = jsdom('<!doctype html><html><body></body></html>', { url: 'http://localhost' })
global.window   = document.defaultView
global.navigator = window.navigator

put this at the top of server/express source file.

Note: Still better that the plugin check for the existence of window var.

@diogobeda
Copy link

diogobeda commented Jan 18, 2017

I had to use this project on a server rendered app and made some changes to make it work. I currently don't have too much time to make an appropriate pull request, but I'll leave the commit that made it work here if anyone or the author wants to turn it into an actual pull request for both master and next branches.

This is the commit:
https://github.com/diogobeda/vue-infinite-loading/commit/ce4fa5594bcd1d11a13c1abe9cd2012e7b3014ed

What I had to do was:

  • Extract the styles to a file, cause a code injected by style-loader was referencing window
  • Remove the global component registration. This most probably doesn't have to go, you can import Vue from 'vue' to register it globally.

cc @PeachScript

@PeachScript
Copy link
Owner

PeachScript commented Jan 19, 2017

@diogobeda Thank you very much! I try your solution and find the key point to support SSR, the key point is the style-loader doesn't support local export, details in here, so I think we cannot find a prefect solution before the style-loader changes.

And I found a workaround to support SSR, you just need two steps for your SSR app:

  1. use import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue'; instead of import InfiniteLoading from 'vue-infinite-loading;
  2. npm install less less-loader --save-dev if you have not installed them

I tested it successfully with this demo vue2-ssr-example, perhaps this workaround can help you :D @tobeorla @cwirz @josemanuelp @diogobeda

@diogobeda
Copy link

Awesome @PeachScript. I was using my forked version, will definitely use your workaround now. Thanks :)

@PeachScript
Copy link
Owner

Glad you like the workaround @diogobeda , I closed this issue and you can reopen it if you need in the future.

@gokhanozdemir
Copy link

This solution also works with Nuxt.js, thanks @PeachScript .

@PeachScript
Copy link
Owner

PeachScript commented Mar 9, 2017

@gokhanozdemir you're welcome :D

@mohitgupta1918
Copy link

mohitgupta1918 commented Mar 21, 2017

I am using vue-infinite-loading with nuxj.js for SSR.I did perform both the steps of workaround mentioned by @PeachScript .I am using the vue-infinite-loading in 'ListItems.vue' component
I am still getting an error:

ERROR in ./~/vue-infinite-loading/src/components/InfiniteLoading.vue
Module not found: Error: Can't resolve 'less-loader' in '/home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/src/components'
 @ ./~/vue-infinite-loading/src/components/InfiniteLoading.vue 3:0-197
 @ ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"]}!./~/vue-loader/lib/selector.js?type=script&index=0!./components/listing/ListItems.vue
 @ ./components/listing/ListItems.vue
  @ ./pages/plp.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?reload=true ./.nuxt/client.js

./~/vue-infinite-loading/src/components/InfiniteLoading.vue
Module not found: Error: Can't resolve 'less-loader' in '/home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/src/components'
resolve 'less-loader' in '/home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/src/components'
  Parsed request is a module
  using description file: /home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/package.json (relative path: ./src/components)
  after using description file: /home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/package.json (relative path: ./src/components)
    resolve as module
      looking for modules in /home/mohitg/node_projects/project_name/node_modules/nuxt/node_modules
        using description file: /home/mohitg/node_projects/tproject_name/node_modules/nuxt/package.json (relative path: ./node_modules)
...

@PeachScript
Copy link
Owner

@mohitgupta1918 I have not used nuxt.js yet, so I don't know how it works, but it looks like dependency resolve error, have you tried to install less-loader in the vue-infinite-loading directory?

@mkalygin
Copy link

mkalygin commented May 14, 2017

@mohitgupta1918 With Nuxt I ended up copying all the necessary code to my project with credits to @PeachScript under components/vendor/InfiniteLoading.vue. This solution works well. I also use SCSS in my projects, so I just renamed @size to $size and all the styles became correct SCSS code without additional dependency for LESS.

P.S. Thanks for such a good component with detailed docs.

@dnlup
Copy link

dnlup commented Oct 13, 2017

@gokhanozdemir I am also using nuxt.js but the loader is complaining that it can't find the style files imported in Spinner.vue and spinner.less. Putting the extension .less to the import calls resolved the problem. Did you have this problem or I have something misconfigured (sorry if the question is stupid but I just started using nuxtjs)?

@PeachScript Thanks for this awesome component!

@ckpiggy
Copy link

ckpiggy commented Oct 15, 2017

I also use nuxt.js too, here is how I integrate nuxt.js with vue-infinite-loading, nuxt.js add support after v1.0.0-rc7

  1. add a plugin to register infinite-loading
    in ~/plugins/infinite-load.js
import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.component('infinite-loading', InfiniteLoading)
  1. add this plugin in nuxt.config.js
    ex:
...
plugins:[
    '~/plugins/i18n.js',
    '~/plugins/axios.js',
    '~/plugins/infinite-load.js'
  ],
...
  1. in your template use no-ssr tag to wrap infinite-loading tag
......
            <no-ssr>
                <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
                    <span slot="no-more">no more data...</span>
                </infinite-loading>
            </no-ssr>
......

@dnlup
Copy link

dnlup commented Oct 16, 2017

@ckpiggy I tried your setup and it works. In my instead, I am importing from vue-infinite-loading/src/components/Infiniteloading.vue but I am not using the no-ssr option, so I am rendering it on server side too. Beside that it is pretty much the same. I guess I am either missing some config or having some issue with the style loader. Anyway, I guess it makes sense using using this component only on client side. Thanks.

@gijo-varghese
Copy link

@PeachScript in the documentation it says:
import InfiniteLoading from "vue-infinite-loading/src/components/Infiniteloading.vue";

Buts its actually:
import InfiniteLoading from "vue-infinite-loading/src/components/InfiniteLoading.vue";

@PeachScript
Copy link
Owner

@gijo-varghese what is the difference between them?

@gijo-varghese
Copy link

@PeachScript Infiniteloading and InfiniteLoading. It was giving me an error

@PeachScript
Copy link
Owner

@gijo-varghese oh it's a low-level mistake I will fix it, thank you very much!

@PeachScript
Copy link
Owner

Hi @gijo-varghese , it has been fixed :)

@DUMUUZEEJIA
Copy link

DUMUUZEEJIA commented Jan 28, 2018

we use nuxt of srr , the Samsung S6 UC browser page flashes over

@jaelys
Copy link

jaelys commented Feb 8, 2018

請問我在SSR下
使用Base ues 範例完全複製來測試
並用import InfiniteLoading from "vue-infinite-loading/src/components/InfiniteLoading.vue";取代
但出現如下錯誤,能否指導一下,我是新手很抱歉,less-loader less都有安裝了,感謝您!!

ERROR in ./node_modules/vue-infinite-loading/src/components/InfiniteLoading.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div class="infinite-loading-container">
|     <div v-show="isLoading">
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./ClientApp/pages/systempage/ListDoc.vue 10:46-112

@PeachScript
Copy link
Owner

@jaelys 不必客气,应该是 vue-loader 的配置中忽略了 node_modules,把 node_modules/vue-infinite-loading 目录包含进去试试看。

@DUMUUZEEJIA
Copy link

DUMUUZEEJIA commented Feb 9, 2018

这个组件有一个弊端,组件和和其他html一定要在同一个根下,并且其他html必须在用一个元素包裹他们,不然会有页面数据清空现象。

<div><section><div/><h1/><p/>。。。</section><infinite-loading/></div>
这个格式去使用

@jaelys
Copy link

jaelys commented Feb 9, 2018

非常感謝@PeachScript,我在vue-loader include了,目前正常運行中^^

test: /.vue$/,
include: /ClientApp|node_modules(?!/vue-infinite-loading)/
loader: "vue-loader",

@jaelys
Copy link

jaelys commented Feb 12, 2018

很抱歉,在今天更新了webpack 3.11.0 less 3.0.0 webpack-dev-middleware 2.0.5 autoprefixer 8.0.0
之後,原本正常的組件突然出現

ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-e662244e","scoped":true,"sourceMap":true}!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue-infinite-loading/src/components/Spinner.vue
Module build failed: 

@import '../styles/spinner';
^
Can't resolve '../styles/spinner' in 'C:\Code\Web\node_modules\vue-infinite-loading\src\components'

問題已解決,原因發生在更新了less 2.7.3 -> 3.0.0 ,降回2.7.3已正常,
可能原因為Less更新說明 中的
Inline JavaScript disabled by default for security reasons (use @plugin)

@NoraGithub
Copy link

NoraGithub commented Jun 19, 2018

把 node_modules/vue-infinite-loading 目录包含进去试试看。

@PeachScript 有没有合适的建议怎么加进去?我加进去始终无法解决。

rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueConfig,
        include:[resolve('/node_modules/vue-infinite-loading'),resolve('src')]
      },
...
]
rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueConfig,
       exclude:/node_modules\/(?!(vue-infinite-loading)\/).*/
      },
...
]

@NoraGithub
Copy link

错误信息:

[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token <
[vue-router] uncaught error during route navigation:
/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-infinite-loading/src/components/InfiniteLoading.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^
SyntaxError: Unexpected token <
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at r (/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:4386:18)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.264 (11.server-bundle.js:406:114)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.126 (11.server-bundle.js:9:144)
    at __webpack_require__ (server-bundle.js:27:30)
    at process._tickDomainCallback (internal/process/next_tick.js:135:7)
/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-infinite-loading/src/components/InfiniteLoading.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^
SyntaxError: Unexpected token <
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at r (/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:4386:18)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.264 (11.server-bundle.js:406:114)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.126 (11.server-bundle.js:9:144)
    at __webpack_require__ (server-bundle.js:27:30)
    at process._tickDomainCallback (internal/process/next_tick.js:135:7) '/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-infinite-loading/src/components/InfiniteLoading.vue:1\n(function (exports, require, module, __filename, __dirname) { <template>\n                                                              ^\nSyntaxError: Unexpected token <\n    at createScript (vm.js:53:10)\n    at Object.runInThisContext (vm.js:95:10)\n    at Module._compile (module.js:543:28)\n    at Object.Module._extensions..js (module.js:580:10)\n    at Module.load (module.js:488:32)\n    at tryModuleLoad (module.js:447:12)\n    at Function.Module._load (module.js:439:3)\n    at Module.require (module.js:498:17)\n    at require (internal/module.js:20:19)\n    at r (/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-server-renderer/build.js:8330:16)\n    at Object.<anonymous> (server-bundle.js:4386:18)\n    at __webpack_require__ (server-bundle.js:27:30)\n    at Object.264 (11.server-bundle.js:406:114)\n    at __webpack_require__ (server-bundle.js:27:30)\n    at Object.126 (11.server-bundle.js:9:144)\n    at __webpack_require__ (server-bundle.js:27:30)\n    at process._tickDomainCallback (internal/process/next_tick.js:135:7)'

@PeachScript
Copy link
Owner

@NoraGithub 如果是基于 Nuxt,建议配合 no-ssr 使用而不是像这样加载组件。

@frederic117
Copy link

Hello
I'm using Nuxt too!
i try what @ckpiggy and @dnlup suggest but i got this error...
Please, a little help :)
fred

(function (exports, require, module, __filename, __dirname) {
^

SyntaxError: Unexpected token <
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at r (C:\Users\Frederic_2\Documents\InsidersFoot\node_modules\vue-server-renderer\build.js:8341:16)
at Object.vue-infinite-loading/src/components/InfiniteLoading.vue (server-bundle.js:105744:18)
at webpack_require (webpack/bootstrap:19:0)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./client/components/connect/StreamTimelineBabble.vue?vue&type=script&lang=js& (client/components/connect/StreamTimelineBabble.vue?0e15:1:0)
at webpack_require (webpack/bootstrap:19:0)
at Module../client/components/connect/StreamTimelineBabble.vue?vue&type=script&lang=js& (client/components/connect/StreamTimelineBabble.vue?dba4:1:0)

@Skasi
Copy link

Skasi commented Nov 2, 2018

@frederic117 I've had the same problem after upgrading to nuxt 2.x and node 10.x. I solved it by using a plugin that is not rendered serverside.

Add a plugin to the plugins folder:

/plugins/infinite-loading.js

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.use(InfiniteLoading)

Register the plugin in nuxt.config.js and disable SSR.

plugins: [
  { src: '~/plugins/infinite-loading.js', ssr: false }
]

Now you can use the <infinite-loading> component in your templates.

@PeachScript
Copy link
Owner

@Skasi good idea, I will add it into docs, thanks! And is the <no-ssr></no-ssr> also can works?

@Skasi
Copy link

Skasi commented Nov 6, 2018

@PeachScript when using the plugin, yes:
plugins: [ { src: '~/plugins/infinite-loading.js' } ] in combination with <no-ssr><infinite-loading/></no-ssr> works.


But without using a plugin, when importing the component and registering it with vue I get the same error others already mentioned. It worked in the past, but no longer after updating node and nuxt.

<template>
  <div>
    <no-ssr>
      <infinite-loading/>
    </no-ssr>
  </div>
</template>

<script>
  import InfiniteLoading from 'vue-infinite-loading/src/components/InfiniteLoading.vue'

  export default {
    name: 'test',
    components: {
      InfiniteLoading
    }
  }
</script>
× error C:\Project\node_modules\vue-infinite-loading\src\components\InfiniteLoading.vue:1
  (function (exports, require, module, __filename, __dirname) { <template>
  ^

  SyntaxError: Unexpected token <
  at new Script (vm.js:79:7)
  at createScript (vm.js:251:10)
  at Object.runInThisContext (vm.js:303:10)
  at Module._compile (internal/modules/cjs/loader.js:656:28)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
  at Module.load (internal/modules/cjs/loader.js:598:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
  at Function.Module._load (internal/modules/cjs/loader.js:529:3)
  at Module.require (internal/modules/cjs/loader.js:636:17)
  at require (internal/modules/cjs/helpers.js:20:18)
  at r (C:\Project\node_modules\vue-server-renderer\build.js:8341:16)
  at Object.vue-infinite-loading/src/components/InfiniteLoading.vue (server-bundle.js:11419:18)
  at __webpack_require__ (server-bundle.js:27:30)
  at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/test.vue?vue&type=script&lang=js& (pages_test.js:13:113)
  at __webpack_require__ (server-bundle.js:27:30)
  at Module../pages/test.vue?vue&type=script&lang=js& (pages_test.js:101:195)

@PeachScript
Copy link
Owner

@Skasi got it, thank you for spending time on these details, it is very great and useful!

@xiewl
Copy link

xiewl commented Nov 7, 2018

@PeachScript 下午好,在vue组件内直接引用import InfiniteLoading from 'vue-infinite-loading'; 再加上no-ssr标签在最新版(v2.4.0)会报找不到window。但我记得以前是可以的。然后我去翻另一个Nuxt项目的代码,发现(v2.3.1)版本是可以正常运行的。

@PeachScript
Copy link
Owner

@xiewl 根据 Skasi 提供的信息,可能是新版本 Nuxt API 变动导致的,你可以参考一下他上面的评论进行验证。

@xiewl
Copy link

xiewl commented Nov 7, 2018

@xiewl 根据 Skasi 提供的信息,可能是新版本 Nuxt API 变动导致的,你可以参考一下他上面的评论进行验证。

@PeachScript 应该不是这个原因。因为我这边两个项目的nuxt都是同一个版本(v1.4.0)。不同点在于vue-infinite-loading的版本一个是(v2.4.0),一个是(v2.3.1)。我将2.4.0这个项目重装为2.3.1就正常了。我和Skasi的引用方式不太一样,我是 import InfiniteLoading from 'vue-infinite-loading'; 再加上no-ssr标签

<template>
  <div>
    <no-ssr>
      <infinite-loading/>
    </no-ssr>
  </div>
</template>

<script>
  import InfiniteLoading from 'vue-infinite-loading'

  export default {
    name: 'test',
    components: {
      InfiniteLoading
    }
  }
</script>

@PeachScript
Copy link
Owner

@xiewl 了解了,我这边先复现一下,感谢反馈。

@PeachScript
Copy link
Owner

PeachScript commented Nov 23, 2018

Hi @Skasi @xiewl , I've released a new version v2.4.2 to fix this problem, now this plugin can works properly with Nuxt.js, just need to wrap it with no-ssr component (like v2.3.3 and below), no need any extra configuration. Please comment here if you found any problem.

@kvanska
Copy link

kvanska commented Jun 4, 2019

I'm using nuxtjs 2.8 and vue-infinite-loading 2.4.4 and ran into an issue that I could not produce in a 'clean' new project. When doing a page reload, infinite-loading works as expected but when routing to a page with infinite-loading from SPA nuxt-link I got exception:

TypeError: Cannot read property 'tagName' of null at VueComponent.getScrollParent

getScrollParent recursively finds the parent element and for some reason when loading in SPA, parent node is null for:

<div class="page">

on page refresh it's not null and parent is set to window

<body>
<div id="__nuxt">
<div id="__layout">
<div class="page>

I solved this by setting the force-use-infinite-wrapper property to the element containing the actual list and this solves the problem. I could not find out why this happens though?

@connecteev
Copy link

connecteev commented Sep 15, 2019

@kvanska I've been struggling for days trying to get infinite loading to work in Nuxt with SSR. Any chance you can point to an example of this?

@JanusSpark
Copy link

JanusSpark commented Oct 15, 2020

@frederic117 I've had the same problem after upgrading to nuxt 2.x and node 10.x. I solved it by using a plugin that is not rendered serverside.

Add a plugin to the plugins folder:

/plugins/infinite-loading.js

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.use(InfiniteLoading)

Register the plugin in nuxt.config.js and disable SSR.

plugins: [
  { src: '~/plugins/infinite-loading.js', ssr: false }
]

Now you can use the <infinite-loading> component in your templates.

@Skasi Hello,I write the code like you mentioned.And It works fine in npm run dev mode. But it can't work fine with production.Do you have the same problem?And how can I init infinite-loading after the dom ready,I guess maybe it isn't init normally


<client-only><infinite-loading></infinite-loading></client-only>
I resolve it with client-only

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests