diff --git a/frontend/src/api.js b/frontend/src/api.js
index eafe13005..3c6c04c0c 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -8,7 +8,7 @@ import myUtils from "./api/upload";
 import category from "./api/category";
 import meta from "./api/meta";
 
-// import api from "../api";
+// import api from "@/api";
 
 export default {
   recipes: recipe,
diff --git a/frontend/src/api/api-utils.js b/frontend/src/api/api-utils.js
index bdfc511cf..c1ef8f9a8 100644
--- a/frontend/src/api/api-utils.js
+++ b/frontend/src/api/api-utils.js
@@ -1,6 +1,6 @@
 const baseURL = "/api/";
 import axios from "axios";
-import utils from "../utils";
+import utils from "@/utils";
 
 function processResponse(response) {
   try {
diff --git a/frontend/src/api/upload.js b/frontend/src/api/upload.js
index 1c7655185..12a1c08c2 100644
--- a/frontend/src/api/upload.js
+++ b/frontend/src/api/upload.js
@@ -1,7 +1,7 @@
 import { apiReq } from "./api-utils";
 
 export default {
-  // import api from "../api";
+  // import api from "@/api";
   async uploadFile(url, fileObject) {
     let response = await apiReq.post(url, fileObject, {
       headers: {
diff --git a/frontend/src/components/MealPlan/MealPlanCard.vue b/frontend/src/components/MealPlan/MealPlanCard.vue
index 2eb11a595..b5c176638 100644
--- a/frontend/src/components/MealPlan/MealPlanCard.vue
+++ b/frontend/src/components/MealPlan/MealPlanCard.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import utils from "../../utils";
+import utils from "@/utils";
 import SearchDialog from "../UI/SearchDialog";
 export default {
   components: {
diff --git a/frontend/src/components/MealPlan/MealPlanEditor.vue b/frontend/src/components/MealPlan/MealPlanEditor.vue
index 01b5ef086..fc2465444 100644
--- a/frontend/src/components/MealPlan/MealPlanEditor.vue
+++ b/frontend/src/components/MealPlan/MealPlanEditor.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import api from "../../api";
-import utils from "../../utils";
+import api from "@/api";
+import utils from "@/utils";
 import MealPlanCard from "./MealPlanCard";
 export default {
   components: {
diff --git a/frontend/src/components/MealPlan/MealPlanNew.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
index a86657058..af16cd9bb 100644
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/frontend/src/components/MealPlan/MealPlanNew.vue
@@ -85,8 +85,8 @@
 </template>
 
 <script>
-import api from "../../api";
-import utils from "../../utils";
+import api from "@/api";
+import utils from "@/utils";
 import MealPlanCard from "./MealPlanCard";
 export default {
   components: {
diff --git a/frontend/src/components/Recipe/RecipeEditor/index.vue b/frontend/src/components/Recipe/RecipeEditor/index.vue
index 8e56bd64e..b4835ff29 100644
--- a/frontend/src/components/Recipe/RecipeEditor/index.vue
+++ b/frontend/src/components/Recipe/RecipeEditor/index.vue
@@ -254,8 +254,8 @@
 
 <script>
 import draggable from "vuedraggable";
-import api from "../../../api";
-import utils from "../../../utils";
+import api from "@/api";
+import utils from "@/utils";
 import BulkAdd from "./BulkAdd";
 import ExtrasEditor from "./ExtrasEditor";
 export default {
diff --git a/frontend/src/components/Recipe/RecipePrint.vue b/frontend/src/components/Recipe/RecipePrint.vue
index 6d742aa59..f287532c8 100644
--- a/frontend/src/components/Recipe/RecipePrint.vue
+++ b/frontend/src/components/Recipe/RecipePrint.vue
@@ -161,7 +161,7 @@
 </template>
 
 <script>
-import utils from "../../utils";
+import utils from "@/utils";
 
 export default {
   props: {
diff --git a/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue b/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
index ee758b6bc..70a8c798c 100644
--- a/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
+++ b/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
@@ -17,10 +17,10 @@
 </template>
 
 <script>
-import utils from "@/utils"
+import utils from "@/utils";
 export default {
   props: {
-      ingredients: Array
+    ingredients: Array,
   },
   methods: {
     generateKey(item, index) {
diff --git a/frontend/src/components/Settings/Backup/AvailableBackupCard.vue b/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
index 67b83aa51..7254e5808 100644
--- a/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
+++ b/frontend/src/components/Settings/Backup/AvailableBackupCard.vue
@@ -38,8 +38,8 @@
 
 <script>
 import ImportDialog from "./ImportDialog";
-import api from "../../../api";
-import utils from "../../../utils";
+import api from "@/api";
+import utils from "@/utils";
 export default {
   props: {
     backups: Array,
diff --git a/frontend/src/components/Settings/Backup/BackupCard.vue b/frontend/src/components/Settings/Backup/BackupCard.vue
index c89d6915f..d0324ffa1 100644
--- a/frontend/src/components/Settings/Backup/BackupCard.vue
+++ b/frontend/src/components/Settings/Backup/BackupCard.vue
@@ -38,8 +38,8 @@
 
 <script>
 import ImportDialog from "./ImportDialog";
-import api from "../../../api";
-import utils from "../../../utils";
+import api from "@/api";
+import utils from "@/utils";
 export default {
   props: {
     backups: Array,
diff --git a/frontend/src/components/Settings/Backup/NewBackupCard.vue b/frontend/src/components/Settings/Backup/NewBackupCard.vue
index 751f1a7e5..f87d4dca1 100644
--- a/frontend/src/components/Settings/Backup/NewBackupCard.vue
+++ b/frontend/src/components/Settings/Backup/NewBackupCard.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import api from "../../../api";
+import api from "@/api";
 export default {
   data() {
     return {
@@ -84,7 +84,7 @@ export default {
   methods: {
     async getAvailableBackups() {
       let response = await api.backups.requestAvailable();
-      response.templates.forEach((element) => {
+      response.templates.forEach(element => {
         this.availableTemplates.push(element);
       });
     },
@@ -101,7 +101,6 @@ export default {
         templates: this.selectedTemplates,
       };
 
-
       await api.backups.create(data);
       this.loading = false;
 
diff --git a/frontend/src/components/Settings/Backup/index.vue b/frontend/src/components/Settings/Backup/index.vue
index 2db3f9681..d019a0b65 100644
--- a/frontend/src/components/Settings/Backup/index.vue
+++ b/frontend/src/components/Settings/Backup/index.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import api from "../../../api";
+import api from "@/api";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
 import UploadBtn from "../../UI/UploadBtn";
 import AvailableBackupCard from "./AvailableBackupCard";
diff --git a/frontend/src/components/Settings/General/HomePageSettings.vue b/frontend/src/components/Settings/General/HomePageSettings.vue
index 4fbf24f59..e80c2610c 100644
--- a/frontend/src/components/Settings/General/HomePageSettings.vue
+++ b/frontend/src/components/Settings/General/HomePageSettings.vue
@@ -126,7 +126,7 @@
 </template>
 
 <script>
-import api from "../../../api";
+import api from "@/api";
 import draggable from "vuedraggable";
 
 export default {
diff --git a/frontend/src/components/Settings/Migration/MigrationCard.vue b/frontend/src/components/Settings/Migration/MigrationCard.vue
index e366900e0..cef1020db 100644
--- a/frontend/src/components/Settings/Migration/MigrationCard.vue
+++ b/frontend/src/components/Settings/Migration/MigrationCard.vue
@@ -56,8 +56,8 @@
 
 <script>
 import UploadBtn from "../../UI/UploadBtn";
-import utils from "../../../utils";
-import api from "../../../api";
+import utils from "@/utils";
+import api from "@/api";
 export default {
   props: {
     folder: String,
diff --git a/frontend/src/components/Settings/Migration/index.vue b/frontend/src/components/Settings/Migration/index.vue
index f8cde97f8..e669c057b 100644
--- a/frontend/src/components/Settings/Migration/index.vue
+++ b/frontend/src/components/Settings/Migration/index.vue
@@ -41,7 +41,7 @@
 <script>
 import MigrationCard from "./MigrationCard";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
-import api from "../../../api";
+import api from "@/api";
 export default {
   components: {
     MigrationCard,
@@ -78,7 +78,7 @@ export default {
     },
     async getAvailableMigrations() {
       let response = await api.migrations.getMigrations();
-      response.forEach((element) => {
+      response.forEach(element => {
         if (element.type === "nextcloud") {
           this.migrations.nextcloud.availableImports = element.files;
         } else if (element.type === "chowdown") {
diff --git a/frontend/src/components/Settings/Theme/index.vue b/frontend/src/components/Settings/Theme/index.vue
index 6819dc97b..101a08dd5 100644
--- a/frontend/src/components/Settings/Theme/index.vue
+++ b/frontend/src/components/Settings/Theme/index.vue
@@ -53,7 +53,7 @@
               return-object
               v-model="selectedTheme"
               @change="themeSelected"
-              :rules="[(v) => !!v || $t('settings.theme.theme-is-required')]"
+              :rules="[v => !!v || $t('settings.theme.theme-is-required')]"
               required
             >
             </v-select>
@@ -136,7 +136,7 @@
 </template>
 
 <script>
-import api from "../../../api";
+import api from "@/api";
 import ColorPickerDialog from "./ColorPickerDialog";
 import NewThemeDialog from "./NewThemeDialog";
 import Confirmation from "../../UI/Confirmation";
@@ -186,7 +186,7 @@ export default {
       //Change to default if deleting current theme.
       if (
         !this.availableThemes.some(
-          (theme) => theme.name === this.selectedTheme.name
+          theme => theme.name === this.selectedTheme.name
         )
       ) {
         await this.$store.dispatch("resetTheme");
diff --git a/frontend/src/components/Settings/Webhook/index.vue b/frontend/src/components/Settings/Webhook/index.vue
index 5d37ce198..261c6a794 100644
--- a/frontend/src/components/Settings/Webhook/index.vue
+++ b/frontend/src/components/Settings/Webhook/index.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script>
-import api from "../../../api";
+import api from "@/api";
 import TimePickerDialog from "./TimePickerDialog";
 export default {
   components: {
diff --git a/frontend/src/components/UI/AddRecipeFab.vue b/frontend/src/components/UI/AddRecipeFab.vue
index 4247f1051..0a5230fec 100644
--- a/frontend/src/components/UI/AddRecipeFab.vue
+++ b/frontend/src/components/UI/AddRecipeFab.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import api from "../../api";
+import api from "@/api";
 
 export default {
   data() {
diff --git a/frontend/src/components/UI/Login.vue b/frontend/src/components/UI/Login.vue
index 00d19b66a..91a33ff51 100644
--- a/frontend/src/components/UI/Login.vue
+++ b/frontend/src/components/UI/Login.vue
@@ -44,14 +44,14 @@
                 color="primary"
                 block="block"
                 type="submit"
-                >{{$t('login.sign-in')}}</v-btn
+                >{{ $t("login.sign-in") }}</v-btn
               >
               <v-btn
                 v-else
                 block="block"
                 type="submit"
                 @click.prevent="options.isLoggingIn = true"
-                >{{$t('login.sign-up')}}</v-btn
+                >{{ $t("login.sign-up") }}</v-btn
               >
             </v-form>
           </v-card-text>
@@ -72,7 +72,7 @@
 </template>
 
 <script>
-import api from "../../api";
+import api from "@/api";
 export default {
   props: {},
   data() {
diff --git a/frontend/src/components/UI/RecipeCard.vue b/frontend/src/components/UI/RecipeCard.vue
index 8b24594f0..5bf3ffb6a 100644
--- a/frontend/src/components/UI/RecipeCard.vue
+++ b/frontend/src/components/UI/RecipeCard.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import utils from "../../utils";
+import utils from "@/utils";
 export default {
   props: {
     name: String,
diff --git a/frontend/src/components/UI/SearchBar.vue b/frontend/src/components/UI/SearchBar.vue
index b1a93c30d..0ddc4e8f7 100644
--- a/frontend/src/components/UI/SearchBar.vue
+++ b/frontend/src/components/UI/SearchBar.vue
@@ -45,7 +45,7 @@
 
 <script>
 import Fuse from "fuse.js";
-import utils from "../../utils";
+import utils from "@/utils";
 
 export default {
   props: {
diff --git a/frontend/src/components/UI/UploadBtn.vue b/frontend/src/components/UI/UploadBtn.vue
index 1ada19a7d..7f1caeeb5 100644
--- a/frontend/src/components/UI/UploadBtn.vue
+++ b/frontend/src/components/UI/UploadBtn.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import api from "../../api";
+import api from "@/api";
 export default {
   props: {
     url: String,
diff --git a/frontend/src/pages/CategoryPage.vue b/frontend/src/pages/CategoryPage.vue
index 812cc06b4..7b1c50456 100644
--- a/frontend/src/pages/CategoryPage.vue
+++ b/frontend/src/pages/CategoryPage.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import api from "../api";
+import api from "@/api";
 import CardSection from "../components/UI/CardSection";
 import CategorySidebar from "../components/UI/CategorySidebar";
 export default {
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index 64e6cbc96..3b14ac1a5 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import api from "../api";
+import api from "@/api";
 import CardSection from "../components/UI/CardSection";
 import CategorySidebar from "../components/UI/CategorySidebar";
 export default {
@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     async buildPage() {
-      this.homeCategories.forEach(async (element) => {
+      this.homeCategories.forEach(async element => {
         let recipes = await this.getRecipeByCategory(element.slug);
         recipes.position = element.position;
         this.recipeByCategory.push(recipes);
diff --git a/frontend/src/pages/MealPlanPage.vue b/frontend/src/pages/MealPlanPage.vue
index 09326d2ad..61fa643d0 100644
--- a/frontend/src/pages/MealPlanPage.vue
+++ b/frontend/src/pages/MealPlanPage.vue
@@ -74,8 +74,8 @@
 </template>
 
 <script>
-import api from "../api";
-import utils from "../utils";
+import api from "@/api";
+import utils from "@/utils";
 import NewMeal from "../components/MealPlan/MealPlanNew";
 import EditPlan from "../components/MealPlan/MealPlanEditor";
 
diff --git a/frontend/src/pages/MealPlanThisWeekPage.vue b/frontend/src/pages/MealPlanThisWeekPage.vue
index 19e168ed3..c61cfa232 100644
--- a/frontend/src/pages/MealPlanThisWeekPage.vue
+++ b/frontend/src/pages/MealPlanThisWeekPage.vue
@@ -49,8 +49,8 @@
 </template>
 
 <script>
-import api from "../api";
-import utils from "../utils";
+import api from "@/api";
+import utils from "@/utils";
 export default {
   data() {
     return {
diff --git a/frontend/src/pages/RecipeNewPage.vue b/frontend/src/pages/RecipeNewPage.vue
index 30a787594..d841fe77b 100644
--- a/frontend/src/pages/RecipeNewPage.vue
+++ b/frontend/src/pages/RecipeNewPage.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import api from "../api";
+import api from "@/api";
 
 import RecipeEditor from "../components/Recipe/RecipeEditor";
 import VJsoneditor from "v-jsoneditor";
diff --git a/frontend/src/pages/RecipePage.vue b/frontend/src/pages/RecipePage.vue
index 05b8f96b1..997af81a8 100644
--- a/frontend/src/pages/RecipePage.vue
+++ b/frontend/src/pages/RecipePage.vue
@@ -56,8 +56,8 @@
 </template>
 
 <script>
-import api from "../api";
-import utils from "../utils";
+import api from "@/api";
+import utils from "@/utils";
 import VJsoneditor from "v-jsoneditor";
 import RecipeViewer from "../components/Recipe/RecipeViewer";
 import RecipeEditor from "../components/Recipe/RecipeEditor";
@@ -107,7 +107,7 @@ export default {
   },
 
   watch: {
-    $route: function () {
+    $route: function() {
       this.getRecipeDetails();
     },
   },
diff --git a/frontend/src/pages/SettingsPage.vue b/frontend/src/pages/SettingsPage.vue
index 9b3f8b732..f49012e8c 100644
--- a/frontend/src/pages/SettingsPage.vue
+++ b/frontend/src/pages/SettingsPage.vue
@@ -44,7 +44,7 @@ import General from "../components/Settings/General";
 import Webhooks from "../components/Settings/Webhook";
 import Theme from "../components/Settings/Theme";
 import Migration from "../components/Settings/Migration";
-import api from "../api";
+import api from "@/api";
 import axios from "axios";
 
 export default {
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 0fac0e53b..e3790a4c0 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -8,7 +8,7 @@ import AllRecipesPage from "./pages/AllRecipesPage";
 import CategoryPage from "./pages/CategoryPage";
 import MeaplPlanPage from "./pages/MealPlanPage";
 import MealPlanThisWeekPage from "./pages/MealPlanThisWeekPage";
-import api from "./api";
+import api from "@/api";
 
 export const routes = [
   { path: "/", component: HomePage },
@@ -24,7 +24,7 @@ export const routes = [
   {
     path: "/meal-plan/today",
     beforeEnter: async (_to, _from, next) => {
-      await todaysMealRoute().then((redirect) => {
+      await todaysMealRoute().then(redirect => {
         next(redirect);
       });
     },
diff --git a/frontend/src/store/modules/homePage.js b/frontend/src/store/modules/homePage.js
index 731f47e57..647888ab1 100644
--- a/frontend/src/store/modules/homePage.js
+++ b/frontend/src/store/modules/homePage.js
@@ -1,4 +1,4 @@
-import api from "../../api";
+import api from "@/api";
 
 const state = {
   showRecent: true,
@@ -30,10 +30,10 @@ const actions = {
 };
 
 const getters = {
-  getShowRecent: (state) => state.showRecent,
-  getShowLimit: (state) => state.showLimit,
-  getCategories: (state) => state.categories,
-  getHomeCategories: (state) => state.homeCategories,
+  getShowRecent: state => state.showRecent,
+  getShowLimit: state => state.showLimit,
+  getCategories: state => state.categories,
+  getHomeCategories: state => state.homeCategories,
 };
 
 export default {
diff --git a/frontend/src/store/modules/userSettings.js b/frontend/src/store/modules/userSettings.js
index 53b95d26a..2908837fc 100644
--- a/frontend/src/store/modules/userSettings.js
+++ b/frontend/src/store/modules/userSettings.js
@@ -1,4 +1,4 @@
-import api from "../../api";
+import api from "@/api";
 import Vuetify from "../../plugins/vuetify";
 
 function inDarkMode(payload) {
@@ -60,9 +60,9 @@ const actions = {
 };
 
 const getters = {
-  getActiveTheme: (state) => state.activeTheme,
-  getDarkMode: (state) => state.darkMode,
-  getIsDark: (state) => state.isDark,
+  getActiveTheme: state => state.activeTheme,
+  getDarkMode: state => state.darkMode,
+  getIsDark: state => state.isDark,
 };
 
 export default {
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index 52b5a602a..769fe2fc0 100644
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import api from "../api";
+import api from "@/api";
 import createPersistedState from "vuex-persistedstate";
 import userSettings from "./modules/userSettings";
 import language from "./modules/language";
@@ -64,11 +64,11 @@ const store = new Vuex.Store({
 
   getters: {
     //
-    getSnackText: (state) => state.snackText,
-    getSnackActive: (state) => state.snackActive,
-    getSnackType: (state) => state.snackType,
+    getSnackText: state => state.snackText,
+    getSnackActive: state => state.snackActive,
+    getSnackType: state => state.snackType,
 
-    getRecentRecipes: (state) => state.recentRecipes,
+    getRecentRecipes: state => state.recentRecipes,
   },
 });
 
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index fba99dc50..ed62aabbc 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -1,4 +1,4 @@
-// import utils from "../../utils";
+// import utils from "@/utils";
 // import Vue from "vue";
 // import Vuetify from "./plugins/vuetify";
 import { vueApp } from "./main";