diff --git a/apimail/templates/apimail/message_list.html b/apimail/templates/apimail/message_list.html
index c44bf9e7289d52b4c3e1fc328ec4407c0f47744b..4f0cbf96585cb416ac36258b7ff9ef77560fae66 100644
--- a/apimail/templates/apimail/message_list.html
+++ b/apimail/templates/apimail/message_list.html
@@ -10,11 +10,11 @@
 {% block content %}
 
   <b-list-group id="message-header-list">
-    <message-header
+    <message-header-list-item
 	v-for="message in apidata.results"
 	v-bind:message="message"
 	v-bind:key="message.id"
-    ></message-header>
+    ></message-header-list-item>
   </b-list-group>
 
 {% endblock content %}
diff --git a/scipost/static/scipost/assets/js/main.js b/scipost/static/scipost/assets/js/main.js
deleted file mode 100644
index 4c2ae63eb8b814afd62d118efbc38ad379a3159e..0000000000000000000000000000000000000000
--- a/scipost/static/scipost/assets/js/main.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Vue from 'vue';
-import BootstrapVue from 'bootstrap-vue';
-
-Vue.use(BootstrapVue);
-
-import 'bootstrap/dist/css/bootstrap.css';
-import 'bootstrap-vue/dist/bootstrap-vue.css';
-
-import MessageHeaderList from '../vue/components/MessageHeaderList.vue';
-
-export default {
-    components: {
-	MessageHeaderList,
-    },
-}
-
-window.Vue = Vue;
diff --git a/scipost/static/scipost/assets/vue/components/MessageHeaderListItem.vue b/scipost/static/scipost/assets/vue/components/MessageHeaderListItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..86e21af6a49cb129e91134da387aa3eac027361f
--- /dev/null
+++ b/scipost/static/scipost/assets/vue/components/MessageHeaderListItem.vue
@@ -0,0 +1,17 @@
+<template>
+  <b-list-group-item :id="'item' + [[ message.uuid ]]">
+    On {{ message.data.Date }}, from {{ message.data.from }}
+  </b-list-group-item>
+</template>
+
+<script>
+export default {
+    name: "message-header-list-item",
+    props: {
+	message: {
+	  type: Object,
+	  required: true
+	}
+    }
+}
+</script>
diff --git a/scipost/static/scipost/assets/vue/message_list.js b/scipost/static/scipost/assets/vue/message_list.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d47456d1d7a9986c2b96632af114c9ce369babe
--- /dev/null
+++ b/scipost/static/scipost/assets/vue/message_list.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+
+import BootstrapVue from 'bootstrap-vue';
+Vue.use(BootstrapVue);
+
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+
+
+import MessageHeaderListItem from './components/MessageHeaderListItem.vue'
+Vue.component('message-header-list-item', MessageHeaderListItem);
+
+
+var messageList = new Vue({
+    el: '#message-header-list',
+    data: {
+	apidata: [],
+	results: [],
+    },
+    created: function () {
+	fetch('/mail/api/stored_messages')
+	    .then(stream => stream.json())
+	    .then(data => this.apidata = data)
+	    .catch(error => console.error(error))
+    }
+})
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index 6efb600911015fe6412aa65ce54d63d7a0eea3ed..a485a453d54b3ac85aac8f30d0c2ac15bfd19718 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -20,7 +20,6 @@ module.exports = {
             "./scipost/static/scipost/assets/js/newsticker.js",
         ],
 	vue: [
-            // "./scipost/static/scipost/assets/js/main.js",
             "./scipost/static/scipost/assets/vue/message_list.js",
 	],
     },
@@ -104,9 +103,9 @@ module.exports = {
     resolve: {
 	alias: {
 	    // If using the runtime only build
-	    // 'vue$': 'vue/dist/vue.runtime.esm.js'
+	    'vue$': 'vue/dist/vue.runtime.esm.js'
 	    // Or if using full build of Vue (runtime + compiler)
-	    'vue$': 'vue/dist/vue.esm.js'
+	    // 'vue$': 'vue/dist/vue.esm.js'
 	}
     },
 }