Leaflet Map Vue [duplicate]

Question

I want to use Leaflet Map in Vue. I installed leaflet from NPM.
My code:

<template>
    <div id="map"></div>
</template>

<script>
import L from 'leaflet';
export default {
    data() {
        return {};
    },
    mounted() {
        const map = L.map('map', {
            center: [0, 0],
            zoom: 1
        });

        L.tileLayer(
            'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
            {}
        ).addTo(map);
    }
};
</script>

<style lang="scss">
@import '/node_modules/leaflet/dist/leaflet.css';

#map {
    width: 100%;
    height: 100%;
}
</style>

Problem is, that my UI looks like this.

There are some missing imgs. How to fix this bug?

Answer 1

Try to add this import in your main.js: import "leaflet/dist/leaflet.css". The leeflet css is missing.

Resolved from this trade: https://github.com/vue-leaflet/Vue2Leaflet/issues/157