@deltabreen/maps-vue

Vue 3 and Nuxt components for Maps by DeltaBreen: MapLibre maps on our tiles, with the key and its short-lived token handled for you. Free to start, flat plans, and never an overage bill.

npm install @deltabreen/maps-vue maplibre-gl

<script setup lang="ts">
import { DeltabreenMap, DeltabreenMarker } from '@deltabreen/maps-vue'
import 'maplibre-gl/dist/maplibre-gl.css'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url' // Vite and Nuxt
</script>

<template>
  <DeltabreenMap api-key="pk_…" :worker-url="workerUrl" :center="[-6.26, 53.35]" :zoom="12" style="height: 480px">
    <DeltabreenMarker :lng-lat="[-6.26, 53.35]" popup="Our shop" />
  </DeltabreenMap>
</template>

• api-key is a publishable key from your dashboard, listing the sites that may use it (or give token-url).
• The map loads in the browser only, so a server render needs nothing extra. It is made once per key; changing map-style, language, center or zoom moves the same map, so none of that counts another map load.
• @load hands you the live MapLibre map, and a component inside <DeltabreenMap> gets it from useMap().
• options takes anything else createMap from @deltabreen/maps takes.

Docs: https://maps.deltabreen.eu/docs#vue-svelte-angular