# vue3-openlayers > OpenLayers Wrapper for Vue3 Latest version **12.2.2** (published 2026-02-24) · MIT license · 0 weekly downloads ## Install ```sh npm install vue3-openlayers pnpm add vue3-openlayers yarn add vue3-openlayers bun add vue3-openlayers ``` ## Health **Score 60/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 12.2.2 | | Published | 2026-02-24 | | First published | 2021-06-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=22.0.0 | | Dependencies | 10 | | Unpacked size | 8.7 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 798 | | Author | Melih Altıntaş | | Maintainers | d-koppenhagen, melihaltintas | | Keywords | front-end, web, vue, vuejs, vue-js, openlayers, vue3-openlayers, map, gis, vuelayers, vue-openlayers | ## Links - npm: https://www.npmjs.com/package/vue3-openlayers - Repository: https://github.com/MelihAltintas/vue3-openlayers - Issues: https://github.com/MelihAltintas/vue3-openlayers/issues - npm.io page: https://npm.io/package/vue3-openlayers ## Dependencies (10) - [ol](https://npm.io/package/ol.md) ^10.6.0 - [vue](https://npm.io/package/vue.md) ^3.5.0 - [jspdf](https://npm.io/package/jspdf.md) ^4.2.0 - [proj4](https://npm.io/package/proj4.md) ^2.19.10 - [ol-ext](https://npm.io/package/ol-ext.md) ^4.0.38 - [file-saver](https://npm.io/package/file-saver.md) ^2.0.5 - [@turf/buffer](https://npm.io/package/@turf/buffer.md) ^7.2.0 - [@turf/helpers](https://npm.io/package/@turf/helpers.md) ^7.2.0 - [ol-contextmenu](https://npm.io/package/ol-contextmenu.md) ^5.5.0 - [dom-to-image-more](https://npm.io/package/dom-to-image-more.md) ^3.7.1 ## Alternatives - [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads - [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads - [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads - [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads - [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads ## Recent versions - 12.2.2 (latest) — 2026-02-24 - 7.0.0-1 (alpha) — 2024-04-12 - 1.0.0-next.10 (next) — 2023-07-11 - 12.2.1 — 2026-02-24 - 12.2.0 — 2025-11-12 - 12.1.1 — 2025-09-06 - 12.1.0 — 2025-08-31 - 12.0.2 — 2025-08-31 - 12.0.1 — 2025-08-30 - 12.0.0 — 2025-08-30 - 11.6.2 — 2025-06-05 - 11.6.1 — 2025-05-05 - 11.6.0 — 2025-05-03 - 11.5.0 — 2025-02-26 - 11.4.0 — 2025-02-26 - … 170 more at https://npm.io/package/vue3-openlayers/versions ## README # vue3-openlayers > Web map [Vue](https://vuejs.org/ "Vue Homepage") components with the power of [OpenLayers](https://openlayers.org/ "OpenLayers Homepage") OpenLayers Useful 3rd party libraries https://openlayers.org/3rd-party/ [![Netlify Status](https://api.netlify.com/api/v1/badges/be6e2e4b-ccfe-4ace-ba27-79d6035370cc/deploy-status)](https://app.netlify.com/sites/vue3openlayers/deploys) [![NPM version](https://img.shields.io/npm/v/vue3-openlayers.svg)](https://www.npmjs.com/package/vue3-openlayers) [![NPM Minified Size](https://img.shields.io/bundlephobia/min/vue3-openlayers?label=package%20minified%20size)](https://www.npmjs.com/package/vue3-openlayers) [![NPM Minzipped Size](https://img.shields.io/bundlephobia/minzip/vue3-openlayers?label=package%20minzipped%20size)](https://www.npmjs.com/package/vue3-openlayers) [![Downloads](https://img.shields.io/npm/dt/vue3-openlayers)](https://npmcharts.com/compare/vue3-openlayers?minimal=true) [![Github Open Issiues](https://img.shields.io/github/issues/MelihAltintas/vue3-openlayers)]() [![Github Closed Issiues](https://img.shields.io/github/issues-closed-raw/melihaltintas/vue3-openlayers)]() [![GitHub forks](https://img.shields.io/github/forks/MelihAltintas/vue3-openlayers)]() [![GitHub Stars](https://img.shields.io/github/stars/MelihAltintas/vue3-openlayers)]() [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/edit/vue3-openlayers-template)


## Links 6 hours of debugging can save you 5 minutes of reading documentation :) please read the doc :) ## - [Documentation Netlify](https://vue3openlayers.netlify.app) ## Install ```bash # install current vue3-openlayers version npm install vue3-openlayers or yarn add vue3-openlayers ``` [![Stargazers repo roster for @MelihAltintas/vue3-openlayers](https://reporoster.com/stars/MelihAltintas/vue3-openlayers)](https://github.com/MelihAltintas/vue3-openlayers/stargazers) ## Overview **vue3-openlayers** is components library that brings the powerful **OpenLayers API** to the **Vue3** reactive world. It can display maps with tiled, raster or vector layers loaded from different sources. ![Alt Text](https://raw.githubusercontent.com/MelihAltintas/vue3-openlayers/main/vue3-openlayers.gif) ## Requirements - **[ol](https://openlayers.org/)**: `^10.6.0` - **[ol-contextmenu](https://github.com/jonataswalker/ol-contextmenu)**: `^5.5.0` - **[ol-ext](https://github.com/Viglino/ol-ext#,)**: `^4.0.38` - **[vue](https://github.com/vuejs/core/tree/main/packages/vue#readme)**: `^3.5.0` ## Run End-to-End Tests with [Playwright](https://playwright.dev) ```bash # Install browsers for the first run npx playwright install # Runs the end-to-end tests npm run test:e2e # Runs the end-to-end tests in interactive UI mode (for local development) npm run test:e2e:ui # Runs the tests in debug mode npm run test:e2e:debug # Runs the tests in trace mode (to time-travel between actions) npm run test:e2e:trace # Serve test report (and inspect trace when) npm run test:e2e:report # Runs the tests only on Chromium npm run test:e2e -- --project=chromium # Runs the tests of a specific file npm run test:e2e -- tests/example.spec.ts # Run tests and record new screenshots locally using the same image as in CI env docker compose run screenshot-update ``` ### Screenshots Please note, when recording screenshots locally the may differ from the platform (linux) in CI. This results in: - a: a different file name - b: a slightly different screenshot So tackle this issue, please always record screenshots locally using the docker compose file which will use the same image/platform as in CI. ```bash docker compose run screenshot-update ``` ## License **MIT** (c) Melih Altıntaş --- _Source: https://npm.io/package/vue3-openlayers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._