Vue Leaflet with Django

Using Django Templates & Frontend
1

Hello

I have been playing with vuejs yesterday with my django project and I could success create a component and repeat it to print some stations. Those stations will be showed as an icon in a map. As I previously work with leaftlet, I tried to make working Leaflet.

In my base.html template, I added the following

<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
	<script src="{% static 'js/bootstrap-5-2-0/bootstrap.bundle.min.js' %}"></script>
    <!-- CHartjs -->
    <script src="{% static 'js/chartjs-3-9-0/dist/chart.min.js' %}"></script>
    <script src="{% static 'js/chartjs-3-9-0/dist/chartjs-adapter-date-fns.bundle.min.js' %}"></script>
    <!-- Leaflet -->
    <script src="{% static 'js/leaflet-1-8-0/leaflet.js' %}"></script>
    <script src="//unpkg.com/vue2-leaflet"></script>
    <!-- Vuejs -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- main js script -->
    <script src="{% static 'js/script.js' %}"></script>
    <!-- main js script for vuw -->
    <script src="{% static 'js/vuejs/main.js' %}"></script>
    <script src="{% static 'js/vuejs/component/stations.js' %}"></script>
    <script src="{% static 'js/vuejs/component/vue.js' %}"></script>
    <script>
        const mountApp = app.mount("#v_app");
    </script>

My workshop with vuejs works fine and now I want to use leaflet to show the icon in the right location. Sadly, I experienced some issue until I found Vue Leaflet. Great!!

My issues and tries
I tried to make it working with Django…
In my django app, I created a component in

map/static/js/vuejs/component/vue.js

(At the same level, I have my stations.js component, which works)

I also created a template here

map/templates/map/leaflet.html

and I pasted the following code

<template>
  <l-map style="height: 300px" :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker :lat-lng="markerLatLng"></l-marker>
  </l-map>
</template>

as showed here

I do not know if I started well, I went back to my vus.js component and I add the following

Vue.component('l-map', window.Vue2Leaflet.LMap);

Error:

Uncaught TypeError: Vue.component is not a function

Then I decided to comment

<!-- <script src="{% static 'js/vuejs/component/vue.js' %}"></script> -->

and simply copy the code you see at the top of the page and past it in my map/templates/base.html, to see what happen

<template>
  <l-map style="height: 300px" :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker :lat-lng="markerLatLng"></l-marker>
  </l-map>
</template>



<script>
import {LMap, LTileLayer, LMarker} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 15,
      center: [51.505, -0.159],
      markerLatLng: [51.504, -0.159]
    };
  }
}
</script>

The error:

Uncaught SyntaxError: import declarations may only appear at top level of a module

Then I have tried several option to move import and export at the top of any js script.
I also tried to move
<script src="{% static 'js/script.js' %}"></script> just after the charts library call.

My last try, I reorder my js calls as the following

    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
	<script src="{% static 'js/bootstrap-5-2-0/bootstrap.bundle.min.js' %}"></script>
    <!-- CHartjs -->
    <script src="{% static 'js/chartjs-3-9-0/dist/chart.min.js' %}"></script>
    <script src="{% static 'js/chartjs-3-9-0/dist/chartjs-adapter-date-fns.bundle.min.js' %}"></script>
    <!-- Leaflet -->
    <script src="{% static 'js/leaflet-1-8-0/leaflet.js' %}"></script>
    <script src="//unpkg.com/vue2-leaflet"></script>
    <!-- Vuejs -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- main js script -->
    <script src="{% static 'js/script.js' %}"></script>
    <!-- main js script for vue -->
    <script src="{% static 'js/vuejs/main.js' %}"></script>
    <script src="{% static 'js/vuejs/component/stations.js' %}"></script>
    <script src="{% static 'js/vuejs/component/vue.js' %}"></script>
    <script>
        const mountApp = app.mount("#v_app");
    </script>

and in my component

map/static/js/vuejs/component/vue.js

I only pasted

export default {
  components: {
    'l-map': window.Vue2Leaflet.LMap,
  },
};

and I got the same error

SyntaxError: export declarations may only appear at top level of a module

To be honest, I have no idea now how to use Vue Leaflet within a django project and finally how to include/import Vue Leaflet. I think, I am turning around the solution but I am still sweating :slight_smile:

What would be your recommendation to start well with Vue Leaflet with Django?

Many thanks

2

Last try: I tried to do as with my stations.js component. In my component

map/static/js/vuejs/component/vue.js

I pasted the following

app.component('leaflet',{
    delimiters: ['[{', '}]'],
    template: `
          <l-map style="height: 300px" :zoom="zoom" :center="center">
            <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
            <l-marker :lat-lng="markerLatLng"></l-marker>
          </l-map>
    `,
    props: {
    },
    data: function(){
        return {
            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            attribution:'&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 15,
      center: [51.505, -0.159],
      markerLatLng: [51.504, -0.159]
        }
    },
    methods: {
    },

    computed : {
    }
})

and in my base.html I pasted the following <leaflet></leaflet>

None works :frowning: