diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
index e69de29bb..abe04df57 100644
--- a/frontend/jsconfig.json
+++ b/frontend/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index cce731518..31a9bac8e 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -12,7 +12,7 @@ import signUps from "./signUps";
 import groups from "./groups";
 import siteSettings from "./siteSettings";
 
-export default {
+export const api = {
   recipes: recipe,
   siteSettings: siteSettings,
   backups: backup,
diff --git a/frontend/src/api/upload.js b/frontend/src/api/upload.js
index 12a1c08c2..53918844b 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/Admin/AdminSidebar.vue b/frontend/src/components/Admin/AdminSidebar.vue
index fec699d86..5e719307b 100644
--- a/frontend/src/components/Admin/AdminSidebar.vue
+++ b/frontend/src/components/Admin/AdminSidebar.vue
@@ -106,7 +106,7 @@
 import { validators } from "@/mixins/validators";
 import { initials } from "@/mixins/initials";
 import { user } from "@/mixins/user";
-import api from "@/api";
+import { api } from "@/api";
 import axios from "axios";
 export default {
   mixins: [validators, initials, user],
diff --git a/frontend/src/components/Admin/Backup/AvailableBackupCard.vue b/frontend/src/components/Admin/Backup/AvailableBackupCard.vue
index 2f30e5823..499d2c4cd 100644
--- a/frontend/src/components/Admin/Backup/AvailableBackupCard.vue
+++ b/frontend/src/components/Admin/Backup/AvailableBackupCard.vue
@@ -39,7 +39,7 @@
 
 <script>
 import ImportDialog from "./ImportDialog";
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 export default {
   props: {
diff --git a/frontend/src/components/Admin/Backup/BackupCard.vue b/frontend/src/components/Admin/Backup/BackupCard.vue
index d0324ffa1..6f2daff50 100644
--- a/frontend/src/components/Admin/Backup/BackupCard.vue
+++ b/frontend/src/components/Admin/Backup/BackupCard.vue
@@ -38,7 +38,7 @@
 
 <script>
 import ImportDialog from "./ImportDialog";
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 export default {
   props: {
diff --git a/frontend/src/components/Admin/Backup/NewBackupCard.vue b/frontend/src/components/Admin/Backup/NewBackupCard.vue
index 1a51e77f3..56121ada0 100644
--- a/frontend/src/components/Admin/Backup/NewBackupCard.vue
+++ b/frontend/src/components/Admin/Backup/NewBackupCard.vue
@@ -43,7 +43,7 @@
 
 <script>
 import ImportOptions from "@/components/Admin/Backup/ImportOptions";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   components: { ImportOptions },
   data() {
diff --git a/frontend/src/components/Admin/General/CreatePageDialog.vue b/frontend/src/components/Admin/General/CreatePageDialog.vue
index a6eff9709..efedf8cf0 100644
--- a/frontend/src/components/Admin/General/CreatePageDialog.vue
+++ b/frontend/src/components/Admin/General/CreatePageDialog.vue
@@ -42,7 +42,7 @@
 
 <script>
 const NEW_PAGE_EVENT = "refresh-page";
-import api from "@/api";
+import { api } from "@/api";
 import CategorySelector from "@/components/FormHelpers/CategorySelector";
 export default {
   components: {
diff --git a/frontend/src/components/Admin/General/CustomPageCreator.vue b/frontend/src/components/Admin/General/CustomPageCreator.vue
index 7bd15dbb6..9a0ef8e23 100644
--- a/frontend/src/components/Admin/General/CustomPageCreator.vue
+++ b/frontend/src/components/Admin/General/CustomPageCreator.vue
@@ -64,7 +64,7 @@
 <script>
 import draggable from "vuedraggable";
 import CreatePageDialog from "@/components/Admin/General/CreatePageDialog";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   components: {
     draggable,
diff --git a/frontend/src/components/Admin/General/HomePageSettings.vue b/frontend/src/components/Admin/General/HomePageSettings.vue
index eeb956dc3..b4e11fda3 100644
--- a/frontend/src/components/Admin/General/HomePageSettings.vue
+++ b/frontend/src/components/Admin/General/HomePageSettings.vue
@@ -129,7 +129,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import LanguageMenu from "@/components/UI/LanguageMenu";
 import draggable from "vuedraggable";
 
diff --git a/frontend/src/components/Admin/ManageUsers/GroupCard.vue b/frontend/src/components/Admin/ManageUsers/GroupCard.vue
index 8c691f73a..57de547c8 100644
--- a/frontend/src/components/Admin/ManageUsers/GroupCard.vue
+++ b/frontend/src/components/Admin/ManageUsers/GroupCard.vue
@@ -3,7 +3,11 @@
     <Confirmation
       ref="deleteGroupConfirm"
       :title="$t('user.confirm-group-deletion')"
-      :message="$t('user.are-you-sure-you-want-to-delete-the-group', { groupName:group.name })"
+      :message="
+        $t('user.are-you-sure-you-want-to-delete-the-group', {
+          groupName: group.name,
+        })
+      "
       icon="mdi-alert"
       @confirm="deleteGroup"
       :width="450"
@@ -13,7 +17,9 @@
       <v-list dense>
         <v-card-title class="py-1">{{ group.name }}</v-card-title>
         <v-divider></v-divider>
-        <v-subheader>{{ $t('user.group-id-with-value', { groupID: group.id }) }}</v-subheader>
+        <v-subheader>{{
+          $t("user.group-id-with-value", { groupID: group.id })
+        }}</v-subheader>
         <v-list-item-group color="primary">
           <v-list-item v-for="property in groupProps" :key="property.text">
             <v-list-item-icon>
@@ -36,11 +42,11 @@
           @click="confirmDelete"
           :disabled="ableToDelete"
         >
-          {{ $t('general.delete') }}
+          {{ $t("general.delete") }}
         </v-btn>
         <!-- Coming Soon! -->
         <v-btn small color="success" disabled>
-          {{ $t('general.edit') }}
+          {{ $t("general.edit") }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -50,7 +56,7 @@
 <script>
 const RENDER_EVENT = "update";
 import Confirmation from "@/components/UI/Confirmation";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   components: { Confirmation },
   props: {
@@ -94,22 +100,24 @@ export default {
     buildData() {
       this.groupProps = [
         {
-          text: this.$t('user.total-users'),
+          text: this.$t("user.total-users"),
           icon: "mdi-account",
           value: this.group.users.length,
         },
         {
-          text: this.$t('user.total-mealplans'),
+          text: this.$t("user.total-mealplans"),
           icon: "mdi-food",
           value: this.group.mealplans.length,
         },
         {
-          text: this.$t('user.webhooks-enabled'),
+          text: this.$t("user.webhooks-enabled"),
           icon: "mdi-webhook",
-          value: this.group.webhookEnable ? this.$t('general.yes') : this.$t('general.no'),
+          value: this.group.webhookEnable
+            ? this.$t("general.yes")
+            : this.$t("general.no"),
         },
         {
-          text: this.$t('user.webhook-time'),
+          text: this.$t("user.webhook-time"),
           icon: "mdi-clock-outline",
           value: this.group.webhookTime,
         },
diff --git a/frontend/src/components/Admin/ManageUsers/GroupDashboard.vue b/frontend/src/components/Admin/ManageUsers/GroupDashboard.vue
index 238e48f83..86a5e8e3c 100644
--- a/frontend/src/components/Admin/ManageUsers/GroupDashboard.vue
+++ b/frontend/src/components/Admin/ManageUsers/GroupDashboard.vue
@@ -84,7 +84,7 @@
 
 <script>
 import { validators } from "@/mixins/validators";
-import api from "@/api";
+import { api } from "@/api";
 import GroupCard from "@/components/Admin/ManageUsers/GroupCard";
 export default {
   components: { GroupCard },
diff --git a/frontend/src/components/Admin/ManageUsers/TheSignUpTable.vue b/frontend/src/components/Admin/ManageUsers/TheSignUpTable.vue
index 36c1a93d9..61fcdda01 100644
--- a/frontend/src/components/Admin/ManageUsers/TheSignUpTable.vue
+++ b/frontend/src/components/Admin/ManageUsers/TheSignUpTable.vue
@@ -111,7 +111,7 @@
 
 <script>
 import Confirmation from "@/components/UI/Confirmation";
-import api from "@/api";
+import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
   components: { Confirmation },
diff --git a/frontend/src/components/Admin/ManageUsers/TheUserTable.vue b/frontend/src/components/Admin/ManageUsers/TheUserTable.vue
index 58b8dbbae..74a7444f6 100644
--- a/frontend/src/components/Admin/ManageUsers/TheUserTable.vue
+++ b/frontend/src/components/Admin/ManageUsers/TheUserTable.vue
@@ -145,7 +145,7 @@
 
 <script>
 import Confirmation from "@/components/UI/Confirmation";
-import api from "@/api";
+import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
   components: { Confirmation },
@@ -274,7 +274,7 @@ export default {
     },
     resetPassword() {
       console.log(this.activeId);
-      api.users.resetPassword(this.editedItem.id );
+      api.users.resetPassword(this.editedItem.id);
     },
   },
 };
diff --git a/frontend/src/components/Admin/Migration/MigrationCard.vue b/frontend/src/components/Admin/Migration/MigrationCard.vue
index be8618b55..7f3ef7ed4 100644
--- a/frontend/src/components/Admin/Migration/MigrationCard.vue
+++ b/frontend/src/components/Admin/Migration/MigrationCard.vue
@@ -60,7 +60,7 @@
 <script>
 import UploadBtn from "../../UI/UploadBtn";
 import utils from "@/utils";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   props: {
     folder: String,
diff --git a/frontend/src/components/Admin/Theme/ThemeCard.vue b/frontend/src/components/Admin/Theme/ThemeCard.vue
index 40d8fc475..8316e80ae 100644
--- a/frontend/src/components/Admin/Theme/ThemeCard.vue
+++ b/frontend/src/components/Admin/Theme/ThemeCard.vue
@@ -10,7 +10,10 @@
     />
     <v-card flat outlined class="ma-2">
       <v-card-text class="mb-n5 mt-n2">
-        <h3>{{ theme.name }} {{ current ? $t('general.current-parenthesis') : "" }}</h3>
+        <h3>
+          {{ theme.name }}
+          {{ current ? $t("general.current-parenthesis") : "" }}
+        </h3>
       </v-card-text>
       <v-card-text>
         <v-row flex align-center>
@@ -27,10 +30,14 @@
       </v-card-text>
       <v-divider></v-divider>
       <v-card-actions>
-        <v-btn text color="error" @click="confirmDelete"> {{$t('general.delete')}} </v-btn>
+        <v-btn text color="error" @click="confirmDelete">
+          {{ $t("general.delete") }}
+        </v-btn>
         <v-spacer></v-spacer>
         <!-- <v-btn text color="accent" @click="editTheme">Edit</v-btn> -->
-        <v-btn text color="success" @click="saveThemes">{{$t('general.apply')}}</v-btn>
+        <v-btn text color="success" @click="saveThemes">{{
+          $t("general.apply")
+        }}</v-btn>
       </v-card-actions>
     </v-card>
   </div>
@@ -38,7 +45,7 @@
 
 <script>
 import Confirmation from "@/components/UI/Confirmation";
-import api from "@/api";
+import { api } from "@/api";
 
 const DELETE_EVENT = "delete";
 const APPLY_EVENT = "apply";
diff --git a/frontend/src/components/Debug/LastRecipe.vue b/frontend/src/components/Debug/LastRecipe.vue
index caaad006e..c75c7376b 100644
--- a/frontend/src/components/Debug/LastRecipe.vue
+++ b/frontend/src/components/Debug/LastRecipe.vue
@@ -14,7 +14,7 @@
 
 <script>
 import VJsoneditor from "v-jsoneditor";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   components: { VJsoneditor },
   data() {
diff --git a/frontend/src/components/Login/LoginForm.vue b/frontend/src/components/Login/LoginForm.vue
index 2b8bcb3c0..b2cc18981 100644
--- a/frontend/src/components/Login/LoginForm.vue
+++ b/frontend/src/components/Login/LoginForm.vue
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 export default {
   props: {},
   data() {
diff --git a/frontend/src/components/Login/SignUpForm.vue b/frontend/src/components/Login/SignUpForm.vue
index 63b699f65..19ce3a64e 100644
--- a/frontend/src/components/Login/SignUpForm.vue
+++ b/frontend/src/components/Login/SignUpForm.vue
@@ -83,7 +83,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
   mixins: [validators],
diff --git a/frontend/src/components/MealPlan/MealPlanEditor.vue b/frontend/src/components/MealPlan/MealPlanEditor.vue
index fc2465444..9168dc556 100644
--- a/frontend/src/components/MealPlan/MealPlanEditor.vue
+++ b/frontend/src/components/MealPlan/MealPlanEditor.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 import MealPlanCard from "./MealPlanCard";
 export default {
diff --git a/frontend/src/components/MealPlan/MealPlanNew.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
index e2b07b133..fcb087892 100644
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/frontend/src/components/MealPlan/MealPlanNew.vue
@@ -83,7 +83,7 @@
 
 <script>
 const CREATE_EVENT = "created";
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 import MealPlanCard from "./MealPlanCard";
 export default {
diff --git a/frontend/src/components/MealPlan/ShoppingListDialog.vue b/frontend/src/components/MealPlan/ShoppingListDialog.vue
index 0af7f3d01..b92800d64 100644
--- a/frontend/src/components/MealPlan/ShoppingListDialog.vue
+++ b/frontend/src/components/MealPlan/ShoppingListDialog.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 const levenshtein = require("fast-levenshtein");
 export default {
   data() {
diff --git a/frontend/src/components/Recipe/EditorButtonRow.vue b/frontend/src/components/Recipe/EditorButtonRow.vue
index 7f350c4c1..1607518bc 100644
--- a/frontend/src/components/Recipe/EditorButtonRow.vue
+++ b/frontend/src/components/Recipe/EditorButtonRow.vue
@@ -21,7 +21,6 @@
           ref="deleteRecipieConfirm"
           v-on:confirm="deleteRecipe()"
         />
-
         <v-btn class="mr-2" fab dark small color="success" @click="save">
           <v-icon>mdi-content-save</v-icon>
         </v-btn>
@@ -37,7 +36,7 @@
 </template>
 
 <script>
-import Confirmation from "../../components/UI/Confirmation";
+import Confirmation from "../../components/UI/Confirmation.vue";
 
 export default {
   props: {
@@ -58,6 +57,7 @@ export default {
     save() {
       this.$emit("save");
     },
+
     deleteRecipeConfrim() {
       this.$refs.deleteRecipieConfirm.open();
     },
diff --git a/frontend/src/components/Recipe/RecipeEditor/index.vue b/frontend/src/components/Recipe/RecipeEditor/index.vue
index 9dab654e5..dfa368e6e 100644
--- a/frontend/src/components/Recipe/RecipeEditor/index.vue
+++ b/frontend/src/components/Recipe/RecipeEditor/index.vue
@@ -254,7 +254,7 @@
 
 <script>
 import draggable from "vuedraggable";
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 import BulkAdd from "./BulkAdd";
 import ExtrasEditor from "./ExtrasEditor";
diff --git a/frontend/src/components/UI/AddRecipeFab.vue b/frontend/src/components/UI/AddRecipeFab.vue
index 5799d8f0b..46c64b065 100644
--- a/frontend/src/components/UI/AddRecipeFab.vue
+++ b/frontend/src/components/UI/AddRecipeFab.vue
@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 
 export default {
   data() {
diff --git a/frontend/src/components/UI/CategorySidebar.vue b/frontend/src/components/UI/CategorySidebar.vue
index 390a03c56..301f85b8f 100644
--- a/frontend/src/components/UI/CategorySidebar.vue
+++ b/frontend/src/components/UI/CategorySidebar.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 export default {
   data() {
     return {
diff --git a/frontend/src/components/UI/UploadBtn.vue b/frontend/src/components/UI/UploadBtn.vue
index 2bf099894..e185db715 100644
--- a/frontend/src/components/UI/UploadBtn.vue
+++ b/frontend/src/components/UI/UploadBtn.vue
@@ -10,7 +10,7 @@
 
 <script>
 const UPLOAD_EVENT = "uploaded";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   props: {
     url: String,
diff --git a/frontend/src/pages/Admin/Backup/index.vue b/frontend/src/pages/Admin/Backup/index.vue
index 1e6163183..79a1974d5 100644
--- a/frontend/src/pages/Admin/Backup/index.vue
+++ b/frontend/src/pages/Admin/Backup/index.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
 import ImportSummaryDialog from "@/components/Admin/Backup/ImportSummaryDialog";
 import UploadBtn from "@/components/UI/UploadBtn";
diff --git a/frontend/src/pages/Admin/MealPlanner/index.vue b/frontend/src/pages/Admin/MealPlanner/index.vue
index d6245aa1a..a391bd6c5 100644
--- a/frontend/src/pages/Admin/MealPlanner/index.vue
+++ b/frontend/src/pages/Admin/MealPlanner/index.vue
@@ -108,7 +108,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import TimePickerDialog from "@/components/Admin/MealPlanner/TimePickerDialog";
 export default {
   components: {
diff --git a/frontend/src/pages/Admin/Migration/index.vue b/frontend/src/pages/Admin/Migration/index.vue
index 954f719ed..477fb8f6c 100644
--- a/frontend/src/pages/Admin/Migration/index.vue
+++ b/frontend/src/pages/Admin/Migration/index.vue
@@ -44,7 +44,7 @@
 <script>
 import MigrationCard from "@/components/Admin/Migration/MigrationCard";
 import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
-import api from "@/api";
+import { api } from "@/api";
 export default {
   components: {
     MigrationCard,
diff --git a/frontend/src/pages/Admin/Profile/index.vue b/frontend/src/pages/Admin/Profile/index.vue
index 485791830..5dccad9ba 100644
--- a/frontend/src/pages/Admin/Profile/index.vue
+++ b/frontend/src/pages/Admin/Profile/index.vue
@@ -13,9 +13,9 @@
             >
             </v-progress-circular>
           </span>
-          {{$t('settings.profile')}}
+          {{ $t("settings.profile") }}
           <v-spacer></v-spacer>
-          {{$t('user.user-id-with-value', {id: user.id }) }}
+          {{ $t("user.user-id-with-value", { id: user.id }) }}
         </v-card-title>
         <v-divider></v-divider>
         <v-card-text>
@@ -86,7 +86,7 @@
     <v-col cols="12" md="4" sm="12">
       <v-card height="100%">
         <v-card-title class="headline">
-          {{$t('user.reset-password')}}
+          {{ $t("user.reset-password") }}
           <v-spacer></v-spacer>
         </v-card-title>
         <v-divider></v-divider>
@@ -114,7 +114,8 @@
               prepend-icon="mdi-lock"
               :label="$t('user.confirm-password')"
               :rules="[
-                password.newOne === password.newTwo || $t('user.password-must-match'),
+                password.newOne === password.newTwo ||
+                  $t('user.password-must-match'),
               ]"
               validate-on-blur
               :type="showPassword ? 'text' : 'password'"
@@ -145,7 +146,7 @@
 <script>
 // import AvatarPicker from '@/components/AvatarPicker'
 import UploadBtn from "@/components/UI/UploadBtn";
-import api from "@/api";
+import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 import { initials } from "@/mixins/initials";
 export default {
diff --git a/frontend/src/pages/Admin/Theme/index.vue b/frontend/src/pages/Admin/Theme/index.vue
index 6129706b9..409113770 100644
--- a/frontend/src/pages/Admin/Theme/index.vue
+++ b/frontend/src/pages/Admin/Theme/index.vue
@@ -134,7 +134,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import ColorPickerDialog from "@/components/Admin/Theme/ColorPickerDialog";
 import NewThemeDialog from "@/components/Admin/Theme/NewThemeDialog";
 import ThemeCard from "@/components/Admin/Theme/ThemeCard";
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index 322c612d5..6f9a0f483 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 {
@@ -53,8 +53,8 @@ export default {
       await this.$store.dispatch("requestSiteSettings");
       this.siteSettings.categories.forEach(async element => {
         let recipes = await this.getRecipeByCategory(element.slug);
-        if (recipes.recipes.length < 0 ) recipes.recipes = []
-        console.log(recipes)
+        if (recipes.recipes.length < 0) recipes.recipes = [];
+        console.log(recipes);
         this.recipeByCategory.push(recipes);
       });
     },
diff --git a/frontend/src/pages/MealPlan/Planner.vue b/frontend/src/pages/MealPlan/Planner.vue
index 20a5c0ff1..57df248a3 100644
--- a/frontend/src/pages/MealPlan/Planner.vue
+++ b/frontend/src/pages/MealPlan/Planner.vue
@@ -85,7 +85,7 @@
 </template>
 
 <script>
-import api from "@/api";
+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/MealPlan/ThisWeek.vue b/frontend/src/pages/MealPlan/ThisWeek.vue
index 75e52b64f..a361ba0e1 100644
--- a/frontend/src/pages/MealPlan/ThisWeek.vue
+++ b/frontend/src/pages/MealPlan/ThisWeek.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 export default {
   data() {
diff --git a/frontend/src/pages/Recipe/NewRecipe.vue b/frontend/src/pages/Recipe/NewRecipe.vue
index 90fc328d3..a1d4dc722 100644
--- a/frontend/src/pages/Recipe/NewRecipe.vue
+++ b/frontend/src/pages/Recipe/NewRecipe.vue
@@ -41,7 +41,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/Recipe/ViewRecipe.vue b/frontend/src/pages/Recipe/ViewRecipe.vue
index c6a96c540..b93ad9d19 100644
--- a/frontend/src/pages/Recipe/ViewRecipe.vue
+++ b/frontend/src/pages/Recipe/ViewRecipe.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import api from "@/api";
+import { api } from "@/api";
 import utils from "@/utils";
 import VJsoneditor from "v-jsoneditor";
 import RecipeViewer from "@/components/Recipe/RecipeViewer";
diff --git a/frontend/src/pages/Recipes/CategoryPage.vue b/frontend/src/pages/Recipes/CategoryPage.vue
index e89213ec5..34514a455 100644
--- a/frontend/src/pages/Recipes/CategoryPage.vue
+++ b/frontend/src/pages/Recipes/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/Recipes/CustomPage.vue b/frontend/src/pages/Recipes/CustomPage.vue
index 45fe6993a..a022ee9de 100644
--- a/frontend/src/pages/Recipes/CustomPage.vue
+++ b/frontend/src/pages/Recipes/CustomPage.vue
@@ -33,7 +33,7 @@
 <script>
 import CardSection from "@/components/UI/CardSection";
 import CategorySidebar from "@/components/UI/CategorySidebar";
-import api from "@/api";
+import { api } from "@/api";
 
 export default {
   components: {
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index 73cd7bcfb..cca7aa276 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -11,7 +11,7 @@ import Debug from "@/pages/Debug";
 import LoginPage from "@/pages/LoginPage";
 import SignUpPage from "@/pages/SignUpPage";
 import ThisWeek from "@/pages/MealPlan/ThisWeek";
-import api from "@/api";
+import { api } from "@/api";
 import Admin from "./admin";
 import { store } from "../store";
 
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 3ee9a449a..d84455d43 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.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";
diff --git a/frontend/src/store/modules/groups.js b/frontend/src/store/modules/groups.js
index 59fdeac44..03e66fc80 100644
--- a/frontend/src/store/modules/groups.js
+++ b/frontend/src/store/modules/groups.js
@@ -1,4 +1,4 @@
-import api from "@/api";
+import { api } from "@/api";
 
 const state = {
   groups: [],
diff --git a/frontend/src/store/modules/homePage.js b/frontend/src/store/modules/homePage.js
index 855c5205e..c7b2112b4 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,
diff --git a/frontend/src/store/modules/siteSettings.js b/frontend/src/store/modules/siteSettings.js
index 1495b4c72..f521f4eb5 100644
--- a/frontend/src/store/modules/siteSettings.js
+++ b/frontend/src/store/modules/siteSettings.js
@@ -1,4 +1,4 @@
-import api from "@/api";
+import { api } from "@/api";
 
 const state = {
   siteSettings: {
diff --git a/frontend/src/store/modules/userSettings.js b/frontend/src/store/modules/userSettings.js
index 551d82032..46bd75aa2 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";
 import axios from "axios";