Gugustinette / nuxt-maplibre

A Nuxt module to use MapLibre
https://gugustinette.github.io/nuxt-maplibre/
Apache License 2.0
11 stars 1 forks source link

nuxt-maplibre

Nuxt Maplibre

npm version npm downloads License Nuxt

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

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