How to use Leaflet Fullscreen in Vue2Leaflet

You need to access the map object with this.$refs.mymap.mapObject and add the control in the mounted hook.

First add a ref attribute to the <l-map /> element:

<l-map :zoom="zoom" :center="center" ref="mymap">  ...</l-map>

Then add the control in the mounted hook:

mounted() {  const map = this.$refs.mymap.mapObject;  map.addControl(new L.Control.Fullscreen());}

See this Fiddle

If you are using webpack, it's a bit different:

1) Install with npm install leaflet-fullscreen --save

2) Import the js and css files in your main.js file (app entry point) or use <script> in index.html:

import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';import 'leaflet-fullscreen/dist/Leaflet.fullscreen';

3) In your component, use window.L instead of L:

mounted() {  const map = this.$refs.mymap.mapObject;  map.addControl(new window.L.Control.Fullscreen());}

For those using Nuxt with vue2-leaflet (and don't want to use a plugin but instead import it locally for performance reasons), this is how you can do it:

npm install leaflet-fullscreen

Require the needed files, create a method that runs when the map loads.

         <l-map                @ready="LoadFullscreen()"                ref="myMap"              >                <script>let LMap,  LTileLayer,  LMarker,  LPopup,  LIcon,  LControlAttribution,  LControlZoom,if (process.client) {  require("leaflet");  ({    LMap,    LTileLayer,    LMarker,    LPopup,    LIcon,    LControlAttribution,    LControlZoom,  } = require("vue2-leaflet/dist/vue2-leaflet.min"));  require("leaflet-fullscreen/dist/leaflet.fullscreen.css");  require("leaflet-fullscreen/dist/Leaflet.fullscreen");}import "leaflet/dist/leaflet.css";

... export defaults etc... set your components

methods: {LoadFullscreen() {  if (!process.server) {    const map = this.$refs.listingsMap.mapObject;    map.addControl(      new window.L.Control.Fullscreen({        position: "topright",      })    );  }},

},