diff --git a/.eslintrc.yml b/.eslintrc.yml
index 7a5c6a7db..5a811b3c4 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -18,3 +18,9 @@ rules:
     no-plusplus:
         - error
         - allowForLoopAfterthoughts: true
+
+settings:
+    "import/resolver":
+        alias:
+            map:
+                - ["cookbook", "./src"]
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e15bb1e12..7fa65088e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,8 @@
   [#1051](https://github.com/nextcloud/cookbook/pull/1051) @christianlupus
 - Add the url as a parameter to allow for specialized parsers per website in the backend
   [#1060](https://github.com/nextcloud/cookbook/pull/1060) @christianlupus
+- Create wrapper in frontend for all API requests
+  [#1061](https://github.com/nextcloud/cookbook/pull/1061) @christianlupus
 
 ### Codebase maintenance
 - Removed codecov.io upload of intermediate merge commits during pull requests
diff --git a/cookbook.code-workspace b/cookbook.code-workspace
index 150020e5c..c2955098a 100644
--- a/cookbook.code-workspace
+++ b/cookbook.code-workspace
@@ -28,7 +28,7 @@
 			".github/actions/run-tests/volumes/nextcloud/custom_apps/cookbook/**/*": true,
 			".github/actions/run-tests/volumes/nextcloud/**/*": true
 		},
-		"intelephense.trace.server": "message",
+		//"intelephense.trace.server": "message",
 		"intelephense.files.exclude": [
 			"**/.git/**",
 			"**/.svn/**",
@@ -44,6 +44,9 @@
 		],
 		"cSpell.words": [
 			"Nextcloud"
-		]
+		],
+		"path-intellisense.mappings": {
+			"cookbook": "${workspaceFolder}/src",
+		}
 	}
 }
diff --git a/package-lock.json b/package-lock.json
index 594dd4895..ebede79a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "eslint": "^8.2.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-prettier": "^8.0.0",
+        "eslint-import-resolver-alias": "^1.1.2",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-vue": "^9.0.1",
         "prettier": "^2.2.1",
@@ -3876,6 +3877,18 @@
         "eslint": ">=7.0.0"
       }
     },
+    "node_modules/eslint-import-resolver-alias": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz",
+      "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      },
+      "peerDependencies": {
+        "eslint-plugin-import": ">=1.4.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
@@ -15217,6 +15230,13 @@
       "dev": true,
       "requires": {}
     },
+    "eslint-import-resolver-alias": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz",
+      "integrity": "sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-import-resolver-node": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
diff --git a/package.json b/package.json
index 407667524..698237d7c 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,8 @@
     "build": "npx webpack --node-env production --progress --config webpack.config.js",
     "build-dev": "npx webpack --node-env development --progress --config webpack.config.js",
     "dev": "npx webpack --node-env development --progress --watch --config webpack.devel.js",
-    "eslint": "npx eslint --cache --cache-strategy content src/**/*.{vue,js}",
-    "eslint-fix": "npx eslint --cache --cache-strategy content --fix src/**/*.{vue,js}",
+    "eslint": "npx eslint --cache --cache-strategy content 'src/**/*.{vue,js}'",
+    "eslint-fix": "npx eslint --cache --cache-strategy content --fix 'src/**/*.{vue,js}'",
     "package-lint": "npx prettier-package-json --write ./package.json",
     "serve": "npx webpack serve --node-env development --progress --config webpack.config.js --env dev_server",
     "stylelint": "npx stylelint src",
@@ -50,6 +50,7 @@
     "eslint": "^8.2.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.0.0",
+    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^9.0.1",
     "prettier": "^2.2.1",
diff --git a/src/components/AppIndex.vue b/src/components/AppIndex.vue
index 2d52fc8e2..310295b09 100644
--- a/src/components/AppIndex.vue
+++ b/src/components/AppIndex.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
+import api from "cookbook/js/api-interface"
 
 import RecipeList from "./RecipeList.vue"
 
@@ -46,8 +46,8 @@ export default {
          */
         loadAll() {
             const $this = this
-            axios
-                .get(`${this.$window.baseUrl}/api/recipes`)
+            api.recipes
+                .getAll()
                 .then((response) => {
                     $this.recipes = response.data
 
diff --git a/src/components/AppNavi.vue b/src/components/AppNavi.vue
index d62caef2b..8bdd01131 100644
--- a/src/components/AppNavi.vue
+++ b/src/components/AppNavi.vue
@@ -108,7 +108,6 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
 import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
 import ActionInput from "@nextcloud/vue/dist/Components/ActionInput"
 import AppNavigation from "@nextcloud/vue/dist/Components/AppNavigation"
@@ -116,6 +115,7 @@ import AppNavigationCounter from "@nextcloud/vue/dist/Components/AppNavigationCo
 import AppNavigationItem from "@nextcloud/vue/dist/Components/AppNavigationItem"
 import AppNavigationNew from "@nextcloud/vue/dist/Components/AppNavigationNew"
 import Vue from "vue"
+import api from "cookbook/js/api-interface"
 import AppSettings from "./AppSettings.vue"
 import AppNavigationCaption from "./AppNavigationCaption.vue"
 
@@ -193,8 +193,8 @@ export default {
             const $this = this
             Vue.set(this.isCategoryUpdating, idx, true)
 
-            axios
-                .get(`${this.$window.baseUrl}/api/category/${cat.name}`)
+            api.recipes
+                .allInCategory(cat.name)
                 .then((response) => {
                     cat.recipes = response.data
                 })
@@ -264,11 +264,8 @@ export default {
         downloadRecipe(e) {
             this.downloading = true
             const $this = this
-            axios({
-                url: `${this.$window.baseUrl}/import`,
-                method: "POST",
-                data: `url=${e.target[1].value}`,
-            })
+            api.recipes
+                .import(e.target[1].value)
                 .then((response) => {
                     const recipe = response.data
                     $this.downloading = false
@@ -322,8 +319,8 @@ export default {
         getCategories() {
             const $this = this
             this.loading.categories = true
-            axios
-                .get(`${this.$window.baseUrl}/categories`)
+            api.categories
+                .getAll()
                 .then((response) => {
                     const json = response.data || []
                     // Reset the old values
@@ -400,20 +397,19 @@ export default {
                 return
             }
             this.scanningLibrary = true
-            axios({
-                url: `${this.$window.baseUrl}/reindex`,
-                method: "POST",
-            })
+            api.recipes
+                .reindex()
                 .then(() => {
                     $this.scanningLibrary = false
                     // eslint-disable-next-line no-console
                     console.log("Library reindexing complete")
-                    $this.getCategories()
                     if (
                         ["index", "search"].indexOf(this.$store.state.page) > -1
                     ) {
                         // This refreshes the current router view in case items in it changed during reindex
                         $this.$router.go()
+                    } else {
+                        $this.getCategories()
                     }
                 })
                 .catch(() => {
diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
index 0d4595170..fb5badf99 100644
--- a/src/components/AppSettings.vue
+++ b/src/components/AppSettings.vue
@@ -69,10 +69,11 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
 import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
 import AppNavigationSettings from "@nextcloud/vue/dist/Components/AppNavigationSettings"
 
+import api from "cookbook/js/api-interface"
+
 export default {
     name: "AppSettings",
     components: {
@@ -105,11 +106,8 @@ export default {
                 this.resetPrintImage = false
                 return
             }
-            axios({
-                url: `${this.$window.baseUrl}/config`,
-                method: "POST",
-                data: { print_image: newVal ? 1 : 0 },
-            })
+            api.config.printImage
+                .update(newVal)
                 .then(() => {
                     // Should this check the response of the query? To catch some errors that redirect the page
                 })
@@ -135,11 +133,8 @@ export default {
                 this.resetInterval = false
                 return
             }
-            axios({
-                url: `${this.$window.baseUrl}/config`,
-                method: "POST",
-                data: { update_interval: newVal },
-            })
+            api.config.updateInterval
+                .update(newVal)
                 .then(() => {
                     // Should this check the response of the query? To catch some errors that redirect the page
                 })
@@ -200,11 +195,8 @@ export default {
          * Initial setup
          */
         setup() {
-            axios({
-                url: `${this.$window.baseUrl}/config`,
-                method: "GET",
-                data: null,
-            })
+            api.config
+                .get()
                 .then((response) => {
                     const config = response.data
                     this.resetPrintImage = false
diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue
index ae75604b6..a9e2fe5f4 100644
--- a/src/components/RecipeEdit.vue
+++ b/src/components/RecipeEdit.vue
@@ -116,8 +116,10 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
 import Vue from "vue"
+
+import api from "cookbook/js/api-interface"
+
 import EditImageField from "./EditImageField.vue"
 import EditInputField from "./EditInputField.vue"
 import EditInputGroup from "./EditInputGroup.vue"
@@ -415,8 +417,8 @@ export default {
         this.savingRecipe = false
 
         // Load data for all recipes to be used in recipe-reference popup suggestions
-        axios
-            .get(`${this.$window.baseUrl}/api/recipes`)
+        api.recipes
+            .getAll()
             .then((response) => {
                 $this.allRecipes = response.data
             })
@@ -482,8 +484,8 @@ export default {
          */
         fetchCategories() {
             const $this = this
-            axios
-                .get(`${this.$window.baseUrl}/categories`)
+            api.categories
+                .getAll()
                 .then((response) => {
                     const json = response.data || []
                     $this.allCategories = []
@@ -507,8 +509,8 @@ export default {
          */
         fetchKeywords() {
             const $this = this
-            axios
-                .get(`${this.$window.baseUrl}/keywords`)
+            api.keywords
+                .getAll()
                 .then((response) => {
                     const json = response.data || []
                     if (json) {
@@ -545,10 +547,8 @@ export default {
                 })
             }
             const $this = this
-            axios
-                .get(
-                    `${this.$window.baseUrl}/api/recipes/${this.$route.params.id}`
-                )
+            api.recipes
+                .get(this.$route.params.id)
                 .then((response) => {
                     const recipe = response.data
                     $this.$store.dispatch("setRecipe", { recipe })
diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue
index c99b520fa..54948d68f 100644
--- a/src/components/RecipeView.vue
+++ b/src/components/RecipeView.vue
@@ -268,9 +268,10 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
 import moment from "@nextcloud/moment"
 
+import api from "cookbook/js/api-interface"
+
 import RecipeImages from "./RecipeImages.vue"
 import RecipeIngredient from "./RecipeIngredient.vue"
 import RecipeInstruction from "./RecipeInstruction.vue"
@@ -513,10 +514,8 @@ export default {
 
             const $this = this
 
-            axios
-                .get(
-                    `${this.$window.baseUrl}/api/recipes/${this.$route.params.id}`
-                )
+            api.recipes
+                .get(this.$route.params.id)
                 .then((response) => {
                     const recipe = response.data
                     // Store recipe data in vuex
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index c4a083879..4380b63ee 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
+import api from "cookbook/js/api-interface"
 
 import RecipeList from "./RecipeList.vue"
 
@@ -61,8 +61,8 @@ export default {
                 // Search by tags
                 const $this = this
                 const tags = this.$route.params.value
-                axios
-                    .get(`${this.$window.baseUrl}/api/tags/${tags}`)
+                api.recipes
+                    .allWithTag(tags)
                     .then((response) => {
                         $this.results = response.data
                     })
@@ -85,8 +85,8 @@ export default {
                 // Search by category
                 const $this = this
                 const cat = this.$route.params.value
-                axios
-                    .get(`${this.$window.baseUrl}/api/category/${cat}`)
+                api.recipes
+                    .allInCategory(cat)
                     .then((response) => {
                         $this.results = response.data
                     })
@@ -108,10 +108,8 @@ export default {
             } else {
                 // General search
                 const $this = this
-                axios
-                    .get(
-                        `${this.$window.baseUrl}/api/search/${this.$route.params.value}`
-                    )
+                api.recipes
+                    .search($this.$route.params.value)
                     .then((response) => {
                         $this.results = response.data
                     })
diff --git a/src/guest.js b/src/guest.js
index 368c64d36..2b0be0fd8 100644
--- a/src/guest.js
+++ b/src/guest.js
@@ -8,6 +8,9 @@
 import { generateUrl } from "@nextcloud/router"
 
 import Vue from "vue"
+
+import api from "cookbook/js/api-interface"
+
 import store from "./store"
 
 import AppInvalidGuest from "./components/AppInvalidGuest.vue"
@@ -27,6 +30,7 @@ if (__webpack_use_dev_server__ || false) {
 
     // eslint-disable-next-line no-param-reassign
     window.baseUrl = generateUrl("apps/cookbook")
+    api.init(window.baseUrl)
 
     // Also make the injections available in Vue components
     Vue.prototype.$window = window
diff --git a/src/js/api-interface.js b/src/js/api-interface.js
new file mode 100644
index 000000000..a1159ef53
--- /dev/null
+++ b/src/js/api-interface.js
@@ -0,0 +1,142 @@
+import axios from "@nextcloud/axios"
+
+let baseUrl
+// const baseUrl = globalThis.window.baseUrl
+
+function init($baseurl) {
+    baseUrl = $baseurl
+}
+
+function createNewRecipe(recipe) {
+    return axios({
+        method: "POST",
+        url: `${baseUrl}/api/recipes`,
+        data: recipe,
+    })
+}
+
+function getRecipe(id) {
+    return axios.get(`${baseUrl}/api/recipes/${id}`)
+}
+
+function getAllRecipes() {
+    return axios.get(`${baseUrl}/api/recipes`)
+}
+
+function getAllRecipesOfCategory(categoryName) {
+    return axios.get(`${baseUrl}/api/category/${categoryName}`)
+}
+
+function getAllRecipesWithTag(tags) {
+    return axios.get(`${baseUrl}/api/tags/${tags}`)
+}
+
+function searchRecipes(search) {
+    return axios.get(`${baseUrl}/api/search/${search}`)
+}
+
+function updateRecipe(id, recipe) {
+    return axios({
+        method: "PUT",
+        url: `${baseUrl}/api/recipes/${id}`,
+        data: recipe,
+    })
+}
+
+function deleteRecipe(id) {
+    return axios.delete(`${baseUrl}/api/recipes/${id}`)
+}
+
+function importRecipe(url) {
+    return axios({
+        method: "POST",
+        url: `${baseUrl}/import`,
+        data: `url=${url}`,
+    })
+}
+
+function getAllCategories() {
+    return axios.get(`${baseUrl}/categories`)
+}
+
+function updateCategoryName(oldName, newName) {
+    return axios({
+        method: "PUT",
+        url: `${baseUrl}/api/category/${encodeURIComponent(oldName)}`,
+        data: { name: newName },
+    })
+}
+
+function getAllKeywords() {
+    return axios.get(`${baseUrl}/keywords`)
+}
+
+function getConfig() {
+    return axios.get(`${baseUrl}/config`)
+}
+
+function updatePrintImageSetting(enabled) {
+    return axios({
+        method: "POST",
+        url: `${baseUrl}/config`,
+        data: { print_image: enabled ? 1 : 0 },
+    })
+}
+
+function updateUpdateInterval(newInterval) {
+    return axios({
+        method: "POST",
+        url: `${baseUrl}/config`,
+        data: { update_interval: newInterval },
+    })
+}
+
+function updateRecipeDirectory(newDir) {
+    return axios({
+        method: "POST",
+        url: `${baseUrl}/config`,
+        data: { folder: newDir },
+    })
+}
+
+function reindex() {
+    return axios({
+        method: "POST",
+        url: `${baseUrl}/reindex`,
+    })
+}
+
+export default {
+    init,
+    recipes: {
+        create: createNewRecipe,
+        getAll: getAllRecipes,
+        get: getRecipe,
+        allInCategory: getAllRecipesOfCategory,
+        allWithTag: getAllRecipesWithTag,
+        search: searchRecipes,
+        update: updateRecipe,
+        delete: deleteRecipe,
+        import: importRecipe,
+        reindex,
+    },
+    categories: {
+        getAll: getAllCategories,
+        update: updateCategoryName,
+    },
+    keywords: {
+        getAll: getAllKeywords,
+    },
+    config: {
+        get: getConfig,
+        directory: {
+            update: updateRecipeDirectory,
+        },
+        printImage: {
+            update: updatePrintImageSetting,
+        },
+        updateInterval: {
+            update: updateUpdateInterval,
+        },
+    },
+}
diff --git a/src/main.js b/src/main.js
index 520cf9744..a37985201 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,9 @@ import VueShowdown from "vue-showdown"
 import { generateUrl } from "@nextcloud/router"
 
 import Vue from "vue"
+
+import api from "cookbook/js/api-interface"
+
 import router from "./router"
 import store from "./store"
 
@@ -31,6 +34,7 @@ if (__webpack_use_dev_server__ || false) {
 
     // eslint-disable-next-line no-param-reassign
     window.baseUrl = generateUrl("apps/cookbook")
+    api.init(window.baseUrl)
 
     // Check if two routes point to the same component but have different content
     // eslint-disable-next-line no-param-reassign
diff --git a/src/store/index.js b/src/store/index.js
index 97f979202..a02bb7cf2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,7 +6,7 @@
  */
 import Vue from "vue"
 import Vuex from "vuex"
-import axios from "@nextcloud/axios"
+import api from "cookbook/js/api-interface"
 
 Vue.use(Vuex)
 
@@ -114,11 +114,7 @@ export default new Vuex.Store({
          * Create new recipe on the server
          */
         createRecipe(c, { recipe }) {
-            const request = axios({
-                method: "POST",
-                url: `${window.baseUrl}/api/recipes`,
-                data: recipe,
-            })
+            const request = api.recipes.create(recipe)
             return request.then((v) => {
                 // Refresh navigation to display changes
                 c.dispatch("setAppNavigationRefreshRequired", {
@@ -132,7 +128,7 @@ export default new Vuex.Store({
          * Delete recipe on the server
          */
         deleteRecipe(c, { id }) {
-            const request = axios.delete(`${window.baseUrl}/api/recipes/${id}`)
+            const request = api.recipes.delete(id)
             request.then(() => {
                 // Refresh navigation to display changes
                 c.dispatch("setAppNavigationRefreshRequired", {
@@ -176,13 +172,7 @@ export default new Vuex.Store({
             const newName = categoryNames[1]
             c.dispatch("setCategoryUpdating", { category: oldName })
 
-            const request = axios({
-                method: "PUT",
-                url: `${window.baseUrl}/api/category/${encodeURIComponent(
-                    oldName
-                )}`,
-                data: { name: newName },
-            })
+            const request = api.categories.update(oldName, newName)
 
             request
                 .then(() => {
@@ -205,11 +195,7 @@ export default new Vuex.Store({
         updateRecipeDirectory(c, { dir }) {
             c.commit("setUpdatingRecipeDirectory", { b: true })
             c.dispatch("setRecipe", { recipe: null })
-            const request = axios({
-                url: `${window.baseUrl}/config`,
-                method: "POST",
-                data: { folder: dir },
-            })
+            const request = api.config.directory.update(dir)
 
             request.then(() => {
                 c.dispatch("setAppNavigationRefreshRequired", {
@@ -223,11 +209,7 @@ export default new Vuex.Store({
          * Update existing recipe on the server
          */
         updateRecipe(c, { recipe }) {
-            const request = axios({
-                method: "PUT",
-                url: `${window.baseUrl}/api/recipes/${recipe.id}`,
-                data: recipe,
-            })
+            const request = api.recipes.update(recipe.id, recipe)
             request.then(() => {
                 // Refresh navigation to display changes
                 c.dispatch("setAppNavigationRefreshRequired", {
diff --git a/webpack.config.js b/webpack.config.js
index f2a4031ca..3a4274638 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,19 +12,29 @@ const webpackConfig = require('@nextcloud/webpack-vue-config')
 const { merge } = require('webpack-merge')
 const { env } = require('process')
 
-module.exports = (env) => { return merge(webpackConfig, {
-    entry: {
-        guest: path.resolve(path.join('src', 'guest.js')),
-    },
-    // You can add this to allow acces in the network. You will have to adopt the public path in main.js as well!
-    // devServer: {
-    //     host: "0.0.0.0",
-    // },
-    plugins: [
-        new CleanWebpackPlugin(),
-        new webpack.DefinePlugin({
-            '__webpack_use_dev_server__': env.dev_server || false,
-        }),
-    ],
-}) }
+function cookbookConfig (env) {
+    const config = merge(webpackConfig, {
+        entry: {
+            guest: path.resolve(path.join('src', 'guest.js')),
+        },
+        // You can add this to allow access in the network. You will have to adopt the public path in main.js as well!
+        // devServer: {
+        //     host: "0.0.0.0",
+        // },
+        plugins: [
+            new CleanWebpackPlugin(),
+            new webpack.DefinePlugin({
+                '__webpack_use_dev_server__': env.dev_server || false,
+            }),
+        ],
+        resolve: {
+            'alias': {
+                cookbook: path.resolve(__dirname, 'src')
+            }
+        },
+    })
+    // console.log(config)
+    return config
+}
 
+module.exports = cookbookConfig