Add Nuxt.js compatibilty to ReadMe

[gerritvanaaken]

This plugin seems to be compatible with Nuxt3, which is great! However, one might have to declare the components to be "client only", like so:

<template>
	<ClientOnly>
		<mgl-map 
			map-style="https://api.maptiler.com/maps/streets/style.json?key={$key}"
			:zoom="6"
			:center="[9.4777420000, 51.3157550000]"
		>
			<mgl-marker
				v-for="city in settings.$state.cities"
				:key="city.path"
				:coordinates="[city.center.lng, city.center.lat]"
			/>
			<mgl-fullscreen-control />
			<mgl-navigation-control />
			<mgl-geolocation-control />
		</mgl-map>
	</ClientOnly>
</template>

Otherwise there is a 500 error, because rhe server does nit has access to the "document" element, of course. This might help :-)

[Creatium]

Hey. I am also trying to implement this plugin with Nuxt3 and am unable to do this.

If I just try to use components, I get "Failed to resolve component" error in console. If I try adding vue-maplibre-gl as module to Nuxt config, I get "document is not defined" error in terminal.

What am I missing?

[idesignzone]

Hey. I am also trying to implement this plugin with Nuxt3 and am unable to do this.

If I just try to use components, I get "Failed to resolve component" error in console. If I try adding vue-maplibre-gl as module to Nuxt config, I get "document is not defined" error in terminal.

What am I missing?

Create a new plugin "maplibre.client.js"

import VueMaplibreGl from "vue-maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import "vue-maplibre-gl/dist/vue-maplibre-gl.css";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueMaplibreGl);
});