diff --git a/www/webapp/.eslintrc.js b/www/webapp/.eslintrc.js
index 2e99327fa..60da170fe 100644
--- a/www/webapp/.eslintrc.js
+++ b/www/webapp/.eslintrc.js
@@ -6,15 +6,27 @@ module.exports = {
   env: {
     browser: true,
     node: true, // Can be removed after migration to vite.
-    es2022: true,
+    es2024: true,
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
   },
   extends: [
     'plugin:vue/essential',
     // 'plugin:vue/strongly-recommended',
     // 'plugin:vue/recommended',
     'plugin:vuetify/base',
-    'eslint:recommended'
+    'plugin:import/recommended',
+    'eslint:recommended',
   ],
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [['@', './src']],
+      },
+    },
+  },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -26,6 +38,7 @@ module.exports = {
     'vue/no-deprecated-filter': 'warn', // Preparation for vue3
     'vue/no-deprecated-v-on-number-modifiers': 'warn', // Preparation for vue3
     'vue/no-deprecated-html-element-is': 'warn', // Preparation for vue3
+    'vue/match-component-file-name': ['error', {'extensions': ['vue'], 'shouldMatchCase': true}],
   },
   ignorePatterns: ['**/src/modules/**/*'],
 }
diff --git a/www/webapp/package.json b/www/webapp/package.json
index 1b69a6437..cf3d1df6e 100644
--- a/www/webapp/package.json
+++ b/www/webapp/package.json
@@ -5,8 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "eslint --ignore-path .gitignore --no-fix  src/",
-    "lint:fix": "eslint --ignore-path .gitignore --fix  src/"
+    "lint": "eslint --ignore-path .gitignore --no-fix src/**/*.{vue,js,json}",
+    "lint:fix": "eslint --ignore-path .gitignore --fix src/**/*.{vue,js,json}"
   },
   "dependencies": {
     "@fontsource/roboto": "^5.0.3",
@@ -26,6 +26,8 @@
     "@vue/cli-plugin-router": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
     "eslint": "^8.31.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.8.0",
     "eslint-plugin-vuetify": "^1.1.0",
     "sass": "~1.32.13",
diff --git a/www/webapp/src/components/ActivateAccountActionHandler.vue b/www/webapp/src/components/ActivateAccountActionHandler.vue
index dbcd7a29c..4dd1ced6b 100644
--- a/www/webapp/src/components/ActivateAccountActionHandler.vue
+++ b/www/webapp/src/components/ActivateAccountActionHandler.vue
@@ -65,7 +65,7 @@
 
 <script>
   import axios from 'axios';
-  import GenericActionHandler from "./GenericActionHandler"
+  import GenericActionHandler from "./GenericActionHandler.vue"
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
diff --git a/www/webapp/src/components/CreateTOTPActionHandler.vue b/www/webapp/src/components/CreateTOTPActionHandler.vue
index d35f71522..80913bd70 100644
--- a/www/webapp/src/components/CreateTOTPActionHandler.vue
+++ b/www/webapp/src/components/CreateTOTPActionHandler.vue
@@ -1,5 +1,5 @@
 <script>
-  import GenericActionHandler from "./GenericActionHandler"
+  import GenericActionHandler from "./GenericActionHandler.vue"
 
   export default {
     name: 'CreateTOTPActionHandler',
diff --git a/www/webapp/src/components/DonateDirectDebitForm.vue b/www/webapp/src/components/DonateDirectDebitForm.vue
index 7c048cb6b..49d4d15ea 100644
--- a/www/webapp/src/components/DonateDirectDebitForm.vue
+++ b/www/webapp/src/components/DonateDirectDebitForm.vue
@@ -100,7 +100,7 @@
   import axios from 'axios';
   import {email_pattern} from '@/validation';
   import {digestError} from '@/utils';
-  import ErrorAlert from '@/components/ErrorAlert';
+  import ErrorAlert from '@/components/ErrorAlert.vue';
   import {mdiAccount, mdiBank, mdiCash100, mdiEmail, mdiMessageTextOutline} from "@mdi/js";
 
   const HTTP = axios.create({
diff --git a/www/webapp/src/components/Field/Record/A.vue b/www/webapp/src/components/Field/RecordA.vue
similarity index 88%
rename from www/webapp/src/components/Field/Record/A.vue
rename to www/webapp/src/components/Field/RecordA.vue
index 9692532f3..868ccc184 100644
--- a/www/webapp/src/components/Field/Record/A.vue
+++ b/www/webapp/src/components/Field/RecordA.vue
@@ -1,6 +1,6 @@
 <script>
 import { ipAddress } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 export default {
   name: 'RecordA',
diff --git a/www/webapp/src/components/Field/Record/AAAA.vue b/www/webapp/src/components/Field/RecordAAAA.vue
similarity index 95%
rename from www/webapp/src/components/Field/Record/AAAA.vue
rename to www/webapp/src/components/Field/RecordAAAA.vue
index 1a9640549..031775bf4 100644
--- a/www/webapp/src/components/Field/Record/AAAA.vue
+++ b/www/webapp/src/components/Field/RecordAAAA.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 // from https://stackoverflow.com/a/17871737/6867099, without the '%' and '.' parts
 const ip6Address = helpers.regex('ip6Address', /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:))$/);
diff --git a/www/webapp/src/components/Field/Record/CAA.vue b/www/webapp/src/components/Field/RecordCAA.vue
similarity index 94%
rename from www/webapp/src/components/Field/Record/CAA.vue
rename to www/webapp/src/components/Field/RecordCAA.vue
index ff331ab71..232ceb1b3 100644
--- a/www/webapp/src/components/Field/Record/CAA.vue
+++ b/www/webapp/src/components/Field/RecordCAA.vue
@@ -1,6 +1,6 @@
 <script>
 import { integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const MAX8 = 255;
 const int8 = between(0, MAX8);
diff --git a/www/webapp/src/components/Field/Record/CDNSKEY.vue b/www/webapp/src/components/Field/RecordCDNSKEY.vue
similarity index 65%
rename from www/webapp/src/components/Field/Record/CDNSKEY.vue
rename to www/webapp/src/components/Field/RecordCDNSKEY.vue
index 9366e5482..59bd954ea 100644
--- a/www/webapp/src/components/Field/Record/CDNSKEY.vue
+++ b/www/webapp/src/components/Field/RecordCDNSKEY.vue
@@ -1,5 +1,5 @@
 <script>
-import RecordDNSKEY from './DNSKEY.vue';
+import RecordDNSKEY from './RecordDNSKEY.vue';
 
 export default {
   name: 'RecordCDNSKEY',
diff --git a/www/webapp/src/components/Field/Record/CDS.vue b/www/webapp/src/components/Field/RecordCDS.vue
similarity index 67%
rename from www/webapp/src/components/Field/Record/CDS.vue
rename to www/webapp/src/components/Field/RecordCDS.vue
index e06666380..1110898e4 100644
--- a/www/webapp/src/components/Field/Record/CDS.vue
+++ b/www/webapp/src/components/Field/RecordCDS.vue
@@ -1,5 +1,5 @@
 <script>
-import RecordDS from './DS.vue';
+import RecordDS from './RecordDS.vue';
 
 export default {
   name: 'RecordCDS',
diff --git a/www/webapp/src/components/Field/Record/CNAME.vue b/www/webapp/src/components/Field/RecordCNAME.vue
similarity index 92%
rename from www/webapp/src/components/Field/Record/CNAME.vue
rename to www/webapp/src/components/Field/RecordCNAME.vue
index 11240ac65..81a9b92e8 100644
--- a/www/webapp/src/components/Field/Record/CNAME.vue
+++ b/www/webapp/src/components/Field/RecordCNAME.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hostname = helpers.regex('hostname', /^((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,}))[.]?$/);
 const trailingDot = helpers.regex('trailingDot', /[.]$/);
diff --git a/www/webapp/src/components/Field/Record/DNSKEY.vue b/www/webapp/src/components/Field/RecordDNSKEY.vue
similarity index 95%
rename from www/webapp/src/components/Field/Record/DNSKEY.vue
rename to www/webapp/src/components/Field/RecordDNSKEY.vue
index 3785ced8c..ef083efab 100644
--- a/www/webapp/src/components/Field/Record/DNSKEY.vue
+++ b/www/webapp/src/components/Field/RecordDNSKEY.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const base64 = helpers.regex('base64', /^[0-9a-zA-Z+/][0-9a-zA-Z+/\s]*(=\s*){0,3}$/);
 
diff --git a/www/webapp/src/components/Field/Record/DS.vue b/www/webapp/src/components/Field/RecordDS.vue
similarity index 95%
rename from www/webapp/src/components/Field/Record/DS.vue
rename to www/webapp/src/components/Field/RecordDS.vue
index 0c5f2b8da..0b1988c5d 100644
--- a/www/webapp/src/components/Field/Record/DS.vue
+++ b/www/webapp/src/components/Field/RecordDS.vue
@@ -1,6 +1,6 @@
 <script>
 import { and, helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hex = helpers.regex('hex', /^([0-9a-fA-F]\s*)*[0-9a-fA-F]$/);
 const trim = and(helpers.regex('trimBegin', /^[^\s]/), helpers.regex('trimEnd', /[^\s]$/));
diff --git a/www/webapp/src/components/Field/Record/HTTPS.vue b/www/webapp/src/components/Field/RecordHTTPS.vue
similarity index 66%
rename from www/webapp/src/components/Field/Record/HTTPS.vue
rename to www/webapp/src/components/Field/RecordHTTPS.vue
index 01480af77..05c3e5ae5 100644
--- a/www/webapp/src/components/Field/Record/HTTPS.vue
+++ b/www/webapp/src/components/Field/RecordHTTPS.vue
@@ -1,5 +1,5 @@
 <script>
-import RecordSVCB from './SVCB.vue';
+import RecordSVCB from './RecordSVCB.vue';
 
 export default {
   name: 'RecordHTTPS',
diff --git a/www/webapp/src/components/Field/RecordList.vue b/www/webapp/src/components/Field/RecordList.vue
index 64a7eb12f..9e00e5b89 100644
--- a/www/webapp/src/components/Field/RecordList.vue
+++ b/www/webapp/src/components/Field/RecordList.vue
@@ -31,25 +31,25 @@
 
 <script>
 import RecordItem from './RecordItem.vue';
-import RecordA from './Record/A.vue';
-import RecordAAAA from './Record/AAAA.vue';
-import RecordCAA from './Record/CAA.vue';
-import RecordCDNSKEY from './Record/CDNSKEY.vue';
-import RecordCDS from './Record/CDS.vue';
-import RecordCNAME from './Record/CNAME.vue';
-import RecordDNSKEY from './Record/DNSKEY.vue';
-import RecordDS from './Record/DS.vue';
-import RecordHTTPS from './Record/HTTPS.vue';
-import RecordMX from './Record/MX.vue';
-import RecordNS from './Record/NS.vue';
-import RecordOPENPGPKEY from './Record/OPENPGPKEY.vue';
-import RecordPTR from './Record/PTR.vue';
-import RecordSMIMEA from './Record/SMIMEA.vue';
-import RecordSRV from './Record/SRV.vue';
-import RecordSVCB from './Record/SVCB.vue';
-import RecordTLSA from './Record/TLSA.vue';
-import RecordTXT from './Record/TXT.vue';
-import RecordSubnet from './Record/Subnet.vue';
+import RecordA from './RecordA.vue';
+import RecordAAAA from './RecordAAAA.vue';
+import RecordCAA from './RecordCAA.vue';
+import RecordCDNSKEY from './RecordCDNSKEY.vue';
+import RecordCDS from './RecordCDS.vue';
+import RecordCNAME from './RecordCNAME.vue';
+import RecordDNSKEY from './RecordDNSKEY.vue';
+import RecordDS from './RecordDS.vue';
+import RecordHTTPS from './RecordHTTPS.vue';
+import RecordMX from './RecordMX.vue';
+import RecordNS from './RecordNS.vue';
+import RecordOPENPGPKEY from './RecordOPENPGPKEY.vue';
+import RecordPTR from './RecordPTR.vue';
+import RecordSMIMEA from './RecordSMIMEA.vue';
+import RecordSRV from './RecordSRV.vue';
+import RecordSVCB from './RecordSVCB.vue';
+import RecordTLSA from './RecordTLSA.vue';
+import RecordTXT from './RecordTXT.vue';
+import RecordSubnet from './RecordSubnet.vue';
 import {mdiClose, mdiPlus} from "@mdi/js";
 
 export default {
diff --git a/www/webapp/src/components/Field/Record/MX.vue b/www/webapp/src/components/Field/RecordMX.vue
similarity index 94%
rename from www/webapp/src/components/Field/Record/MX.vue
rename to www/webapp/src/components/Field/RecordMX.vue
index 6f0e82841..e6f166af6 100644
--- a/www/webapp/src/components/Field/Record/MX.vue
+++ b/www/webapp/src/components/Field/RecordMX.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hostname = helpers.regex('hostname', /^((([a-zA-Z0-9-]+\.?)+)|\.)$/);
 const trailingDot = helpers.regex('trailingDot', /[.]$/);
diff --git a/www/webapp/src/components/Field/Record/NS.vue b/www/webapp/src/components/Field/RecordNS.vue
similarity index 92%
rename from www/webapp/src/components/Field/Record/NS.vue
rename to www/webapp/src/components/Field/RecordNS.vue
index 163da50d2..ad26aa688 100644
--- a/www/webapp/src/components/Field/Record/NS.vue
+++ b/www/webapp/src/components/Field/RecordNS.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hostname = helpers.regex('hostname', /^((([a-zA-Z0-9-]+\.?)+)|\.)$/);
 const trailingDot = helpers.regex('trailingDot', /[.]$/);
diff --git a/www/webapp/src/components/Field/Record/OPENPGPKEY.vue b/www/webapp/src/components/Field/RecordOPENPGPKEY.vue
similarity index 90%
rename from www/webapp/src/components/Field/Record/OPENPGPKEY.vue
rename to www/webapp/src/components/Field/RecordOPENPGPKEY.vue
index 5bdf167af..caa4f70db 100644
--- a/www/webapp/src/components/Field/Record/OPENPGPKEY.vue
+++ b/www/webapp/src/components/Field/RecordOPENPGPKEY.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const base64 = helpers.regex('base64', /^[0-9a-zA-Z+/][0-9a-zA-Z+/\s]*(=\s*){0,3}$/);
 
diff --git a/www/webapp/src/components/Field/Record/PTR.vue b/www/webapp/src/components/Field/RecordPTR.vue
similarity index 65%
rename from www/webapp/src/components/Field/Record/PTR.vue
rename to www/webapp/src/components/Field/RecordPTR.vue
index 06f4e9c26..2d124cad7 100644
--- a/www/webapp/src/components/Field/Record/PTR.vue
+++ b/www/webapp/src/components/Field/RecordPTR.vue
@@ -1,5 +1,5 @@
 <script>
-import RecordCNAME from './CNAME.vue';
+import RecordCNAME from './RecordCNAME.vue';
 
 export default {
   name: 'RecordPTR',
diff --git a/www/webapp/src/components/Field/Record/SMIMEA.vue b/www/webapp/src/components/Field/RecordSMIMEA.vue
similarity index 66%
rename from www/webapp/src/components/Field/Record/SMIMEA.vue
rename to www/webapp/src/components/Field/RecordSMIMEA.vue
index 27db27511..139e1928f 100644
--- a/www/webapp/src/components/Field/Record/SMIMEA.vue
+++ b/www/webapp/src/components/Field/RecordSMIMEA.vue
@@ -1,5 +1,5 @@
 <script>
-import RecordTLSA from './TLSA.vue';
+import RecordTLSA from './RecordTLSA.vue';
 
 export default {
   name: 'RecordSMIMEA',
diff --git a/www/webapp/src/components/Field/Record/SRV.vue b/www/webapp/src/components/Field/RecordSRV.vue
similarity index 95%
rename from www/webapp/src/components/Field/Record/SRV.vue
rename to www/webapp/src/components/Field/RecordSRV.vue
index 27c3b91f2..5044a8544 100644
--- a/www/webapp/src/components/Field/Record/SRV.vue
+++ b/www/webapp/src/components/Field/RecordSRV.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 // Allow for root label only, see RFC 2052
 const hostname = helpers.regex('hostname', /^((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))?[.]?$/);
diff --git a/www/webapp/src/components/Field/Record/SVCB.vue b/www/webapp/src/components/Field/RecordSVCB.vue
similarity index 95%
rename from www/webapp/src/components/Field/Record/SVCB.vue
rename to www/webapp/src/components/Field/RecordSVCB.vue
index fef6b5787..b8d5cce10 100644
--- a/www/webapp/src/components/Field/Record/SVCB.vue
+++ b/www/webapp/src/components/Field/RecordSVCB.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 // Allow for root label only
 const hostname = helpers.regex('hostname', /^((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))?[.]?$/);
diff --git a/www/webapp/src/components/Field/Record/Subnet.vue b/www/webapp/src/components/Field/RecordSubnet.vue
similarity index 96%
rename from www/webapp/src/components/Field/Record/Subnet.vue
rename to www/webapp/src/components/Field/RecordSubnet.vue
index 35851abc4..a2226a16e 100644
--- a/www/webapp/src/components/Field/Record/Subnet.vue
+++ b/www/webapp/src/components/Field/RecordSubnet.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers, or } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 // from https://www.oreilly.com/library/view/regular-expressions-cookbook/9781449327453/ch08s16.html, adding subnet
 const ip4AddressOrSubnet = helpers.regex('ip4Address', /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])(\/(3[0-2]|[12]?[0-9]))?$/);
diff --git a/www/webapp/src/components/Field/Record/TLSA.vue b/www/webapp/src/components/Field/RecordTLSA.vue
similarity index 95%
rename from www/webapp/src/components/Field/Record/TLSA.vue
rename to www/webapp/src/components/Field/RecordTLSA.vue
index 1660a1d9d..aa5ee6fdc 100644
--- a/www/webapp/src/components/Field/Record/TLSA.vue
+++ b/www/webapp/src/components/Field/RecordTLSA.vue
@@ -1,6 +1,6 @@
 <script>
 import { and, helpers, integer, between } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const hex = helpers.regex('hex', /^([0-9a-fA-F]\s*)*[0-9a-fA-F]$/);
 const trim = and(helpers.regex('trimBegin', /^[^\s]/), helpers.regex('trimEnd', /[^\s]$/));
diff --git a/www/webapp/src/components/Field/Record/TXT.vue b/www/webapp/src/components/Field/RecordTXT.vue
similarity index 89%
rename from www/webapp/src/components/Field/Record/TXT.vue
rename to www/webapp/src/components/Field/RecordTXT.vue
index 79954afd2..73f2739e4 100644
--- a/www/webapp/src/components/Field/Record/TXT.vue
+++ b/www/webapp/src/components/Field/RecordTXT.vue
@@ -1,6 +1,6 @@
 <script>
 import { helpers } from 'vuelidate/lib/validators';
-import RecordItem from '../RecordItem.vue';
+import RecordItem from './RecordItem.vue';
 
 const txtToken = helpers.regex('txtToken', /^".*"$/);
 
diff --git a/www/webapp/src/components/ResetPasswordActionHandler.vue b/www/webapp/src/components/ResetPasswordActionHandler.vue
index d0ea9f122..0d99830b6 100644
--- a/www/webapp/src/components/ResetPasswordActionHandler.vue
+++ b/www/webapp/src/components/ResetPasswordActionHandler.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-  import GenericActionHandler from "./GenericActionHandler"
+  import GenericActionHandler from "./GenericActionHandler.vue"
 
   export default {
     name: 'ResetPasswordActionHandler',
diff --git a/www/webapp/src/views/ChangeEmail.vue b/www/webapp/src/views/ChangeEmail.vue
index ec6a7bea3..b36addecb 100644
--- a/www/webapp/src/views/ChangeEmail.vue
+++ b/www/webapp/src/views/ChangeEmail.vue
@@ -90,10 +90,10 @@
 </template>
 
 <script>
-  import { HTTP, withWorking } from '@/utils';
+  import { HTTP, withWorking ,digestError} from '@/utils';
   import {email_pattern} from '@/validation';
-  import {digestError} from '@/utils';
-  import ErrorAlert from "@/components/ErrorAlert";
+  
+  import ErrorAlert from "@/components/ErrorAlert.vue";
 
   export default {
     name: 'ChangeEmail',
diff --git a/www/webapp/src/views/ConfirmationPage.vue b/www/webapp/src/views/ConfirmationPage.vue
index 37f067e6d..2cebbe460 100644
--- a/www/webapp/src/views/ConfirmationPage.vue
+++ b/www/webapp/src/views/ConfirmationPage.vue
@@ -59,7 +59,7 @@
   import CreateTOTPActionHandler from '@/components/CreateTOTPActionHandler.vue';
   import ResetPasswordActionHandler from '@/components/ResetPasswordActionHandler.vue';
   import {digestError} from '@/utils';
-  import ErrorAlert from '@/components/ErrorAlert';
+  import ErrorAlert from '@/components/ErrorAlert.vue';
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
diff --git a/www/webapp/src/views/Console/DomainSetupDialog.vue b/www/webapp/src/views/Console/DomainSetupDialog.vue
index 0cef5f7c5..90ce0494b 100644
--- a/www/webapp/src/views/Console/DomainSetupDialog.vue
+++ b/www/webapp/src/views/Console/DomainSetupDialog.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import DomainSetup from "@/views/DomainSetup";
+import DomainSetup from "@/views/DomainSetup.vue";
 import {mdiClose} from "@mdi/js";
 
 export default {
diff --git a/www/webapp/src/views/Console/TOTPVerifyDialog.vue b/www/webapp/src/views/Console/TOTPVerifyDialog.vue
index 3280f2819..4290b6b76 100644
--- a/www/webapp/src/views/Console/TOTPVerifyDialog.vue
+++ b/www/webapp/src/views/Console/TOTPVerifyDialog.vue
@@ -91,7 +91,7 @@
 
 <script>
 import {digestError, HTTP, logout, withWorking} from '@/utils'
-import ErrorAlert from "../../components/ErrorAlert";
+import ErrorAlert from "@/components/ErrorAlert.vue";
 import QrcodeVue from '../../modules/qrcode.vue/dist/qrcode.vue.esm'
 import {mdiCheck, mdiClose, mdiNumeric1Circle, mdiNumeric2Circle} from "@mdi/js";
 
diff --git a/www/webapp/src/views/CrudList.vue b/www/webapp/src/views/CrudList.vue
index c4baab16e..1cfefc6df 100644
--- a/www/webapp/src/views/CrudList.vue
+++ b/www/webapp/src/views/CrudList.vue
@@ -342,16 +342,16 @@
 
 <script>
 import { HTTP, withWorking, digestError } from '@/utils';
-import RRSetType from '@/components/Field/RRSetType';
-import TimeAgo from '@/components/Field/TimeAgo';
+import RRSetType from '@/components/Field/RRSetType.vue';
+import TimeAgo from '@/components/Field/TimeAgo.vue';
 import GenericCheckbox from '@/components/Field/GenericCheckbox.vue';
-import GenericText from '@/components/Field/GenericText';
-import GenericTextarea from '@/components/Field/GenericTextarea';
+import GenericText from '@/components/Field/GenericText.vue';
+import GenericTextarea from '@/components/Field/GenericTextarea.vue';
 import RecordItem from '@/components/Field/RecordItem.vue';
-import RecordList from '@/components/Field/RecordList';
+import RecordList from '@/components/Field/RecordList.vue';
 import GenericSwitchbox from '@/components/Field/GenericSwitchbox.vue';
-import TTL from '@/components/Field/TTL';
-import ErrorAlert from '@/components/ErrorAlert'
+import TTL from '@/components/Field/TTL.vue';
+import ErrorAlert from '@/components/ErrorAlert.vue'
 import {useUserStore} from "@/store/user";
 import {mdiClose, mdiContentSaveEdit, mdiDelete, mdiMagnify, mdiPlus} from "@mdi/js";
 
diff --git a/www/webapp/src/views/CrudListDomain.vue b/www/webapp/src/views/CrudListDomain.vue
index 69892e69a..b14d48eef 100644
--- a/www/webapp/src/views/CrudListDomain.vue
+++ b/www/webapp/src/views/CrudListDomain.vue
@@ -1,7 +1,7 @@
 <script>
 import { HTTP, withWorking } from '@/utils';
-import CrudList from './CrudList';
-import DomainSetupDialog from '@/views/Console/DomainSetupDialog';
+import CrudList from './CrudList.vue';
+import DomainSetupDialog from '@/views/Console/DomainSetupDialog.vue';
 import {mdiDownload, mdiInformation} from "@mdi/js";
 import GenericText from "@/components/Field/GenericText.vue";
 import GenericTextarea from "@/components/Field/GenericTextarea.vue";
diff --git a/www/webapp/src/views/CrudListRecord.vue b/www/webapp/src/views/CrudListRecord.vue
index 6a5f14980..f14a14d9b 100644
--- a/www/webapp/src/views/CrudListRecord.vue
+++ b/www/webapp/src/views/CrudListRecord.vue
@@ -1,5 +1,5 @@
 <script>
-import CrudList from '@/views/CrudList';
+import CrudList from '@/views/CrudList.vue';
 import {HTTP, withWorking} from "@/utils"
 import GenericText from "@/components/Field/GenericText.vue";
 import RecordList from "@/components/Field/RecordList.vue";
diff --git a/www/webapp/src/views/CrudListTOTP.vue b/www/webapp/src/views/CrudListTOTP.vue
index ed9da7dd7..0c2aba810 100644
--- a/www/webapp/src/views/CrudListTOTP.vue
+++ b/www/webapp/src/views/CrudListTOTP.vue
@@ -1,6 +1,6 @@
 <script>
-import CrudList from './CrudList';
-import TOTPVerifyDialog from '@/views/Console/TOTPVerifyDialog';
+import CrudList from './CrudList.vue';
+import TOTPVerifyDialog from '@/views/Console/TOTPVerifyDialog.vue';
 import GenericText from "@/components/Field/GenericText.vue";
 import TimeAgo from "@/components/Field/TimeAgo.vue";
 
diff --git a/www/webapp/src/views/CrudListToken.vue b/www/webapp/src/views/CrudListToken.vue
index 0e404cd1d..c9e72ac7c 100644
--- a/www/webapp/src/views/CrudListToken.vue
+++ b/www/webapp/src/views/CrudListToken.vue
@@ -1,5 +1,5 @@
 <script>
-import CrudList from './CrudList';
+import CrudList from './CrudList.vue';
 import {useUserStore} from "@/store/user";
 import GenericText from "@/components/Field/GenericText.vue";
 import GenericCheckbox from "@/components/Field/GenericCheckbox.vue";
diff --git a/www/webapp/src/views/DeleteAccount.vue b/www/webapp/src/views/DeleteAccount.vue
index 1e43aec00..3e2fca065 100644
--- a/www/webapp/src/views/DeleteAccount.vue
+++ b/www/webapp/src/views/DeleteAccount.vue
@@ -77,7 +77,7 @@
 
 <script>
   import { HTTP, withWorking, digestError } from '@/utils';
-  import ErrorAlert from "../components/ErrorAlert";
+  import ErrorAlert from "@/components/ErrorAlert.vue";
 
   export default {
     name: 'DeleteAccount',
diff --git a/www/webapp/src/views/DomainSetupPage.vue b/www/webapp/src/views/DomainSetupPage.vue
index 5392c7a1d..f83bdf5cc 100644
--- a/www/webapp/src/views/DomainSetupPage.vue
+++ b/www/webapp/src/views/DomainSetupPage.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import DomainSetup from "@/views/DomainSetup";
+import DomainSetup from "@/views/DomainSetup.vue";
 
 export default {
   name: 'DomainSetupPage',
diff --git a/www/webapp/src/views/DynSetup.vue b/www/webapp/src/views/DynSetup.vue
index 7ce9cfa6c..e7dc1c317 100644
--- a/www/webapp/src/views/DynSetup.vue
+++ b/www/webapp/src/views/DynSetup.vue
@@ -170,7 +170,7 @@
 <script>
   import axios from 'axios';
   import {digestError} from '@/utils';
-  import ErrorAlert from "@/components/ErrorAlert";
+  import ErrorAlert from "@/components/ErrorAlert.vue";
   import {useUserStore} from "@/store/user";
 
   const HTTP = axios.create({
diff --git a/www/webapp/src/views/LoginPage.vue b/www/webapp/src/views/LoginPage.vue
index 5bc426fbc..c420c426d 100644
--- a/www/webapp/src/views/LoginPage.vue
+++ b/www/webapp/src/views/LoginPage.vue
@@ -87,7 +87,7 @@
 
 <script>
 import { HTTP, digestError } from '@/utils';
-import ErrorAlert from "@/components/ErrorAlert";
+import ErrorAlert from "@/components/ErrorAlert.vue";
 import {useUserStore} from "@/store/user";
 
 export default {
diff --git a/www/webapp/src/views/MFA.vue b/www/webapp/src/views/MFA.vue
index f4a2202cd..e2dee7540 100644
--- a/www/webapp/src/views/MFA.vue
+++ b/www/webapp/src/views/MFA.vue
@@ -80,7 +80,7 @@
 
 <script>
 import {digestError, HTTP, withWorking} from '@/utils'
-import ErrorAlert from "../components/ErrorAlert";
+import ErrorAlert from "@/components/ErrorAlert.vue";
 import {mdiNumeric1Circle, mdiNumeric2Circle} from "@mdi/js";
 
 export default {
diff --git a/www/webapp/src/views/ResetPassword.vue b/www/webapp/src/views/ResetPassword.vue
index 969658a15..4052eb5b6 100644
--- a/www/webapp/src/views/ResetPassword.vue
+++ b/www/webapp/src/views/ResetPassword.vue
@@ -121,7 +121,7 @@
   import axios from 'axios';
   import {email_pattern} from '@/validation';
   import {digestError} from '@/utils';
-  import ErrorAlert from '@/components/ErrorAlert';
+  import ErrorAlert from '@/components/ErrorAlert.vue';
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
diff --git a/www/webapp/src/views/SignUp.vue b/www/webapp/src/views/SignUp.vue
index 4f9e6f56c..df63abc27 100644
--- a/www/webapp/src/views/SignUp.vue
+++ b/www/webapp/src/views/SignUp.vue
@@ -176,7 +176,7 @@
   import axios from 'axios';
   import {domain_pattern, email_pattern} from '@/validation';
   import {digestError} from '@/utils';
-  import ErrorAlert from "@/components/ErrorAlert";
+  import ErrorAlert from "@/components/ErrorAlert.vue";
 
   const LOCAL_PUBLIC_SUFFIXES = process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ');