Usage

Nuxt MapLibre is a module that provides a set of components (from vue-maplibre-gl) to work with MapLibre in Nuxt 3.

Here is a basic example of how to use the MglMap and MglNavigationControl components to display a map :

WARNING

This is only possible in a client-side environment. You should either :

Use a Client-Only Page.
Wrap your component inside the ClientOnly component.
Set your rendering strategy to ssr: false for the appropriate route.

vue

<template>
  <MglMap
    :map-style="style"
    :center="center"
    :zoom="zoom"
  >
    <MglNavigationControl />
  </MglMap>
</template>

<script setup>
const style = 'https://api.maptiler.com/maps/streets/style.json?key=Hh5AnbYfYsClowgwFsTl';
const center = [-71.058, 42.357];
const zoom = 14;
</script>

And here is how it should look :

TIP

If the map is not displayed but there's no error in the console, make sure you have set a height or width to the MglMap component.

Usage ​

Usage