[Nuxt] Unable to render map when wrapped in <no-ssr>

Hello ! When using the nuxt <no-ssr> components that delays the render of a component until the page is mounted (to ensure it’s only rendered when the window is ready), I do not manage to render the component. To simplify the tests, i rewrote my component like so:

<template>
	 <section class="page stores">
		<vl-map
			v-if="mounted"
			id="stores__container"
			ref="map"
			:controls="false"
			data-projection="EPSG:4326">
			<vl-view
				ref="view"
				:zoom.sync="zoom"
				:center.sync="center">
			</vl-view>

			<vl-layer-tile id="osm">
				<vl-source-osm></vl-source-osm>
			</vl-layer-tile>
		</vl-map>
	</section>
</template>

<script>
export default {
	name: 'Stores',
	data() {
		return {
			mounted: false
		}
	},
	mounted() {
		this.mounted = true
	}
}
</script>

When the component is mounted:

• the reference exists in the context this.$refs.map but it seems that the vl-map component is not rendered
• I can access the component map like so this.$refs.map.$map so it seems to be instantiated;
• the this.$refs.map.$map.isRendered() method returns me false so it seems that it is not rendered yet but I can’t find a way to trigger a re-render.

Does anyone has an idea on how to trigger a re-render on the component ? Thanks in advance for your replies (and thanks to the author for the supernice work!)

[felixdenoix]

Hey @mgiraldo ! for starters i created a plugin:

import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader

Vue.use(VueLayers)

and a module :

module.exports = function (moduleOptions) {
	this.options.css.push('vuelayers/lib/style.css')
}

It allows me to load the component and the styles as demonstrated in the doc here and then I include it in the nuxt config with the ssr: false since the window object is required:

plugins: [{
		src: '@/plugins/vueLayers',
		ssr: false
	}, { ... }],
modules: [
                ...,
		'~/shared/vueLayers',
	],

Afterwards have a look to the previous responses, you should have all the informations needed. Hope that helps !

[felixdenoix]

For anyone passing by the working shape of the component is the following

    <template>
	 <section class="stores">
		<div class="stores__wrapper">
			<transition name="fade">
				<vl-map
					v-if="mounted"
					id="stores__container" ...
                                 ...  
				</vl-map>
			</transition>
		</div>
          </section>
    </template>

and the style

.stores {
	display: flex;
}
.stores__wrapper {
	height: 100vh;
	width: 100vw;
}
#stores__container {
	position: relative;
	width: 100vw;
	height: 100vh;

	canvas, .vl-map  {
		height: 100vh;
		width: 100vw;
	}
}