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=cQX2iET1gmOW38bedbUh';
const center = [-1.559482, 47.21322];
const zoom = 8;
</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