This application requires JavaScript.
maps.guru
maps for nuxt

Nuxt maps, the boring infra part sorted.

Nuxt 4 SSR is great until maplibre-gl demands window. Wrap VMap in <ClientOnly> so the map mounts only in the browser, and keep your page fully indexable for SEO.

Get a free API key Nuxt docs
install
pnpm add @geoql/v-maplibre maplibre-gl
vue
<script setup lang="ts">
import type { MapOptions } from 'maplibre-gl';
import { MAP_STYLE } from '~/utils/maps';

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

<template>
  <ClientOnly>
    <LazyVMap
      :options="options"
      class="map-canvas"
    />
    <template #fallback>
      <div class="map-skeleton" />
    </template>
  </ClientOnly>
</template>

<style scoped>
.map-canvas { width: 100%; height: 480px; }
</style>
live · Nuxt preview

Why Nuxt teams ship on maps.guru

Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.

  • Wrap VMap in <ClientOnly>; the map mounts only after hydration.
  • Use <LazyVMap> from @nuxt/components to code-split the WebGL bundle.
  • Server-render surrounding SEO content while the map lazy-loads on demand.

Frequently asked

Maps for other frameworks

Ready to build with
beautiful basemaps?

Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.

Contact us
Free forever plan
5-minute setup
No credit card