Vuetable-2: SSR is not supported?

[andycaramba]

I'm trying to use vuetable-2 on Vue project with server side rendering. I have the following code

import Vue from 'vue';
import Vuetable from 'vuetable-2';
Vue.use(Vuetable);

and I get an error

error:  ReferenceError: window is not defined
    at Object.<anonymous> (/var/www/ico-tracker.dev/node_modules/vuetable-2/dist/vuetable-2.js:1:35508)
    at e (/var/www/ico-tracker.dev/node_modules/vuetable-2/dist/vuetable-2.js:1:320)
    at /var/www/ico-tracker.dev/node_modules/vuetable-2/dist/vuetable-2.js:1:704
    at /var/www/ico-tracker.dev/node_modules/vuetable-2/dist/vuetable-2.js:1:714
    at n (/var/www/ico-tracker.dev/node_modules/vuetable-2/dist/vuetable-2.js:1:81)
    at Object.<anonymous> (/var/www/ico-tracker.dev/node_modules/vuetable-2/dist/vuetable-2.js:1:197)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/usr/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:152:7)

if i use

import Vuetable from 'vuetable-2/dist/vuetable-2-full';

I get this error

error:  ReferenceError: window is not defined
    at Object.<anonymous> (~/vuetable-2/dist/vuetable-2-full.js:3452:0)
    at __webpack_require__ (~/vuetable-2/dist/vuetable-2-full.js:36:0)                                     │
    at server-bundle.js:4612:18
    at server-bundle.js:4615:10
    at webpackUniversalModuleDefinition (~/vuetable-2/dist/vuetable-2-full.js:9:0)
    at Object.<anonymous> (~/vuetable-2/dist/vuetable-2-full.js:16:1) 
    .....

[ratiw]

I don't use SSR myself and don't have time to learn at the moment, so unless someone can help on that, it is not supported.

[rhoseno98]

Hi,
i have tried in my Nuxt Js project and work with vue-no-ssr.
You must make component for datatable, then in component make lazy import

import NoSSR from 'vue-no-ssr'
const DataTable = () => import('~/components/YourComponentDatatable')
export default {
        components : {
            'no-ssr': NoSSR, 
            'datatable' : DataTable
        },
}

and then on your component

<template>
<div>
            <div>This your server side rendering component</div>
            <no-ssr placeholder="ini dataquery">
                <datatable></datatable>
            </no-ssr>
</div>
</template>

[amoshydra]

I suspect this could be the only code that is causing the module to not work in SSR environment

https://github.com/ratiw/vuetable-2/blob/f06b8a58f1ea8ea68fdb68da4baefb4745cedd6f/src/index.js#L9

I am able to use vuetable-2 in nuxt by changing window to global (node use global and modern browser support global).

For better compatibility, we could do more. See: https://github.com/ratiw/vuetable-2/pull/512

[FerX]

@amoshydra
can you give us more information for use in nuxt?
how do you load the plugin?
did you modify it and build it?

thanks.

[amoshydra]

@FerX, Yes, I had to modify the source file and build it.

Things I did to make this imported and render in nuxt

1. Modify window to use global in vuetable-2/src/index.js
2. Build the file (I didn't actually build it, I was editing the dist file directly last time)
3. Statically import import Vue from 'vue'; import Vuetable from 'vuetable-2'; Vue.use(Vuetable);
4. Wrap <Vuetable> inside <no-ssr>

* btw, I am currently not using this project.

Update

@rhoseno98's method should work great in nuxt if you didn't need to statically import this table.

I often dynamically import none-ssr compatible component in beforeMount handler. Example:

<template>
  <div v-if="readyToRender">
    <vue-table />
  </div>
</template>

import Vue from 'vue';

...
beforeMount() {
  this.readyToRender = false;

  import('vuetable-2')
    .then((Vuetable) => {
      Vue.use(Vuetable);
      this.readyToRender = true;
    });
},

[daomtthuan]

Firstly, I'm sorry for the English I'm writing (I use Google Translate because I'm not very good at English).

I just met the same issue when i use with nuxt ssr:

I just found a way to fix it, use the autoload component, and soon nuxt 2.13 will add that functionality, no need to install this plugin anymore, but currently nuxt 2.12 forces us to install it.

Documentation about autoload component:
https://github.com/nuxt/components

Set up in nuxt.config.js

modules: ['@nuxt/components'],
components: {
  dirs: [
    //.....
    '~/components',
    '~/node_modules/vuetable-2/src/components',
    //.....
  ],
},

In the template, just call the vuetable tag, and use v-if to wrap Vue's Lifecycle hooks. (refer @amoshydra)

<template>
  <div v-if="readyToRender">
    <vuetable />
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'nuxt-property-decorator';

  @Component({
    scrollToTop: true,
  })
  export default class PageDashboardManageUser extends Vue {
    private readyToRender = false;

    public beforeMount() {
      this.readyToRender = true;
    }
  }
</script>

Hope useful to you