CODEWITHSUNDEEP
vue.jsleafletvuejs3
Nora
Nora

Reputation: 186

How can I integrate a JS library with a Vue3 project?

I am trying to integrate Leaflet with a Vue 3 project but I need some help integrating a pure JS library with a Vue project (not sure if it is even possible without using a dedicated NPM package). As per the Leaftlet documentation, I have included the .css and .js files in my index.html file and I have done everything described in the instructions but whenever I try to recreate their example code in a Vue context I get the following error:

runtime-core.esm-bundler.js?5c40:540 Error: Map container not found.
    at NewClass._initContainer (leaflet-src.js?e11e:4066)
    at NewClass.initialize (leaflet-src.js?e11e:3099)
    at new NewClass (leaflet-src.js?e11e:296)
    at Object.createMap [as map] (leaflet-src.js?e11e:4691)
    at setup (VM2010 App.vue:14)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6542)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6503)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4206)
    at processComponent (runtime-core.esm-bundler.js?5c40:4182)

My project is very simple. This is my index.html file:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <script src="js/main.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

I've included the leaflet.js file both in the head and body sections just in case...

This is my App.vue file:

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

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";

export default {
  name: "App",
  setup() {
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    return {
      mymap
    }
  }
};
</script>

<style>
#mapid { height: 180px; }
</style>

Apologies if my question is dumb. Any advice would be appreciated since I've tried several wrappers for the library and they all have compatibility issues with Vue 3.

Upvotes: 4

Views: 1092

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try out to mount the map in its container in the onMounted hook because in the setup hook the DOM tree is not ready yet :

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import {onMounted,ref} from 'vue'

export default {
  name: "App",
  setup() {
    var mymap =ref(null)

   onMounted(()=>{
     mymap.value=     L.map('mapid').setView([51.505, -0.09], 13);
   })
    return {
      mymap
    }
  }
};
</script

Upvotes: 2

Related Questions