Better CSS loading

[xpuu]

You can load leaflet CSS also in the nuxt plugin via:
import 'leaflet/dist/leaflet.css'

p.s. Your guide helped a lot! Many thanks...

[M-Gregoire]

Glad I could help, I added your suggestion to the README

Thanks for contributing!

[joaquimds]

@M-Gregoire Thanks so much for your guide!

Sadly this neat solution to the Icon loading challenge didn't work for me – the normal marker-icon.png loaded, but marker-icon-2x.png and marker-shadow.png did not. I'm afraid I don't understand enough about the internals of Nuxt to figure out what was going on.

This is what worked for me:

import Vue from 'vue'

import 'leaflet/dist/leaflet.css'
import { Icon } from 'leaflet'
import { LMap, LMarker, LTileLayer } from 'vue2-leaflet'

delete Icon.Default.prototype._getIconUrl
Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

const VueLeaflet = {
  install(Vue) {
    Vue.component('LMap', LMap)
    Vue.component('LMarker', LMarker)
    Vue.component('LTileLayer', LTileLayer)
  }
}

Vue.use(VueLeaflet)

export default VueLeaflet

It's a brute force solution, but it works!