Vue 3 MapTiler SDK

Appearance

Vue3 MapTiler SDKInteractive Maps for Vue 3

10 components, 38 composables, full TypeScript support — build production-ready maps in minutes

Get Started
View on GitHub
🗺️

Interactive Maps

High-performance vector maps with WebGL rendering via MapTiler SDK. Reactive data binding out of the box.

🧩

10 Components

MapTiler, GeoJsonSource, FillLayer, CircleLayer, LineLayer, SymbolLayer, Marker, Popup, Image, GeolocateControls.

🔧

38 Composables

Map management, camera animations (flyTo, easeTo, jumpTo), event listeners, layer management, and utilities.

🎯

Full TypeScript

Comprehensive type definitions, event handler types, and generic overloads for a first-class DX.

⚡

High Performance

Factory-based architecture with shallowRef optimization, automatic cleanup, and zero memory leaks.

🌐

SSR Compatible

Works with Nuxt and SSR/SSG out of the box. Browser guards built in, no configuration required.

Quick Start ​

bash
bun add vue3-maptiler-gl @maptiler/sdk
bash
npm install vue3-maptiler-gl @maptiler/sdk
bash
yarn add vue3-maptiler-gl @maptiler/sdk
bash
pnpm add vue3-maptiler-gl @maptiler/sdk
vue
<template>
  <MapTiler :options="mapOptions" style="height: 500px">
    <GeoJsonSource :data="geoJsonData">
      <FillLayer :style="fillStyle" />
      <CircleLayer :style="circleStyle" />
    </GeoJsonSource>
    <Marker :lnglat="[0, 0]" :draggable="true" />
  </MapTiler>
</template>

<script setup>
import { ref } from 'vue';
import {
  MapTiler,
  GeoJsonSource,
  FillLayer,
  CircleLayer,
  Marker,
} from 'vue3-maptiler-gl';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import 'vue3-maptiler-gl/dist/style.css';

const mapOptions = ref({
  style: 'https://demotiles.maplibre.org/style.json',
  center: [0, 0],
  zoom: 2,
});

const geoJsonData = ref({
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: { type: 'Point', coordinates: [0, 0] },
      properties: {},
    },
  ],
});

const fillStyle = ref({ 'fill-color': '#088', 'fill-opacity': 0.8 });
const circleStyle = ref({ 'circle-radius': 6, 'circle-color': '#007cbf' });
</script>

Why Vue3 MapTiler SDK? ​

Feature
Vue 3 NativeBuilt for Composition API with full reactivity
Single Runtime@maptiler/sdk is a peer — one copy, on a version you pick
SSR SafeWorks with Nuxt SSR/SSG without configuration
Type SafeComprehensive TypeScript definitions and event handler types
Zero LeaksFactory-based cleanup with defense-in-depth patterns
Tiny FootprintTree-shakeable — import only what you use