Search code examples
vuejs2leafletopenlayers

Using libraries such as Leaflet or OpenLayers with Vue.js without breaking DOM?

The JS libraries that are meant for showing maps on the web pages and I guess many other libraries that visualize data on the web pages often modify the DOM quite heavily.

If I want to use such library with Vue.js and there is no fitting library adaption available for Vue.js then what are the best practices for adapting them, so that the DOM is updated properly and I can use the libraries safely?

Solution

  • Personally, for Vue or for any library, I just play with the lifecycle of the JavaScript framework.

    In Vue, I create my map in mounted cycle (see the diagram from the official doc) because Openlayers like Leaflet both need a DOM element mounted to bind the map related elements.

    It's the same if using React, you just use componentDidMount (see the React lifecycle diagram)