adapt linting of current frontend to new eslint-plugin-vue rules

webapp/.eslintrc.js

@@ -25,6 +25,10 @@ module.exports = {
     'no-console': ['error'],
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+    // deactivate Vue3 rules for now, project will be migrated to Vue3
+    'vue/multi-word-component-names': 0,
+    'vue/no-mutating-props': 0,
+    'vue/no-v-text-v-html-on-component': 0,
     'prettier/prettier': ['error', {
       htmlWhitespaceSensitivity: 'ignore'
     }],

webapp/components/Editor/MenuLegend.vue

@@ -16,6 +16,7 @@
         />
       </slot>
     </template>
+    <!-- eslint-disable-next-line vue/no-useless-template-attributes -->
     <template #popover="" class="legend">
       <div class="legend-container">
         <div class="legend-header">{{ $t(`editor.legend.legendTitle`) }}</div>

webapp/pages/map.vue

@@ -57,6 +57,7 @@
   </div>
 </template>
 
+<!-- eslint-disable vue/no-reserved-component-names -->
 <script>
 import { isEmpty, toArray } from 'lodash'
 import mapboxgl from 'mapbox-gl'
@@ -560,6 +561,7 @@ export default {
   },
 }
 </script>
+<!-- eslint-enable vue/no-reserved-component-names -->
 
 <style lang="scss">
 // description: https: //github.com/geospoc/v-mapbox/tree/v1.11.2/docs