Temporarily load vue.js as footer script

apimail/templates/apimail/message_list.html

 {% extends 'scipost/base.html' %}
 
-{% block headsup %}
-  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-{% endblock headsup %}
+{% load staticfiles %}
 
 {% block content %}
 
   <div class="accordion" id="messageAccordion">
     <messagedisplay
-	v-for="message in apidata.results"
-	v-bind:message="message"
-	v-bind:key="message.id"
+      v-for="message in apidata.results"
+	     v-bind:message="message"
+	     v-bind:key="message.id"
     ></messagedisplay>
   </div>
 
 {% endblock content %}
 
 {% block footer_script %}
+
+  <script nonce="{{ request.csp_nonce }}" src="{% static 'scipost/assets/js/vue.js' %}"></script>
+
+
   <script nonce="{{ request.csp_nonce }}">
 
    Vue.component('messagedisplay', {

webpack.dev.config.js

@@ -13,6 +13,7 @@ module.exports = {
             "bootstrap-loader",
             "./scipost/static/scipost/assets/js/dynamic_loading.js",
             "./scipost/static/scipost/assets/js/scripts.js",
+            "./scipost/static/scipost/assets/js/vue.js",
         ],
         homepage: [
             "./scipost/static/scipost/assets/js/fader.js",