Skip to content

🧑‍💻 Usage

Vue Leaflet is a module that provides a set of components to work with Leaflet in Vue 3.

Here is a basic example of how to use the LMap and LTileLayer components to display a map :

vue
<script setup lang="ts">
import { LMap, LTileLayer } from '@maxel01/vue-leaflet'
import { ref } from 'vue'

const zoom = ref<number>(2)
</script>

<template>
    <LMap v-model:zoom="zoom" :center="[47.41322, -1.219482]">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />
    </LMap>
</template>

And here is how it should look :