Nuxt Maplibre

A Nuxt module to use MapLibre. It was made using vue-maplibre-gl which is a Vue 3 wrapper for MapLibre, that exposes the original MapLibre API as Vue components.

This module is really just about making it work with Nuxt without the need to configure anything.

Features

⚡ No configuration needed
🦺 Typescript support
🚠 Auto import

Quick Setup

npx nuxi@latest module add nuxt-maplibre

That's it! You can now use MapLibre in your Nuxt app ✨

Usage

For a complete list of the components available, check out the vue-maplibre-gl documentation.

Basic

<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>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release