Remove leaflet attribution with Vue / Nuxt?

Question

I've seen some threads on how to remove the leaflet attribution in the bottom right. It seems like the creators of leaflet have no issue with it, so to save space I'd like to remove mine. Here is a thread on it, but no answers relate to Vue unfortunately. https://gis.stackexchange.com/questions/192088/how-to-remove-attribution-in-leaflet

I'm using nuxt but would greatly appreciate help if it's directed toward Vue. The l-tile-layer has an attribute-prop which indeed helps me add attributions, but removing it made me realize the attribution seem to be connected to the l-map component as it's visible with no tile layer.

TLDR: I want to remove the "Leaflet"

Suggestions?

Answer 1

With the Leaflet API, it is removed by this config.

https://leafletjs.com/reference-1.7.1.html#map-attributioncontrol

L.map('map', {
    attributionControl: false
}

With vue2-leaflet it seems it is possible to do the same with the options prop

https://vue2-leaflet.netlify.app/components/LMap.html#props

<l-map
  :options="{attributionControl: false}"
>
      ...
</l-map>

Answer 2

As Kunukn pointed out (and which answer also kindly was provided by mikeu here: Link to github

The solution for Vue is to add the attributionControl:false option. However, my requirement was to keep my other attributions, but fortunately after experimenting a tiny bit I just had to add the l-control-attribution component with an empty prefix.

In HTML

<l-map :zoom="8" :center="[59.3293, 18.0686]" :options="{ attributionControl: false }">
<l-tile-layer url="http://localhost:8080/styles/mytheme/{z}/{x}/{y}.webp" :attribution=attribution>
</l-tile-layer>
<l-control-attribution position="bottomright" prefix=""></l-control-attribution>
</l-map>

In scripts

data(){
    return{
      attribution: 
        '&copy;<a href="https://openmaptiles.org/">OpenMapTiles</a> &copy;<a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }
  }