v-maplibre

Vue 3 components for MapLibre GL - Monorepo for @geoql/v-maplibre and mapcn-vue

Packages

Package	Description
@geoql/v-maplibre	Vue 3 components for MapLibre GL
mapcn-vue	shadcn-vue style map component registry

Apps

App	Description
docs	API documentation (Docus)
mapcn-vue	mapcn-vue showcase site (Nuxt 4)

Quick Start

Option 1: Install the library

bun add @geoql/v-maplibre maplibre-gl

<script setup lang="ts">
  import { VMap, VMarker } from '@geoql/v-maplibre';
  import 'maplibre-gl/dist/maplibre-gl.css';

  const mapOptions = {
    container: 'my-map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9,
  };
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VMarker :lng-lat="[-74.5, 40]"></VMarker>
  </VMap>
</template>

Option 2: Use mapcn-vue (shadcn-vue style)

npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map

This copies theme-aware map components directly into your project.

Development

This monorepo uses Bun workspaces for everything, except apps/docs which uses pnpm (due to docus#1204).

# Install dependencies
bun install
bun run setup:docs   # Required: installs docs deps with pnpm

# Development
bun run dev:lib      # Watch mode for library
bun run dev:docs     # Docus documentation (uses pnpm)
bun run dev:mapcn    # mapcn-vue site

# Build
bun run build        # Build all packages
bun run build:docs   # Build docs (uses pnpm)
bun run build:mapcn  # Build mapcn-vue

# Test
bun run test         # Run tests
bun run test:coverage

# Lint & Format
bun run lint
bun run format

# Release (from packages/v-maplibre)
bun run release

Monorepo Structure

v-maplibre/
├── packages/
│   ├── v-maplibre/        # Main library (npm: @geoql/v-maplibre)
│   └── mapcn-vue/         # shadcn-vue registry components
├── apps/
│   ├── docs/              # Docus documentation (uses pnpm)
│   └── mapcn-vue/         # Nuxt 4 showcase site (uses bun)
├── package.json           # Bun workspaces root
└── bun.lock

License

MIT License - see LICENSE for details

Credits

Built with MapLibre GL JS, deck.gl, Vue 3, and Vite.

---

Made with ❤️ by GeoQL