Nuxt.js : ReferenceError

[cgraham149]

Not really an issue. Just a question because I am a newbie.

Does anyone have experience using with Nuxt.js as SSR? I keep getting "ReferenceError document is not defined".

My guess is vue-vis-network needs to be setup as a plugin [https://nuxtjs.org/guide/plugins] but I'm not exactly sure how to do that. Any advice or direction would be greatly appreciated!

TIA

[dmitriygoncharenko]

Hey there, this is my working example:

plugins/vis.js

import Vue from 'vue'
import { Network } from 'vue-vis-network'
Vue.component('network', Network)

nuxt.config.js

...
plugins: [ {src: "@/plugins/vis", mode: "client"} ],
...

components/VisComponent.vue

<template>
  <div class="vis-component">
    <client-only>
      <network
        ref="network"
        :nodes="nodes"
        :edges="edges"
        :options="options"
      />
    </client-only>
  </div>
</template>
<script>
export default {
	data () {
		return {
			nodes: [
				{ id: 1, label: 'circle', shape: 'circle' },
				{ id: 2, label: 'ellipse', shape: 'ellipse' },
				{ id: 3, label: 'database', shape: 'database' },
				{ id: 4, label: 'box', shape: 'box' },
				{ id: 5, label: 'diamond', shape: 'diamond' },
				{ id: 6, label: 'dot', shape: 'dot' },
				{ id: 7, label: 'square', shape: 'square' },
				{ id: 8, label: 'triangle', shape: 'triangle' }
			],
			edges: [
				{ from: 1, to: 2 },
				{ from: 2, to: 3 },
				{ from: 2, to: 4 },
				{ from: 2, to: 5 },
				{ from: 5, to: 6 },
				{ from: 5, to: 7 },
				{ from: 6, to: 8 }
			],
			options: {
				nodes: {
					borderWidth: 4
				},
				edges: {
					color: 'lightgray'
				}
			}
		}
	}
}
</script>
<style lang="scss">
@import "vue-vis-network/node_modules/vis-network/dist/vis-network.css";
.vis-component{
	.vis-network{
		width: 100% !important;
		height: 700px !important;
	}
}
</style>