nuxt-maplibre
v1.0.1
Published
A Nuxt module to use MapLibre
Downloads
899
Readme
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