change imports to use @/ for imports

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,

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 {

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: {

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: {

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: {

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: {

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 {

frontend/src/components/Recipe/RecipePrint.vue

@@ -161,7 +161,7 @@
 </template>
 
 <script>
-import utils from "../../utils";
+import utils from "@/utils";
 
 export default {
   props: {

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) {

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,

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,

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;
 

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";

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 {

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,

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") {

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");

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: {

frontend/src/components/UI/AddRecipeFab.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import api from "../../api";
+import api from "@/api";
 
 export default {
   data() {

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() {

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,

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: {

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,

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 {

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);

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";
 

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 {

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";

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();
     },
   },

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 {

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);
       });
     },

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 {

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 {

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,
   },
 });
 

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";