v-mapkit

Vue 3 components for Apple MapKit JS - Monorepo for v-mapkit and mapkit-cn

Live examples · Docs · npm · JSR

Packages

Package	Description
v-mapkit	Vue 3 components for Apple MapKit JS

Apps

App	Description
mapkit-cn	Showcase site with 23 live examples (Nuxt 4), mapkit-cn.geoql.in
docs	Documentation site (Nuxt 4 + @nuxt/content), v-mapkit.geoql.in

Quick Start

Install the library

pnpm add @geoql/v-mapkit

<script setup lang="ts">
import { VMap, VMarkerAnnotation } from "@geoql/v-mapkit";
import "@geoql/v-mapkit/style.css";

const token = "YOUR_MAPKIT_TOKEN";

// Coordinates aren't props — MapKit owns the live map, so set the
// initial region once the instance is ready via the @map event.
function onMap(map: mapkit.Map) {
  map.setRegionAnimated(
    new mapkit.CoordinateRegion(
      new mapkit.Coordinate(37.7749, -122.4194),
      new mapkit.CoordinateSpan(0.1, 0.1),
    ),
  );
}
</script>

<template>
  <VMap :access-token="token" @map="onMap">
    <VMarkerAnnotation :coordinates="[37.7749, -122.4194]" />
  </VMap>
</template>

Use mapkit-cn (shadcn-vue style)

npx shadcn-vue@latest add https://mapkit-cn.geoql.in/r/v-map

Development

This monorepo uses pnpm v12 workspaces.

# Install all dependencies
pnpm install

# Development
pnpm run dev:lib      # Watch mode for library
pnpm run dev:app      # Showcase site

# Build
pnpm run build        # Build all packages
pnpm run build:app    # Build showcase site

# Test
pnpm run test

# Lint & Format
pnpm run lint
pnpm run format

Monorepo Structure

v-mapkit/
├── packages/
│   └── v-mapkit/            # Core library (npm + jsr: @geoql/v-mapkit)
├── apps/
│   ├── mapkit-cn/           # Nuxt 4 showcase site (23 live examples + registry)
│   └── docs/                # Nuxt 4 documentation site (@nuxt/content)
├── package.json             # pnpm workspaces root
├── pnpm-workspace.yaml      # Workspace config
└── pnpm-lock.yaml

More from the author

• v-maplibre — 50+ Vue 3 components for MapLibre GL
• mapcn-vue — shadcn-vue map components you copy into your app
• maplibre-gl-compare — swipe-style map comparison control for MapLibre
• maplibre-gl-wind — wind particle animation layer for MapLibre
• nxui — animated copy-paste UI components for Vue 3 and Nuxt
• shadscan-vue — UI audits for shadcn-vue and shadcn-nuxt apps

See every project at vinayakkulkarni.dev/projects and geoql.in.

License

MIT License - see LICENSE for details

---

Made with ❤️ by GeoQL