{"id":14111349,"url":"https://github.com/vue-leaflet/vue-leaflet","last_synced_at":"2026-02-23T10:30:25.684Z","repository":{"id":37793223,"uuid":"242082507","full_name":"vue-leaflet/vue-leaflet","owner":"vue-leaflet","description":"vue-leaflet compatible with vue3","archived":false,"fork":false,"pushed_at":"2024-07-10T15:48:30.000Z","size":1489,"stargazers_count":801,"open_issues_count":99,"forks_count":124,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-02-03T09:01:57.765Z","etag":null,"topics":["hacktoberfest","leaflet","vue-leaflet","vue3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-leaflet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-21T07:44:57.000Z","updated_at":"2025-02-01T17:20:33.000Z","dependencies_parsed_at":"2022-06-23T19:24:52.233Z","dependency_job_id":"62187f27-d1f9-4191-8827-b0fe2ca76eb6","html_url":"https://github.com/vue-leaflet/vue-leaflet","commit_stats":{"total_commits":357,"total_committers":19,"mean_commits":"18.789473684210527","dds":0.5294117647058824,"last_synced_commit":"db34dff79cc62bc6fa51357e953e9bcf55725c94"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-leaflet%2Fvue-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-leaflet%2Fvue-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-leaflet%2Fvue-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-leaflet%2Fvue-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-leaflet","download_url":"https://codeload.github.com/vue-leaflet/vue-leaflet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239859015,"owners_count":19708857,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","leaflet","vue-leaflet","vue3"],"created_at":"2024-08-14T10:03:15.607Z","updated_at":"2026-02-23T10:30:25.633Z","avatar_url":"https://github.com/vue-leaflet.png","language":"Vue","funding_links":[],"categories":["Vue","hacktoberfest","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# vue-leaflet\n\nVue-leaflet, written and compatible with Vue 3!\n\nThis is a Beta version! And may yet be unstable! If you want to help, please reach out in an\n[issue](https://github.com/vue-leaflet/vue-leaflet/issues) or on [discord](https://discord.gg/uVZAfUf),\nor join the [discussions](https://github.com/vue-leaflet/vue-leaflet/discussions).\n\n## What works\n\n- LCircle\n- LCircleMarker\n- LControl\n- LControlAttribution\n- LControlLayers\n- LControlScale\n- LControlZoom\n- LFeatureGroup\n- LGeoJson\n- LIcon\n- LImageOverlay\n- LMap\n- LMarker\n- LPolygon\n- LPolyline\n- LPopup\n- LRectangle\n- LTileLayer\n- LTooltip\n- LWmsTileLayer\n\n\u003e Note that unlike the [Vue 2 version](https://github.com/vue-leaflet/Vue2Leaflet), this library is fully compatible with SSR.\n\n## Installation\n\n```bash\nyarn add @vue-leaflet/vue-leaflet leaflet\n```\n\nor\n\n```bash\nnpm i -D @vue-leaflet/vue-leaflet leaflet\n```\n\n## Usage\n\nUntil the complete documentation is ready, please check the\n[component playground](https://github.com/vue-leaflet/vue-leaflet/tree/master/src/playground/views) examples or the\n[demo project](https://github.com/vue-leaflet/vue3-demo-project/blob/master/src/App.vue) for usage with Vue 3.\nMost component props mimic the vanilla [Leaflet options](https://leafletjs.com/reference-1.7.1.html) as closely as\npossible, and generally remain the same as in their [Vue2Leaflet counterparts](https://vue2-leaflet.netlify.app/components/).\n\n### Quickstart\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"height:600px; width:800px\"\u003e\n    \u003cl-map ref=\"map\" v-model:zoom=\"zoom\" :center=\"[47.41322, -1.219482]\"\u003e\n      \u003cl-tile-layer\n        url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n        layer-type=\"base\"\n        name=\"OpenStreetMap\"\n      \u003e\u003c/l-tile-layer\u003e\n    \u003c/l-map\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport \"leaflet/dist/leaflet.css\";\nimport { LMap, LTileLayer } from \"@vue-leaflet/vue-leaflet\";\n\nexport default {\n  components: {\n    LMap,\n    LTileLayer,\n  },\n  data() {\n    return {\n      zoom: 2,\n    };\n  },\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\u003c/style\u003e\n```\n\n### Component playground\n\nTo see the [component playground](https://github.com/vue-leaflet/vue-leaflet/tree/master/src/playground/views) in action,\nclone this repo and run the local devserver, then visit http://127.0.0.1:5173,\n```bash\ngit clone https://github.com/vue-leaflet/vue-leaflet.git\ncd vue-leaflet\nyarn\nyarn dev\n```\n\n### Server-side rendering (SSR)\n\nNote that while the vue-leaflet library has the option of enabling SSR, **Leaflet itself does not**.\n\n\u003e **N.B.** Using `import L from \"leaflet\"` or `import { ... } from \"leaflet\"` can lead to unexpected errors.\n\nTo provide server-side rendering and tree-shaking capabilities, vue-leaflet can be configured to use async imports from the\nLeaflet ESM, by disabling the `useGlobalLeaflet` option on the map component, `\u003cl-map :useGlobalLeaflet=\"false\"\u003e`.\n\nThis can lead to issues when importing additional methods from Leaflet, because the two instances of the Leaflet\nclasses are technically no longer the same. See [Issue 48](https://github.com/vue-leaflet/vue-leaflet/issues/48) for more.\n\nTo avoid these issues, import any Leaflet methods asynchronously in response to the LMap component's `@ready` event:\n```vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"height:600px; width:800px\"\u003e\n    \u003cp\u003evue-leaflet SSR Demo\u003c/p\u003e\n    \u003cl-map :useGlobalLeaflet=\"false\"\u003e\n      \u003cl-geo-json :geojson=\"geojson\" :options=\"geojsonOptions\" /\u003e\n    \u003c/l-map\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n// DON'T load Leaflet components here!\n// Its CSS is needed though, if not imported elsewhere in your application.\nimport \"leaflet/dist/leaflet.css\"\nimport { LMap, LGeoJson } from \"@vue-leaflet/vue-leaflet\";\n\nexport default {\n  components: {\n    LMap,\n    LGeoJson,\n  },\n  data() {\n    return {\n      geojson: {\n        type: \"FeatureCollection\",\n        features: [\n          // ...\n        ],\n      },\n      geojsonOptions: {\n        // Options that don't rely on Leaflet methods.\n      },\n    };\n  },\n  async beforeMount() {\n    // HERE is where to load Leaflet components!\n    const { circleMarker } = await import(\"leaflet/dist/leaflet-src.esm\");\n\n    // And now the Leaflet circleMarker function can be used by the options:\n    this.geojsonOptions.pointToLayer = (feature, latLng) =\u003e\n      circleMarker(latLng, { radius: 8 });\n    this.mapIsReady = true;\n  },\n};\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-leaflet%2Fvue-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-leaflet%2Fvue-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-leaflet%2Fvue-leaflet/lists"}