Accessing the L global variable

You might want to access the Leaflet global variable in your Vue component. This can be useful if you want to use a Leaflet plugin that is not available as a Vue component.

You can still import the L global variable from the leaflet package and use it in your Vue component. Here is an example :

WARNING

This is only possible in a client-side environment. You should either :

Use a Client-Only Page.
Wrap your component inside the ClientOnly component.
Set your rendering strategy to ssr: false for the appropriate route.

vue

<template>
  <LMap
    style="height: 350px"
    :zoom="6"
    :center="[47.21322, -1.559482]"
    :use-global-leaflet="true"
  >
    <LTileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
      layer-type="base"
      name="OpenStreetMap"
    />
  </LMap>
</template>

<script setup lang="ts">
import L from 'leaflet'
import { onMounted } from 'vue'

onMounted(() => {
  console.log(L)
})
</script>

Accessing the L global variable ​

Accessing the L global variable