Update to a more recent version of poi;

index.ejs

@@ -6,11 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title><%= htmlWebpackPlugin.options.title %></title>
 
-    
     <link rel="manifest" href="/manifest.json">
     <meta name="theme-color" content="#4DBA87">
 
-
     <% if (htmlWebpackPlugin.options.description) { %>
     <meta name="description" content="<%= htmlWebpackPlugin.options.description %>"/>
     <% } %>

package.json

@@ -1,10 +1,10 @@
 {
   "private": true,
-  "name": "app",
-  "productName": "app",
-  "description": "My posh Vue project",
-  "version": "0.0.0",
-  "license": "MIT",
+  "name": "Magellan",
+  "productName": "Magellan",
+  "description": "A map manager for friends and profit",
+  "version": "0.0.1",
+  "license": "Peer Production License",
   "scripts": {
     "dev": "poi",
     "build": "poi build",
@@ -29,9 +29,11 @@
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.8.1",
-    "poi": "^9.0.0",
+    "poi": "^12.5.8",
     "poi-preset-bundle-report": "^2.0.0",
     "poi-preset-offline": "^9.0.0",
-    "serve": "^6.1.0"
+    "serve": "^6.1.0",
+    "vue": "^2.6.10",
+    "vue-template-compiler": "^2.6.10"
   }
 }

poi.config.js

@@ -4,26 +4,21 @@ const pkg = require('./package');
 module.exports = {
     entry: [
         'src/polyfills.js',
-    'src/index.js'
+        'src/index.js',
     ],
+    output: {
         html: {
             title: pkg.productName,
             description: pkg.description,
             template: path.join(__dirname, 'index.ejs')
         },
-  postcss: {
-    plugins: [
-      // Your postcss plugins
-    ]
-  },
-  presets: [
-    require('poi-preset-bundle-report')(),
-    require('poi-preset-offline')({
-      pwa: './src/pwa.js', // Path to pwa runtime entry
-      pluginOptions: {} // Additional options for offline-plugin
-    })
-  ],
-  output: {
         publicUrl: '/magellan',
-  }
+    },
+    //presets: [
+    //require('poi-preset-bundle-report')(),
+    //require('poi-preset-offline')({
+    //pwa: './src/pwa.js', // Path to pwa runtime entry
+    //pluginOptions: {} // Additional options for offline-plugin
+    //})
+    //],
 };

src/components/Map.vue

@@ -16,6 +16,7 @@
 
         <l-marker
             v-for="loc in store.locations"
+            :key="loc.id"
             :lat-lng="loc.coordinates"
         >
             <l-popup>
@@ -35,7 +36,7 @@ import * as L from 'leaflet';
 
 import store from '../store';
 
-import Sidebar from './Sidebar';
+import Sidebar from './Sidebar.vue';
 
 const TILE_URL = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';
 const ATTRIBUTION = 'Carte données &copy; <a href="https://osm.org/copyright/">OpenStreetMap (ODbL)</a> / fond OSM-FR (CC-by-SA), <a href="https://www.data.gouv.fr/fr/datasets/points-dinterets-openstreetmap/">POI: OpenStreetMap (ODbL)</a>, <a href="https://www.data.gouv.fr/fr/datasets/base-d-adresses-nationale-ouverte-bano/">adresses BANO (ODbL)</a>, <a href="https://github.com/addok/addok">geocodeur addok</a>';

src/components/Sidebar.vue

@@ -22,8 +22,8 @@
 <script>
 import * as _ from 'leaflet-sidebar-v2';
 
-import Search from './Search';
-import ListAll from './ListAll';
+import Search from './Search.vue';
+import ListAll from './ListAll.vue';
 
 export default {
     name: "sidebar",