Skip to content
Make with

@indoorequal/vue-maplibre-gl

Vue 3 plugin for MapLibre GL JS

Maintained by IndoorEqual

Documentation ↗Source ↗

@indoorequal/vue-maplibre-gl provides Vue 3 integration for MapLibre GL JS with support for the modern composition API. It offers reactive bindings and Vue-specific patterns for building mapping applications.

Quick start

npm install @indoorequal/vue-maplibre-gl maplibre-gl
<script setup>
import { MglMap } from '@indoorequal/vue-maplibre-gl';
import { setWorkerUrl } from 'maplibre-gl';
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
import 'maplibre-gl/dist/maplibre-gl.css';

// MapLibre GL JS v6 + a bundler: set the worker URL once (Vite shown)
setWorkerUrl(workerUrl);
</script>

<template>
  <mgl-map
    map-style="https://tiles.openfreemap.org/styles/liberty"
    :center="[0, 20]"
    :zoom="2"
    height="400px"
  />
</template>
›Setup noteschecked with v9.0.1

@indoorequal/vue-maplibre-gl 9.0.1 (v9.0.0 made maplibre-gl ^6 a requirement) for Vue 3. The library does not set the MapLibre v6 worker for you. With a bundler you must call setWorkerUrl once before the first map is created, or no tiles render. The snippet uses the same Vite ?worker&url setup the library's own docs site uses (docs/examples/example.data.js). The library's getting-started page does not show this step yet, and its installation page still lists maplibre-gl 5.x. You can move setWorkerUrl and the CSS import to main.ts. Import the CSS. MglMap's width and height default to 100%, so either give the parent a height or pass the height prop. To register every component globally, use app.use(VueMaplibreGl) with the default export. Nuxt has a separate guide (guide/nuxt).

More platforms on Get started.