Add Nuxt.js compatibilty to ReadMe
Opened this issue · 2 comments
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 :-)
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?
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);
});