SSR nuxt

[merijnponzo]

trafficstars

Hi does this work with nuxt / ssr? I've got

document is not defined 

Not sure if I implemented the virtual grid in the right way

  return styleElement
}

function addStyle (obj /* StyleObjectPart */) {
  var update, remove
  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')

  if (styleElement) {
    if (isProduction) {
      // has SSR styles and in production mode.
      // simply do nothing.

[Mikescops]

Hello,

Do you mind sending full debug log from your console and the part of the code where you use the grid, thanks :smile:

[merijnponzo]

Hi, I added virtual grid to my nuxt config

{ src: '~/plugins/vue-virtualgrid'}

within plugins: vue-virtualgrid.js

import Vue from 'vue'
import VirtualGrid from 'vue-virtual-grid'
Vue.use(VirtualGrid)

then within any nuxt page

<template>
<div>
  <VirtualGrid :items="{}" />
</div>
</template>
<script>
import VirtualGrid from 'vue-virtual-grid'

export default {
  components: { VirtualGrid },

I'm aware i should pass the renderdata as an object but passing an empty object should work for a starter ;-) this directly results into:

thanks!

And may i ask, will it be possible to add slot content in the future, it would be a lot easier if i could use the item component just within the virtual grid component

[Mikescops]

First of all, it should be an array of object, so passing [] should work indeed.

But from the error you get, it seems unrelated...

And may i ask, will it be possible to add slot content in the future, it would be a lot easier if i could use the item component just within the virtual grid component

Not sure what you are asking, can you rephrase?

[Mikescops]

So after some searches.

This plugin do not support SSR as of now. You can use it with:

{ src: '~/plugins/vue-virtualgrid', ssr: false}

There is maybe an answer here: https://stackoverflow.com/questions/61409902/vue-how-to-build-bundle-for-nuxt-with-vue-cli-service

Let me know if that helps.

[MentalGear]

@merijnponzo Were you able to get this working with nuxt? If so, would really appreciate if you could let us know the solution.

[MentalGear]

Alright, got it figured out. I still imported the component in the page I was using it, which doesn't work when it is already imported with Vue.use(VirtualGrid) in the /plugins directory.

Here's the complete solution for nuxt:

plugin file virtualgrid.js (in /plugins)

import VirtualGrid from 'vue-virtual-grid'

import Vue from 'vue'
Vue.use('VirtualGrid', VirtualGrid) // MUST match the name you use when calling the component, e.g. <VirtualGrid ...>

Where you want to use the component.

• DO NOT use import 'VirtualGrid from ...' again
• DO NOT define VirtualGrid under 'components: []'

Just use <VirtualGrid ... > on your page.

[merijnponzo]

Hi, i switched to vue-virtual-scroll-list due the lack of time for a deadline :-)

And i prefer using slots.

Best!

[MentalGear]

Hi, i switched to vue-virtual-scroll-list due the lack of time for a deadline :-)

And i prefer using slots.

Best!

Thanks man for the reply. Mh, I would need Grid Layout support - I guess vue-virtual-scroll-list doesn't support that, or does it? Yeah, slots are pretty sweet. :)

[MentalGear]

Seems like I spoke too soon. Even though I don't get a fatal nuxt error now, I get this in the debug console:

[Vue warn]: 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

. Bailing hydration and performing full client-side render. warn @ vue.runtime.esm.js?2b0e:619 patch @ vue.runtime.esm.js?2b0e:6497 Vue._update @ vue.runtime.esm.js?2b0e:3945

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <VirtualGrid> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[MentalGear]

Alright, got rid of the "not registered" error. Apparently, one has to use Vue.component to register pure components, while Vue.use registers plugins that themselves internally register components.

Updated virtualgrid.js (/plugins folder)

import VirtualGrid from 'vue-virtual-grid'

import Vue from 'vue'
Vue.component('VirtualGrid', VirtualGrid) // instead of Vue.use

Source: https://stackoverflow.com/a/61163860

[Mikescops]

I'm not sure I follow you @MentalGear , did you manage to make it work with SSR?