diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 802e650..9ff591b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -50,6 +50,7 @@
         "sass": "~1.32.0",
         "sass-loader": "^11.1.1",
         "vue-cli-plugin-fontawesome": "^0.3.1",
+        "vue-template-babel-compiler": "^2.0.0",
         "vue-template-compiler": "^2.6.11"
       }
     },
@@ -15096,6 +15097,41 @@
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
+    "node_modules/vue-template-babel-compiler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vue-template-babel-compiler/-/vue-template-babel-compiler-2.0.0.tgz",
+      "integrity": "sha512-O0GOktQ5TZCZ5sWVl8CbyLBFriwwai7xDBtpdUI1xZSbbVVNf5Um/mDHYJXaHX6vfhmeAuohggXxIi0RPgXZ4g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.14.3",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+        "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
+        "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+        "@babel/plugin-transform-arrow-functions": "^7.14.5",
+        "@babel/plugin-transform-block-scoping": "^7.14.5",
+        "@babel/plugin-transform-computed-properties": "^7.14.5",
+        "@babel/plugin-transform-destructuring": "^7.14.5",
+        "@babel/plugin-transform-parameters": "^7.14.5",
+        "@babel/plugin-transform-spread": "^7.14.5",
+        "@babel/types": "^7.14.5",
+        "deepmerge": "^4.2.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "vue-template-compiler": "^2.6.0"
+      }
+    },
+    "node_modules/vue-template-babel-compiler/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
@@ -27827,6 +27863,34 @@
         }
       }
     },
+    "vue-template-babel-compiler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vue-template-babel-compiler/-/vue-template-babel-compiler-2.0.0.tgz",
+      "integrity": "sha512-O0GOktQ5TZCZ5sWVl8CbyLBFriwwai7xDBtpdUI1xZSbbVVNf5Um/mDHYJXaHX6vfhmeAuohggXxIi0RPgXZ4g==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.14.3",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+        "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
+        "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+        "@babel/plugin-transform-arrow-functions": "^7.14.5",
+        "@babel/plugin-transform-block-scoping": "^7.14.5",
+        "@babel/plugin-transform-computed-properties": "^7.14.5",
+        "@babel/plugin-transform-destructuring": "^7.14.5",
+        "@babel/plugin-transform-parameters": "^7.14.5",
+        "@babel/plugin-transform-spread": "^7.14.5",
+        "@babel/types": "^7.14.5",
+        "deepmerge": "^4.2.2"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+          "dev": true
+        }
+      }
+    },
     "vue-template-compiler": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 153a8df..23f1066 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,6 +48,7 @@
     "sass": "~1.32.0",
     "sass-loader": "^11.1.1",
     "vue-cli-plugin-fontawesome": "^0.3.1",
+    "vue-template-babel-compiler": "^2.0.0",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
new file mode 100644
index 0000000..cdef33f
--- /dev/null
+++ b/frontend/vue.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+    chainWebpack: config => {
+        config.module
+            .rule("vue")
+            .use("vue-loader")
+            .tap(options => {
+                options.compiler = require("vue-template-babel-compiler");
+                options.compilerOptions.whitespace = "preserve";
+                return options;
+            });
+    }
+};