Maps for Vue — MapLibre-compatible Maps API
- maps for vue

# Vue maps, the boring infra part sorted.
We build and maintain @geoql/v-maplibre, the Vue 3 components that wrap maplibre-gl. Import VMap, drop a `:options` prop, and get a fully reactive map with zero refs.
Get a free API key Vue docs

install
pnpm add @geoql/v-maplibre maplibre-gl Copy

vue Copy
<script setup lang="ts">
import { VMap, VControlScale, VControlNavigation } from '@geoql/v-maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
import '@geoql/v-maplibre/dist/v-maplibre.css';
import type { MapOptions } from 'maplibre-gl';

const MAP_STYLE = 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY';

const options: MapOptions = {
style: MAP_STYLE,
center: [77.209, 28.6139],
zoom: 11,
hash: true,
};
</script>

<template>
<VMap :options="options" class="map-canvas" @loaded="onMapReady">
<VControlNavigation position="top-right" />
<VControlScale position="bottom-left" />
</VMap>
</template>

<style>
.map-canvas { width: 100%; height: 480px; }
</style>

live · Vue preview

## Why Vue teams ship on maps.guru
Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.

VMap is a first-class Vue 3 component with no manual onMounted/onUnmounted.
- Type-safe options prop with full MapOptions inference from maplibre-gl.
- Supports VMarker, VPopup, VLayerMaplibre* children via slots for declarative map composition.

## Frequently asked

-
### Why pick @geoql/v-maplibre over raw maplibre-gl in Vue?
The wrapper handles cleanup, ref forwarding, and slot composition for you. You get the full maplibre-gl API surface but stay inside Vue idioms.

-
### Is the package free?
Yes, it is MIT licensed and open source. We build it because we use it on maps.guru itself, and we ship our customers faster with it.

## Mapping terms for Vue developers, defined
The vocabulary behind vector tiles, styles, and geocoding, in plain language.

### What is Vector tile?
A vector tile is a compressed binary chunk of map geometry (roads, buildings, labels) that the browser styles and renders at runtime, instead of downloading a pre-drawn image. Vector tiles let one dataset power unlimited visual styles and stay sharp at every zoom level.

### What is Basemap?
A basemap is the background map layer (roads, water, landuse, place labels) that your own data is drawn on top of. maps.guru serves basemaps as MapLibre-compatible vector tiles.

### What is Map style?
A map style is a JSON document that tells a renderer which colours, fonts, widths, and zoom rules to apply to each layer of a vector tile. maps.guru styles follow the MapLibre Style Specification, so they work in any MapLibre or Mapbox GL JS compatible renderer.

### What is Geocoding?
Geocoding is the process of converting a text address or place name into latitude and longitude coordinates. Reverse geocoding does the opposite: it converts coordinates into the nearest human-readable address.

### What is PMTiles?
PMTiles is a single-file archive format for map tiles that supports HTTP range requests, so a tile server can read one tile out of a multi-gigabyte archive without unpacking it. maps.guru stores its tile archives as PMTiles on Cloudflare R2.

### What is MapLibre GL JS?
MapLibre GL JS is an open-source WebGL map renderer, forked from Mapbox GL JS v1 after that project moved to a proprietary licence. It is the reference renderer for maps.guru styles and carries no per-render licence fee.

### What is Tile request?
A tile request is one HTTP fetch of a single map tile. A typical desktop map view loads roughly 10 to 20 tiles, and panning or zooming loads more, which is why tile quotas are counted in tens of thousands rather than page views.

### What is Static map?
A static map is a server-rendered PNG or JPEG image of a map at a fixed centre, zoom, and size. Static maps are used where an interactive map cannot run: email, PDF exports, Open Graph share cards, and AI chat replies.

## Sources

- MapLibre Style Specification — MapLibre
- Mapbox Vector Tile specification — Mapbox
- MapLibre GL JS documentation — MapLibre
- OpenStreetMap tile usage policy — OpenStreetMap Foundation

## Maps for other frameworks

- vue
Nuxt
SSR-safe VMap with the official Nuxt 4 module.
See snippet

- tsx
React
MapLibre-native maps for React apps.
See snippet

- html
JavaScript
Drop-in maplibre-gl via CDN with no build step.
See snippet

## Ready to build with
beautiful basemaps?
Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.
Get started free Get started free
Contact us
Free forever plan
5-minute setup
No credit card