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);
});