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://tiles.openfreemap.org/styles/liberty';
const center = [13.388, 52.517];
const zoom = 9.5;
</script>

You can also use another OpenFreeMap style:

const style = 'https://tiles.openfreemap.org/styles/liberty'
// or: 'https://tiles.openfreemap.org/styles/bright'

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