search

lokyoung / vuejs-paginate

A Vue.js(v2.x+) component for creating pagination.
MIT License
779 stars 171 forks source link

Can this be made server-side compatible by removing references to window and document objects? #44

Closed sbefort closed 6 years ago

sbefort commented 7 years ago

Please see this issue that has just been updated: https://github.com/lokyoung/vuejs-paginate/issues/32

lokyoung commented 7 years ago

Hello @sbefort . Sorry for replying so late. Have some personal stuff these days. The window is generated by the build script. Will try to find a solution. Hope this component works well in your project.

sbefort commented 7 years ago

The component works very well so thank you for that. Many people are using server-side rendering tools like Nuxt for SEO purposes so if you could make it server-side compatible by somehow getting rid of client-side objects like window and document that would be awesome.

kmsheng commented 6 years ago

I built successfully without window and document by removing the style tag of Paginate https://github.com/lokyoung/vuejs-paginate/blob/master/src/components/Paginate.vue#L215-L219

sbefort commented 6 years ago

Thanks I'll check it out!

johnRivs commented 6 years ago

In Nuxt (or SSR in general) when you set this plugin to not happen in the server, errors referencing window not being available are gone but you get this in the browser instead:

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

As posted by @InstanceOfMichael in #32, you need to import Paginate from 'vuejs-paginate/src/components/Paginate'; directly. Otherwise, importing vuejs-paginate will pull package.json's main file, which is dist/index.js. That's the one I assume is generated by webpack and contains the reference to window.

lokyoung commented 6 years ago

@johnRivs Thank you so much. @sbefort You can import the library by import Paginate from 'vuejs-paginate/src/components/Paginate'; for SSR. Any question please reopen this issue.