From 9debbafdd5b5cc73354e61a5946d01476e2e7604 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Thu, 25 Feb 2021 00:31:48 +0100
Subject: [PATCH 1/5] Code cleanup & refactoring Some minor bugfixes

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/AppControls.vue               | 141 +++---
 src/components/AppIndex.vue                  |  18 +-
 src/components/AppInvalidGuest.vue           |   7 +-
 src/components/AppMain.vue                   |   5 +-
 src/components/AppNavi.vue                   |  90 ++--
 src/components/AppNavigationCaption.vue      |   6 +-
 src/components/AppSettings.vue               |  39 +-
 src/components/EditImageField.vue            |  24 +-
 src/components/EditInputField.vue            |  36 +-
 src/components/EditInputGroup.vue            | 102 ++---
 src/components/EditMultiselect.vue           |   6 +-
 src/components/EditMultiselectInputGroup.vue |  38 +-
 src/components/EditMultiselectPopup.vue      |  25 +-
 src/components/EditTimeField.vue             |  15 +-
 src/components/LazyPicture.vue               |  11 +-
 src/components/RecipeEdit.vue                | 434 +++++++++----------
 src/components/RecipeImages.vue              |   9 +-
 src/components/RecipeIngredient.vue          |  21 +-
 src/components/RecipeInstruction.vue         |   9 +-
 src/components/RecipeKeyword.vue             |   2 +-
 src/components/RecipeList.vue                |  96 ++--
 src/components/RecipeTimer.vue               |  53 ++-
 src/components/RecipeView.vue                |  98 ++---
 src/components/SearchResults.vue             |  61 +--
 src/guest.js                                 |   4 +-
 src/main.js                                  |  42 +-
 src/router/index.js                          |  10 +-
 src/store/index.js                           |  10 +-
 28 files changed, 710 insertions(+), 702 deletions(-)

diff --git a/src/components/AppControls.vue b/src/components/AppControls.vue
index f1aeddaa5..39fcc5705 100644
--- a/src/components/AppControls.vue
+++ b/src/components/AppControls.vue
@@ -1,30 +1,30 @@
 <template>
     <div class="wrapper">
         <!-- Use $store.state.page for page matching to make sure everything else has been set beforehand! -->
-        <Breadcrumbs class="breadcrumbs" rootIcon="icon-category-organization">
+        <Breadcrumbs class="breadcrumbs" root-icon="icon-category-organization">
             <Breadcrumb
                 :title="t('cookbook', 'Home')"
                 :to="'/'"
-                :disableDrop="true"
+                :disable-drop="true"
             />
             <!-- INDEX PAGE -->
             <Breadcrumb
                 v-if="isIndex"
                 class="active no-arrow"
                 :title="t('cookbook', 'All recipes')"
-                :disableDrop="true"
+                :disable-drop="true"
             />
             <Breadcrumb
                 v-if="isIndex"
                 class="no-arrow"
                 title=""
-                :disableDrop="true"
+                :disable-drop="true"
             >
                 <!-- This is clumsy design but the component cannot display just one input element on the breadcrumbs bar -->
                 <ActionInput
                     icon="icon-quota"
-                    @update:value="updateFilters"
                     :value="filterValue"
+                    @update:value="updateFilters"
                     >{{ t("cookbook", "Filter") }}</ActionInput
                 >
                 <ActionInput icon="icon-search" @submit="search">{{
@@ -36,17 +36,17 @@
                 v-if="isSearch"
                 class="not-link"
                 :title="searchTitle"
-                :disableDrop="true"
+                :disable-drop="true"
             />
             <Breadcrumb
                 v-if="isSearch && $route.params.value"
                 class="active"
                 :title="
-                    $route.params.value == '_'
+                    $route.params.value === '_'
                         ? 'None'
                         : decodeURIComponent($route.params.value)
                 "
-                :disableDrop="true"
+                :disable-drop="true"
             />
             <!-- RECIPE PAGES -->
             <!-- Edit recipe -->
@@ -54,13 +54,13 @@
                 v-if="isEdit"
                 class="not-link"
                 :title="t('cookbook', 'Edit recipe')"
-                :disableDrop="true"
+                :disable-drop="true"
             />
             <Breadcrumb
                 v-if="isEdit"
                 class="active"
                 :title="$store.state.recipe.name"
-                :disableDrop="true"
+                :disable-drop="true"
             >
                 <ActionButton
                     :icon="
@@ -70,7 +70,7 @@
                             : 'icon-history'
                     "
                     class="action-button"
-                    :ariaLabel="t('cookbook', 'Reload recipe')"
+                    :aria-label="t('cookbook', 'Reload recipe')"
                     @click="reloadRecipeEdit()"
                     >{{ t("cookbook", "Reload recipe") }}</ActionButton
                 >
@@ -80,13 +80,13 @@
                 v-else-if="isCreate"
                 class="active"
                 :title="t('cookbook', 'New recipe')"
-                :disableDrop="true"
+                :disable-drop="true"
             />
             <Breadcrumb
                 v-if="isEdit || isCreate"
                 class="no-arrow"
                 title=""
-                :disableDrop="true"
+                :disable-drop="true"
             >
                 <ActionButton
                     :icon="
@@ -95,7 +95,7 @@
                             : 'icon-checkmark'
                     "
                     class="action-button"
-                    :ariaLabel="t('cookbook', 'Save changes')"
+                    :aria-label="t('cookbook', 'Save changes')"
                     @click="saveChanges()"
                     >{{ t("cookbook", "Save changes") }}</ActionButton
                 >
@@ -105,7 +105,7 @@
                 v-if="isRecipe"
                 class="active"
                 :title="$store.state.recipe.name"
-                :disableDrop="true"
+                :disable-drop="true"
             >
                 <ActionButton
                     :icon="
@@ -115,7 +115,7 @@
                             : 'icon-history'
                     "
                     class="action-button"
-                    :ariaLabel="t('cookbook', 'Reload recipe')"
+                    :aria-label="t('cookbook', 'Reload recipe')"
                     @click="reloadRecipeView()"
                     >{{ t("cookbook", "Reload recipe") }}</ActionButton
                 >
@@ -124,12 +124,12 @@
                 v-if="isRecipe"
                 class="no-arrow"
                 title=""
-                :disableDrop="true"
+                :disable-drop="true"
             >
                 <ActionButton
                     icon="icon-rename"
                     class="action-button"
-                    :ariaLabel="t('cookbook', 'Edit recipe')"
+                    :aria-label="t('cookbook', 'Edit recipe')"
                     @click="
                         $window.goTo(
                             '/recipe/' + $store.state.recipe.id + '/edit'
@@ -142,12 +142,12 @@
                 v-if="isRecipe"
                 class="no-arrow"
                 title=""
-                :disableDrop="true"
+                :disable-drop="true"
             >
                 <ActionButton
                     icon="icon-category-office"
                     class="action-button"
-                    :ariaLabel="t('cookbook', 'Print recipe')"
+                    :aria-label="t('cookbook', 'Print recipe')"
                     @click="printRecipe()"
                     >{{ t("cookbook", "Print recipe") }}</ActionButton
                 >
@@ -156,12 +156,12 @@
                 v-if="isRecipe"
                 class="no-arrow"
                 title=""
-                :disableDrop="true"
+                :disable-drop="true"
             >
                 <ActionButton
                     icon="icon-delete"
                     class="action-button"
-                    :ariaLabel="t('cookbook', 'Delete recipe')"
+                    :aria-label="t('cookbook', 'Delete recipe')"
                     @click="deleteRecipe()"
                     >{{ t("cookbook", "Delete recipe") }}</ActionButton
                 >
@@ -171,11 +171,11 @@
                 v-if="isLoading"
                 class="active no-arrow"
                 :title="t('cookbook', 'App is loading')"
-                :disableDrop="true"
+                :disable-drop="true"
             >
                 <ActionButton
                     icon="icon-loading-small"
-                    :ariaLabel="t('cookbook', 'Loading…')"
+                    :aria-label="t('cookbook', 'Loading…')"
                 />
             </Breadcrumb>
             <!-- Is a recipe loading? -->
@@ -183,11 +183,11 @@
                 v-else-if="isLoadingRecipe"
                 class="active no-arrow"
                 :title="t('cookbook', 'Loading recipe')"
-                :disableDrop="true"
+                :disable-drop="true"
             >
                 <ActionButton
                     icon="icon-loading-small"
-                    :ariaLabel="t('cookbook', 'Loading…')"
+                    :aria-label="t('cookbook', 'Loading…')"
                 />
             </Breadcrumb>
             <!-- No recipe found -->
@@ -195,14 +195,14 @@
                 v-else-if="recipeNotFound"
                 class="active no-arrow"
                 :title="t('cookbook', 'Recipe not found')"
-                :disableDrop="true"
+                :disable-drop="true"
             />
             <!-- No page found -->
             <Breadcrumb
                 v-else-if="pageNotFound"
                 class="active no-arrow"
                 :title="t('cookbook', 'Page not found')"
-                :disableDrop="true"
+                :disable-drop="true"
             />
         </Breadcrumbs>
     </div>
@@ -211,7 +211,6 @@
 <script>
 import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
 import ActionInput from "@nextcloud/vue/dist/Components/ActionInput"
-import axios from "@nextcloud/axios"
 import Breadcrumbs from "@nextcloud/vue/dist/Components/Breadcrumbs"
 import Breadcrumb from "@nextcloud/vue/dist/Components/Breadcrumb"
 
@@ -230,96 +229,71 @@ export default {
     },
     computed: {
         isCreate() {
-            if (this.$store.state.page === "create") {
-                return true
-            }
-            return false
+            return this.$store.state.page === "create"
         },
         isEdit() {
             if (this.isLoadingRecipe) {
                 return false // Do not show both at the same time
             }
             // Editing requires that a recipe was found
-            if (this.$store.state.page === "edit" && this.$store.state.recipe) {
-                return true
-            }
-            return false
+            return !!(
+                this.$store.state.page === "edit" && this.$store.state.recipe
+            )
         },
         isIndex() {
             if (this.isLoadingRecipe) {
                 return false // Do not show both at the same time
             }
-            if (this.$store.state.page === "index") {
-                return true
-            }
-            return false
+            return this.$store.state.page === "index"
         },
         isLoading() {
             //  The page is being loaded
-            if (this.$store.state.page === null) {
-                return true
-            }
-            return false
+            return this.$store.state.page === null
         },
         isLoadingRecipe() {
             //  A recipe is being loaded
-            if (this.$store.state.loadingRecipe) {
-                return true
-            }
-            return false
+            return !!this.$store.state.loadingRecipe
         },
         isRecipe() {
             if (this.isLoadingRecipe) {
                 return false // Do not show both at the same time
             }
             // Viewing recipe requires that one was found
-            if (
-                this.$store.state.page === "recipe" &&
-                this.$store.state.recipe
-            ) {
-                return true
-            }
-            return false
+            return !!(
+                this.$store.state.page === "recipe" && this.$store.state.recipe
+            )
         },
         isSearch() {
             if (this.isLoadingRecipe) {
                 return false // Do not show both at the same time
             }
-            if (this.$store.state.page === "search") {
-                return true
-            }
-            return false
+            return this.$store.state.page === "search"
         },
         pageNotFound() {
-            if (this.$store.state.page === "notfound") {
-                return true
-            }
-            return false
+            return this.$store.state.page === "notfound"
         },
         recipeNotFound() {
             // Editing or viewing recipe was attempted, but no recipe was found
-            if (
+            return (
                 ["edit", "recipe"].indexOf(this.$store.state.page) !== -1 &&
                 !this.$store.state.recipe
-            ) {
-                return true
-            }
-            return false
+            )
         },
         searchTitle() {
             if (this.$route.name === "search-category") {
                 return t("cookbook", "Category")
-            } else if (this.$route.name === "search-name") {
+            }
+            if (this.$route.name === "search-name") {
                 return t("cookbook", "Recipe name")
-            } else if (this.$route.name === "search-tags") {
+            }
+            if (this.$route.name === "search-tags") {
                 return t("cookbook", "Tags")
-            } else {
-                return t("cookbook", "Search for recipes")
             }
+            return t("cookbook", "Search for recipes")
         },
     },
     methods: {
-        deleteRecipe: function () {
+        deleteRecipe() {
             // Confirm delete
             if (
                 !confirm(
@@ -329,41 +303,40 @@ export default {
             ) {
                 return
             }
-            let $this = this
+            const $this = this
 
             this.$store
                 .dispatch("deleteRecipe", { id: this.$store.state.recipe.id })
-                .then(function (response) {
+                .then((response) => {
                     $this.$window.goTo("/")
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     alert(t("cookbook", "Delete failed"))
                     if (e && e instanceof Error) {
                         throw e
                     }
                 })
         },
-        printRecipe: function () {
+        printRecipe() {
             window.print()
         },
-        reloadRecipeEdit: function () {
+        reloadRecipeEdit() {
             this.$root.$emit("reloadRecipeEdit")
         },
-        reloadRecipeView: function () {
+        reloadRecipeView() {
             this.$root.$emit("reloadRecipeView")
         },
-        saveChanges: function () {
+        saveChanges() {
             this.$root.$emit("saveRecipe")
         },
-        search: function (e) {
+        search(e) {
             this.$window.goTo("/search/" + e.target[1].value)
         },
-        updateFilters: function (e) {
+        updateFilters(e) {
             this.filterValue = e
             this.$root.$emit("applyRecipeFilter", e)
         },
     },
-    mounted() {},
 }
 </script>
 
diff --git a/src/components/AppIndex.vue b/src/components/AppIndex.vue
index 742c06322..dd483a339 100644
--- a/src/components/AppIndex.vue
+++ b/src/components/AppIndex.vue
@@ -5,7 +5,7 @@
 <script>
 import axios from "@nextcloud/axios"
 
-import RecipeList from "./RecipeList"
+import RecipeList from "./RecipeList.vue"
 
 export default {
     name: "Index",
@@ -32,33 +32,33 @@ export default {
          * the recipes in the index component.
          */
         updatingRecipeDirectory(newVal, oldVal) {
-            if (newVal == false && newVal != oldVal) {
+            if (newVal === false && newVal !== oldVal) {
                 this.loadAll()
             }
         },
     },
+    mounted() {
+        this.loadAll()
+    },
     methods: {
         /**
          * Load all recipes from the database
          */
-        loadAll: function () {
-            var $this = this
+        loadAll() {
+            const $this = this
             axios
                 .get(this.$window.baseUrl + "/api/recipes")
-                .then(function (response) {
+                .then((response) => {
                     $this.recipes = response.data
 
                     // Always set page name last
                     $this.$store.dispatch("setPage", { page: "index" })
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     // Always set page name last
                     $this.$store.dispatch("setPage", { page: "index" })
                 })
         },
     },
-    mounted() {
-        this.loadAll()
-    },
 }
 </script>
diff --git a/src/components/AppInvalidGuest.vue b/src/components/AppInvalidGuest.vue
index 8850c1fad..8a971dd8f 100644
--- a/src/components/AppInvalidGuest.vue
+++ b/src/components/AppInvalidGuest.vue
@@ -26,7 +26,6 @@
 <script>
 import Content from "@nextcloud/vue/dist/Components/Content"
 import AppContent from "@nextcloud/vue/dist/Components/AppContent"
-import axios from "@nextcloud/axios"
 
 export default {
     name: "InvalidGuest",
@@ -35,13 +34,13 @@ export default {
         AppContent,
     },
     methods: {
-        selectFolder: function (e) {
+        selectFolder(e) {
             OC.dialogs.filepicker(
                 t("cookbook", "Path to your recipe collection"),
                 (path) => {
                     this.$store
                         .dispatch("updateRecipeDirectory", { dir: path })
-                        .then(function () {
+                        .then(() => {
                             location.reload()
                         })
                 },
@@ -58,7 +57,7 @@ export default {
 .main {
     display: flex;
     height: 100%;
-    flex-direction: colummn;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
 
diff --git a/src/components/AppMain.vue b/src/components/AppMain.vue
index a6932fb9e..829269505 100644
--- a/src/components/AppMain.vue
+++ b/src/components/AppMain.vue
@@ -12,9 +12,10 @@
 
 <script>
 import AppContent from "@nextcloud/vue/dist/Components/AppContent"
-import AppControls from "./AppControls"
-import AppNavi from "./AppNavi"
 import Content from "@nextcloud/vue/dist/Components/Content"
+import AppControls from "./AppControls.vue"
+import AppNavi from "./AppNavi.vue"
+
 export default {
     name: "Main",
     components: {
diff --git a/src/components/AppNavi.vue b/src/components/AppNavi.vue
index 26b4899ec..8b7d8bdda 100644
--- a/src/components/AppNavi.vue
+++ b/src/components/AppNavi.vue
@@ -13,9 +13,9 @@
         <template slot="list">
             <ActionInput
                 class="download"
-                @submit="downloadRecipe"
                 :disabled="downloading ? 'disabled' : null"
                 :icon="downloading ? 'icon-loading-small' : 'icon-download'"
+                @submit="downloadRecipe"
             >
                 {{ t("cookbook", "Download recipe from URL") }}
             </ActionInput>
@@ -41,8 +41,8 @@
             </AppNavigationItem>
 
             <AppNavigationCaption
-                :title="t('cookbook', 'Categories')"
                 v-if="loading.categories || categories.length > 0"
+                :title="t('cookbook', 'Categories')"
                 :loading="loading.categories"
             >
                 <template slot="actions">
@@ -62,7 +62,7 @@
                 :title="cat.name"
                 :icon="categoryUpdating[idx] ? '' : 'icon-category-files'"
                 :loading="categoryUpdating[idx]"
-                :allowCollapse="true"
+                :allow-collapse="true"
                 :to="'/category/' + cat.name"
                 :editable="catRenamingEnabled"
                 :edit-label="t('cookbook', 'Rename')"
@@ -81,9 +81,9 @@
                 >
                 <template>
                     <AppNavigationItem
-                        class="recipe"
                         v-for="(rec, idy) in cat.recipes"
                         :key="idx + '-' + idy"
+                        class="recipe"
                         :title="rec.name"
                         :to="'/recipe/' + rec.recipe_id"
                         :icon="
@@ -99,7 +99,7 @@
 
         <template slot="footer">
             <AppSettings
-                :scanningLibrary="scanningLibrary"
+                :scanning-library="scanningLibrary"
                 @reindex="reindex"
             />
         </template>
@@ -114,12 +114,9 @@ import AppNavigation from "@nextcloud/vue/dist/Components/AppNavigation"
 import AppNavigationCounter from "@nextcloud/vue/dist/Components/AppNavigationCounter"
 import AppNavigationItem from "@nextcloud/vue/dist/Components/AppNavigationItem"
 import AppNavigationNew from "@nextcloud/vue/dist/Components/AppNavigationNew"
-import AppNavigationSettings from "@nextcloud/vue/dist/Components/AppNavigationSettings"
-import AppNavigationSpacer from "@nextcloud/vue/dist/Components/AppNavigationSpacer"
-import AppSettings from "./AppSettings"
 import Vue from "vue"
-
-import AppNavigationCaption from "./AppNavigationCaption"
+import AppSettings from "./AppSettings.vue"
+import AppNavigationCaption from "./AppNavigationCaption.vue"
 
 export default {
     name: "AppNavi",
@@ -127,13 +124,11 @@ export default {
         ActionButton,
         ActionInput,
         AppNavigation,
-        AppNavigationCaption,
         AppNavigationCounter,
         AppNavigationItem,
         AppNavigationNew,
-        AppNavigationSettings,
-        AppNavigationSpacer,
         AppSettings,
+        AppNavigationCaption,
     },
     data() {
         return {
@@ -165,24 +160,27 @@ export default {
     },
     watch: {
         // Register a method hook for navigation refreshing
-        refreshRequired: function (newVal, oldVal) {
-            if (newVal != oldVal && newVal == true) {
+        refreshRequired(newVal, oldVal) {
+            if (newVal !== oldVal && newVal === true) {
                 this.getCategories()
             }
         },
     },
+    mounted() {
+        this.getCategories()
+    },
     methods: {
         /**
          * Enable renaming of categories.
          */
-        toggleCategoryRenaming: function () {
+        toggleCategoryRenaming() {
             this.catRenamingEnabled = !this.catRenamingEnabled
         },
 
         /**
          * Opens a category
          */
-        categoryOpen: function (idx) {
+        categoryOpen(idx) {
             if (
                 !this.categories[idx].recipes.length ||
                 this.categories[idx].recipes[0].id
@@ -190,16 +188,16 @@ export default {
                 // Recipes have already been loaded
                 return
             }
-            let cat = this.categories[idx]
-            let $this = this
+            const cat = this.categories[idx]
+            const $this = this
             Vue.set(this.isCategoryUpdating, idx, true)
 
             axios
                 .get(this.$window.baseUrl + "/api/category/" + cat.name)
-                .then(function (response) {
+                .then((response) => {
                     cat.recipes = response.data
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     cat.recipes = []
                     alert(
                         // prettier-ignore
@@ -222,23 +220,23 @@ export default {
         /**
          * Updates the name of a category
          */
-        categoryUpdateName: function (idx, newName) {
+        categoryUpdateName(idx, newName) {
             if (!this.categories[idx]) {
                 return
             }
             Vue.set(this.isCategoryUpdating, idx, true)
-            let oldName = this.categories[idx].name
-            let $this = this
+            const oldName = this.categories[idx].name
+            const $this = this
 
             this.$store
                 .dispatch("updateCategoryName", {
                     categoryNames: [oldName, newName],
                 })
-                .then(function (response) {
+                .then((response) => {
                     $this.categories[idx].name = newName
                     $this.$root.$emit("categoryRenamed", [newName, oldName])
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     alert(
                         // prettier-ignore
                         t("cookbook",'Failed to update name of category "{category}"',
@@ -260,16 +258,16 @@ export default {
         /**
          * Download and import the recipe at given URL
          */
-        downloadRecipe: function (e) {
+        downloadRecipe(e) {
             this.downloading = true
-            let $this = this
+            const $this = this
             axios({
                 url: this.$window.baseUrl + "/import",
                 method: "POST",
                 data: "url=" + e.target[1].value,
             })
-                .then(function (response) {
-                    let recipe = response.data
+                .then((response) => {
+                    const recipe = response.data
                     $this.downloading = false
                     $this.$window.goTo("/recipe/" + recipe.id)
                     e.target[1].value = ""
@@ -278,7 +276,7 @@ export default {
                         isRequired: true,
                     })
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     $this.downloading = false
                     alert(t("cookbook", e.request.responseJSON))
                 })
@@ -287,13 +285,13 @@ export default {
         /**
          * Fetch and display recipe categories
          */
-        getCategories: function () {
-            let $this = this
+        getCategories() {
+            const $this = this
             this.loading.categories = true
             axios
                 .get(this.$window.baseUrl + "/categories")
-                .then(function (response) {
-                    let json = response.data || []
+                .then((response) => {
+                    const json = response.data || []
                     // Reset the old values
                     $this.uncatRecipes = 0
                     $this.categories = []
@@ -301,11 +299,14 @@ export default {
 
                     for (let i = 0; i < json.length; i++) {
                         if (json[i].name === "*") {
-                            $this.uncatRecipes = parseInt(json[i].recipe_count)
+                            $this.uncatRecipes = parseInt(
+                                json[i].recipe_count,
+                                10
+                            )
                         } else {
                             $this.categories.push({
                                 name: json[i].name,
-                                recipeCount: parseInt(json[i].recipe_count),
+                                recipeCount: parseInt(json[i].recipe_count, 10),
                                 recipes: [
                                     {
                                         id: 0,
@@ -339,7 +340,7 @@ export default {
                         )
                     })
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     alert(t("cookbook", "Failed to fetch categories"))
                     if (e && e instanceof Error) {
                         throw e
@@ -354,8 +355,8 @@ export default {
         /**
          * Reindex all recipes
          */
-        reindex: function () {
-            let $this = this
+        reindex() {
+            const $this = this
             if (this.scanningLibrary) {
                 // No repeat clicks until we're done
                 return
@@ -376,7 +377,7 @@ export default {
                         $this.$router.go()
                     }
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     $this.scanningLibrary = false
                     console.log("Library reindexing failed!")
                 })
@@ -385,22 +386,19 @@ export default {
         /**
          * Set loading recipe index to show the loading icon
          */
-        setLoadingRecipe: function (id) {
+        setLoadingRecipe(id) {
             this.$store.dispatch("setLoadingRecipe", { recipe: id })
         },
 
         /**
          * Toggle the left navigation pane
          */
-        toggleNavigation: function () {
+        toggleNavigation() {
             this.$store.dispatch("setAppNavigationVisible", {
                 isVisible: !this.$store.state.appNavigation.visible,
             })
         },
     },
-    mounted() {
-        this.getCategories()
-    },
 }
 </script>
 
diff --git a/src/components/AppNavigationCaption.vue b/src/components/AppNavigationCaption.vue
index 68c896bb3..6749306c3 100644
--- a/src/components/AppNavigationCaption.vue
+++ b/src/components/AppNavigationCaption.vue
@@ -146,16 +146,16 @@ export default {
         hasUtils() {
             if (this.editing) {
                 return false
-            } else if (
+            }
+            if (
                 this.$slots.actions ||
                 this.$slots.counter ||
                 this.editable ||
                 this.undo
             ) {
                 return true
-            } else {
-                return false
             }
+            return false
         },
         // is the icon shown?
         // we don't show it on mobile if the entry is collapsible
diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
index ce15831ca..c790c8acc 100644
--- a/src/components/AppSettings.vue
+++ b/src/components/AppSettings.vue
@@ -11,8 +11,8 @@
                                     ? 'icon-loading-small'
                                     : 'icon-history'
                             "
-                            @click="emit('reindex')"
                             :title="t('cookbook', 'Rescan library')"
+                            @click="emit('reindex')"
                         />
                     </li>
                     <li>
@@ -22,8 +22,8 @@
                         <input
                             type="text"
                             :value="recipeFolder"
-                            @click="pickRecipeFolder"
                             :placeholder="t('cookbook', 'Please pick a folder')"
+                            @click="pickRecipeFolder"
                         />
                     </li>
                     <li>
@@ -31,18 +31,18 @@
                             {{ t("cookbook", "Update interval in minutes") }}
                         </label>
                         <input
+                            v-model="updateInterval"
                             type="number"
                             class="input settings-input"
-                            v-model="updateInterval"
                             placeholder="0"
                         />
                     </li>
                     <li>
                         <input
+                            id="recipe-print-image"
+                            v-model="printImage"
                             type="checkbox"
                             class="checkbox"
-                            v-model="printImage"
-                            id="recipe-print-image"
                         />
                         <label for="recipe-print-image">
                             {{ t("cookbook", "Print image with recipe") }}
@@ -61,11 +61,16 @@ import AppNavigationSettings from "@nextcloud/vue/dist/Components/AppNavigationS
 
 export default {
     name: "AppSettings",
-    props: ["scanningLibrary"],
     components: {
         ActionButton,
         AppNavigationSettings,
     },
+    props: {
+        scanningLibrary: {
+            type: Boolean,
+            default: false,
+        },
+    },
     data() {
         return {
             printImage: false,
@@ -78,7 +83,7 @@ export default {
         }
     },
     watch: {
-        printImage: function (newVal, oldVal) {
+        printImage(newVal, oldVal) {
             // Avoid infinite loop on page load and when reseting value after failed submit
             if (this.resetPrintImage) {
                 this.resetPrintImage = false
@@ -101,7 +106,7 @@ export default {
                     this.printImage = oldVal
                 })
         },
-        updateInterval: function (newVal, oldVal) {
+        updateInterval(newVal, oldVal) {
             // Avoid infinite loop on page load and when reseting value after failed submit
             if (this.resetInterval) {
                 this.resetInterval = false
@@ -129,20 +134,23 @@ export default {
                 })
         },
     },
+    mounted() {
+        this.setup()
+    },
     methods: {
         /**
          * Select a recipe folder using the Nextcloud file picker
          */
-        pickRecipeFolder: function (e) {
+        pickRecipeFolder(e) {
             OC.dialogs.filepicker(
                 t("cookbook", "Path to your recipe collection"),
                 (path) => {
-                    let $this = this
+                    const $this = this
                     this.$store
                         .dispatch("updateRecipeDirectory", { dir: path })
                         .then(() => {
                             $this.recipeFolder = path
-                            if ($this.$route.path != "/") {
+                            if ($this.$route.path !== "/") {
                                 $this.$router.push("/")
                             }
                         })
@@ -151,7 +159,7 @@ export default {
                                 // prettier-ignore
                                 t("cookbook","Could not set recipe folder to {path}",
                                     {
-                                        path: path,
+                                        path
                                     }
                                 )
                             )
@@ -166,14 +174,14 @@ export default {
         /**
          * Initial setup
          */
-        setup: function () {
+        setup() {
             axios({
                 url: this.$window.baseUrl + "/config",
                 method: "GET",
                 data: null,
             })
                 .then((response) => {
-                    let config = response.data
+                    const config = response.data
                     this.resetPrintImage = false
                     if (config) {
                         this.printImage = config["print_image"]
@@ -188,9 +196,6 @@ export default {
                 })
         },
     },
-    mounted() {
-        this.setup()
-    },
 }
 </script>
 
diff --git a/src/components/EditImageField.vue b/src/components/EditImageField.vue
index 810c76919..c5122903e 100644
--- a/src/components/EditImageField.vue
+++ b/src/components/EditImageField.vue
@@ -5,7 +5,7 @@
         </label>
         <input
             type="text"
-            :value="this.value"
+            :value="value"
             @input="$emit('input', $event.target.value)"
         />
         <button
@@ -21,14 +21,23 @@
 <script>
 export default {
     name: "EditImageField",
-    props: ["value", "fieldLabel"],
+    props: {
+        value: {
+            type: String,
+            default: "",
+        },
+        fieldLabel: {
+            type: String,
+            default: "",
+        },
+    },
     methods: {
-        pickImage: function (e) {
+        pickImage(e) {
             e.preventDefault()
-            let $this = this
+            const $this = this
             OC.dialogs.filepicker(
                 t("cookbook", "Path to your recipe image"),
-                function (path) {
+                (path) => {
                     $this.$emit("input", path)
                 },
                 false,
@@ -80,10 +89,7 @@ fieldset > input {
 
 fieldset > input + button {
     width: 3em;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: var(--border-radius);
-    border-top-left-radius: 0;
-    border-top-right-radius: var(--border-radius);
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
 }
 
 fieldset > input + button > * {
diff --git a/src/components/EditInputField.vue b/src/components/EditInputField.vue
index c50cdf40f..6dface87a 100644
--- a/src/components/EditInputField.vue
+++ b/src/components/EditInputField.vue
@@ -4,23 +4,23 @@
             {{ fieldLabel }}
         </label>
         <markdown-editor
-            ref="inputField"
-            class="editor"
             v-if="fieldType === 'markdown'"
+            ref="inputField"
             v-model="content"
-            @input="handleInput"
+            class="editor"
             toolbar=""
+            @input="handleInput"
         />
         <input
-            ref="inputField"
             v-else-if="fieldType !== 'textarea'"
-            :type="fieldType"
+            ref="inputField"
             v-model="content"
+            :type="fieldType"
             @input="handleInput"
         />
         <textarea
-            ref="inputField"
             v-if="fieldType === 'textarea'"
+            ref="inputField"
             v-model="content"
             @input="handleInput"
         />
@@ -56,7 +56,7 @@ export default {
         }
     },
     watch: {
-        value: function () {
+        value() {
             this.content = this.value
         },
     },
@@ -74,12 +74,12 @@ export default {
                 // Check if the letter before the hash
                 if (this.fieldType === "markdown") {
                     // for reference: https://codemirror.net/doc/manual.html#api
-                    let cursorPos = JSON.parse(
+                    const cursorPos = JSON.parse(
                         JSON.stringify(
                             this.$refs.inputField.editor.getCursor("start")
                         )
                     )
-                    let prevChar = this.$refs.inputField.editor.getRange(
+                    const prevChar = this.$refs.inputField.editor.getRange(
                         { line: cursorPos.line, ch: cursorPos.ch - 2 },
                         { line: cursorPos.line, ch: cursorPos.ch - 1 }
                     )
@@ -96,9 +96,9 @@ export default {
                         this.lastCursorPosition = cursorPos
                     }
                 } else {
-                    this.$refs["inputField"].selectionStart
-                    let content = this.$refs["inputField"].value
-                    let prevChar =
+                    const cursorPos = this.$refs.inputField.selectionStart
+                    const content = this.$refs.inputField.value
+                    const prevChar =
                         cursorPos > 1 ? content.charAt(cursorPos - 2) : ""
                     if (
                         cursorPos === 1 ||
@@ -118,7 +118,7 @@ export default {
         pasteCanceled() {
             // set cursor to position after pasted string
             this.$nextTick(function () {
-                let field = this.$refs["inputField"]
+                const field = this.$refs.inputField
                 if (this.fieldType === "markdown") {
                     field.editor.setCursor(this.lastCursorPosition)
                     field.editor.focus()
@@ -135,9 +135,9 @@ export default {
          * Paste string at the last saved cursor position
          */
         pasteString(str) {
-            let field = this.$refs["inputField"]
+            const field = this.$refs.inputField
 
-            if (this.fieldType == "markdown") {
+            if (this.fieldType === "markdown") {
                 // insert at last cursor position
                 field.editor.replaceRange(str, {
                     line: this.lastCursorPosition.line,
@@ -166,14 +166,14 @@ export default {
                 this.$nextTick(() => {
                     this.$nextTick(() => {
                         field.focus()
-                        let newCursorPos = this.lastCursorPosition + str.length
+                        const newCursorPos =
+                            this.lastCursorPosition + str.length
                         field.setSelectionRange(newCursorPos, newCursorPos)
                     })
                 })
             }
         },
     },
-    mounted() {},
 }
 </script>
 
@@ -215,7 +215,7 @@ fieldset > textarea {
 fieldset > .editor {
     width: calc(100% - 11em);
     min-height: 10em;
-    border-radius: 2;
+    border-radius: 2px;
     resize: vertical;
 }
 
diff --git a/src/components/EditInputGroup.vue b/src/components/EditInputGroup.vue
index 13198bb80..039ea4903 100644
--- a/src/components/EditInputGroup.vue
+++ b/src/components/EditInputGroup.vue
@@ -3,20 +3,20 @@
         <label>{{ fieldLabel }}</label>
         <ul>
             <li
-                :class="fieldType"
                 v-for="(entry, idx) in buffer"
                 :key="fieldName + idx"
+                :class="fieldType"
             >
                 <div v-if="showStepNumber" class="step-number">
                     {{ parseInt(idx) + 1 }}
                 </div>
                 <input
                     v-if="fieldType === 'text'"
-                    type="text"
                     ref="list-field"
                     v-model="buffer[idx]"
+                    type="text"
                     @keyup="keyPressed"
-                    v-on:input="handleInput"
+                    @input="handleInput"
                     @paste="handlePaste"
                 />
                 <textarea
@@ -24,29 +24,29 @@
                     ref="list-field"
                     v-model="buffer[idx]"
                     @keyup="keyPressed"
-                    v-on:input="handleInput"
+                    @input="handleInput"
                     @paste="handlePaste"
                 ></textarea>
                 <div class="controls">
                     <button
                         class="icon-arrow-up"
-                        @click="moveEntryUp(idx)"
                         :title="t('cookbook', 'Move entry up')"
+                        @click="moveEntryUp(idx)"
                     ></button>
                     <button
                         class="icon-arrow-down"
-                        @click="moveEntryDown(idx)"
                         :title="t('cookbook', 'Move entry down')"
+                        @click="moveEntryDown(idx)"
                     ></button>
                     <button
                         class="icon-add"
-                        @click="addNewEntry(idx)"
                         :title="t('cookbook', 'Insert entry above')"
+                        @click="addNewEntry(idx)"
                     ></button>
                     <button
                         class="icon-delete"
-                        @click="deleteEntry(idx)"
                         :title="t('cookbook', 'Delete entry')"
+                        @click="deleteEntry(idx)"
                     ></button>
                 </div>
             </li>
@@ -65,7 +65,10 @@ export default {
             type: Array,
             default: [],
         },
-        fieldType: String,
+        fieldType: {
+            type: String,
+            default: "text",
+        },
         fieldName: {
             type: String,
             default: "",
@@ -74,7 +77,10 @@ export default {
             type: Boolean,
             default: false,
         },
-        fieldLabel: String,
+        fieldLabel: {
+            type: String,
+            default: "",
+        },
         // If true, add new fields, for newlines in pasted data
         createFieldsOnNewlines: {
             type: Boolean,
@@ -108,21 +114,17 @@ export default {
         /* if index = -1, element is added at the end
          * if focusAfterInsert=true, the element is focussed after inserting
          * the content is inserted into the newly created field
-         **/
-        addNewEntry: function (
-            index = -1,
-            focusAfterInsert = true,
-            content = ""
-        ) {
+         * */
+        addNewEntry(index = -1, focusAfterInsert = true, content = "") {
             if (index === -1) {
                 index = this.buffer.length
             }
             this.buffer.splice(index, 0, content)
 
             if (focusAfterInsert) {
-                let $this = this
+                // const $this = this
                 this.$nextTick(function () {
-                    let listFields = this.$refs["list-field"]
+                    const listFields = this.$refs["list-field"]
                     if (listFields.length > index) {
                         listFields[index].focus()
                     }
@@ -132,14 +134,14 @@ export default {
         /**
          * Delete an entry from the list
          */
-        deleteEntry: function (index) {
+        deleteEntry(index) {
             this.buffer.splice(index, 1)
             this.$emit("input", this.buffer)
         },
         /**
          * Handle typing in input or field or textarea
          */
-        handleInput: function (e) {
+        handleInput(e) {
             // wait a tick to check if content was typed or pasted
             this.$nextTick(function () {
                 if (this.contentPasted) {
@@ -157,7 +159,7 @@ export default {
         /**
          * Handle paste in input field or textarea
          */
-        handlePaste: function (e) {
+        handlePaste(e) {
             this.contentPasted = true
             if (!this.createFieldsOnNewlines) {
                 return
@@ -167,9 +169,9 @@ export default {
             // from the data pasted in the input field (e.target.value)
             var clipboardData = e.clipboardData || window.clipboardData
             var pastedData = clipboardData.getData("Text")
-            let input_lines_array = pastedData.split(/\r\n|\r|\n/g)
+            const inputLinesArray = pastedData.split(/\r\n|\r|\n/g)
 
-            if (input_lines_array.length == 1) {
+            if (inputLinesArray.length === 1) {
                 this.singleLinePasted = true
                 return
             } else {
@@ -178,33 +180,33 @@ export default {
 
             e.preventDefault()
 
-            let $li = e.currentTarget.closest("li")
-            let $ul = $li.closest("ul")
-            let $inserted_index = Array.prototype.indexOf.call(
+            const $li = e.currentTarget.closest("li")
+            const $ul = $li.closest("ul")
+            const $insertedIndex = Array.prototype.indexOf.call(
                 $ul.childNodes,
                 $li
             )
 
             // Remove empty lines
-            for (let i = input_lines_array.length - 1; i >= 0; --i) {
-                if (input_lines_array[i].trim() == "") {
-                    input_lines_array.splice(i, 1)
+            for (let i = inputLinesArray.length - 1; i >= 0; --i) {
+                if (inputLinesArray[i].trim() === "") {
+                    inputLinesArray.splice(i, 1)
                 }
             }
-            for (let i = 0; i < input_lines_array.length; ++i) {
+            for (let i = 0; i < inputLinesArray.length; ++i) {
                 this.addNewEntry(
-                    $inserted_index + i + 1,
+                    $insertedIndex + i + 1,
                     false,
-                    input_lines_array[i]
+                    inputLinesArray[i]
                 )
             }
             this.$emit("input", this.buffer)
 
             this.$nextTick(function () {
-                let indexToFocus = $inserted_index + input_lines_array.length
+                let indexToFocus = $insertedIndex + inputLinesArray.length
                 // Delete field if it's empty
-                if (this.buffer[$inserted_index].trim() == "") {
-                    this.deleteEntry($inserted_index)
+                if (this.buffer[$insertedIndex].trim() === "") {
+                    this.deleteEntry($insertedIndex)
                     indexToFocus--
                 }
                 this.$refs["list-field"][indexToFocus].focus()
@@ -228,8 +230,8 @@ export default {
                 (this.referencePopupEnabled && e.keyCode === 51)
             ) {
                 e.preventDefault()
-                let $li = e.currentTarget.closest("li")
-                let $ul = $li.closest("ul")
+                const $li = e.currentTarget.closest("li")
+                const $ul = $li.closest("ul")
                 let $pressed_li_index = Array.prototype.indexOf.call(
                     $ul.childNodes,
                     $li
@@ -248,11 +250,11 @@ export default {
                     }
                 } else if (this.referencePopupEnabled && e.keyCode === 51) {
                     e.preventDefault()
-                    let elm = this.$refs["list-field"][$pressed_li_index]
+                    const elm = this.$refs["list-field"][$pressed_li_index]
                     // Check if the letter before the hash
-                    let cursorPos = elm.selectionStart
-                    let content = elm.value
-                    let prevChar =
+                    const cursorPos = elm.selectionStart
+                    const content = elm.value
+                    const prevChar =
                         cursorPos > 1 ? content.charAt(cursorPos - 2) : ""
 
                     if (
@@ -271,12 +273,12 @@ export default {
                 }
             }
         },
-        moveEntryDown: function (index) {
+        moveEntryDown(index) {
             if (index >= this.buffer.length - 1) {
                 // Already at the end of array
                 return
             }
-            let entry = this.buffer.splice(index, 1)[0]
+            const entry = this.buffer.splice(index, 1)[0]
             if (index + 1 < this.buffer.length) {
                 this.buffer.splice(index + 1, 0, entry)
             } else {
@@ -284,17 +286,17 @@ export default {
             }
             this.$emit("input", this.buffer)
         },
-        moveEntryUp: function (index) {
+        moveEntryUp(index) {
             if (index < 1) {
                 // Already at the start of array
                 return
             }
-            let entry = this.buffer.splice(index, 1)[0]
+            const entry = this.buffer.splice(index, 1)[0]
             this.buffer.splice(index - 1, 0, entry)
             this.$emit("input", this.buffer)
         },
         pasteCanceled() {
-            let field = this.$refs["list-field"][this.lastFocusedFieldIndex]
+            const field = this.$refs["list-field"][this.lastFocusedFieldIndex]
             // set cursor back to previous position
             this.$nextTick(function () {
                 field.focus()
@@ -308,11 +310,11 @@ export default {
          * Paste string at the last saved cursor position
          */
         pasteString(str, ignoreKeyup = true) {
-            let field = this.$refs["list-field"][this.lastFocusedFieldIndex]
+            const field = this.$refs["list-field"][this.lastFocusedFieldIndex]
 
             // insert str
-            let content = field.value
-            let updatedContent =
+            const content = field.value
+            const updatedContent =
                 content.slice(0, this.lastCursorPosition) +
                 str +
                 content.slice(this.lastCursorPosition)
@@ -325,7 +327,7 @@ export default {
                 this.$nextTick(function () {
                     this.ignoreNextKeyUp = ignoreKeyup
                     field.focus()
-                    let newCursorPos = this.lastCursorPosition + str.length
+                    const newCursorPos = this.lastCursorPosition + str.length
                     field.setSelectionRange(newCursorPos, newCursorPos)
                 })
             })
diff --git a/src/components/EditMultiselect.vue b/src/components/EditMultiselect.vue
index 02b5fa2f8..b886f9f36 100644
--- a/src/components/EditMultiselect.vue
+++ b/src/components/EditMultiselect.vue
@@ -11,13 +11,17 @@
 
 <script>
 import Multiselect from "@nextcloud/vue/dist/Components/Multiselect"
+
 export default {
     name: "EditMultiselect",
     components: {
         Multiselect,
     },
     props: {
-        fieldLabel: String,
+        fieldLabel: {
+            type: String,
+            default: "",
+        },
     },
     data() {
         return {}
diff --git a/src/components/EditMultiselectInputGroup.vue b/src/components/EditMultiselectInputGroup.vue
index e195b94d4..9e524e585 100644
--- a/src/components/EditMultiselectInputGroup.vue
+++ b/src/components/EditMultiselectInputGroup.vue
@@ -10,15 +10,15 @@
                     label="label"
                     :multiple="false"
                     :placeholder="labelSelectPlaceholder"
-                    @change="(e) => optionUpdated(idx, e)"
                     :value="selectedOptions[idx][0]"
+                    @change="(e) => optionUpdated(idx, e)"
                 />
                 <input
                     type="text"
                     class="val"
                     :placeholder="placeholder(idx)"
-                    @input="(e) => fieldValueUpdated(idx, e)"
                     :value="filledValues[idx]"
+                    @input="(e) => fieldValueUpdated(idx, e)"
                 />
             </li>
             <li
@@ -76,7 +76,7 @@ export default {
          */
         options: {
             type: Array,
-            default: [],
+            default: () => [],
             required: true,
         },
         // Value (passed in v-model)
@@ -127,13 +127,13 @@ export default {
         /**
          * Emit locally updated value to parent component.
          */
-        emitUpdate: function () {
+        emitUpdate() {
             this.$emit("change", JSON.parse(JSON.stringify(this.localValue)))
         },
         /**
          * Called when input-fields content is changed.
          */
-        fieldValueUpdated: function (idx, e) {
+        fieldValueUpdated(idx, e) {
             this.filledValues[idx] = e.target.value
             this.localValue[this.selectedOptions[idx][0][0].key] =
                 e.target.value
@@ -142,7 +142,7 @@ export default {
         /**
          * Called when a new option is chosen in one of the `Multiselect`s.
          */
-        optionUpdated: function (idx, val) {
+        optionUpdated(idx, val) {
             if (
                 idx == this.selectedOptions.length &&
                 typeof this.filledValues[idx] === "undefined"
@@ -163,14 +163,14 @@ export default {
         /**
          * Get content of the descriptive placeholder for an input field.
          */
-        placeholder: function (idx) {
+        placeholder(idx) {
             if (
                 idx >= this.selectedOptions.length ||
                 idx >= this.options.length
             ) {
                 return ""
             }
-            let optionIdx = this.options
+            const optionIdx = this.options
                 .map((o) => o.key)
                 .indexOf(this.selectedOptions[idx][0][0].key)
             if (optionIdx > -1 && "placeholder" in this.options[optionIdx]) {
@@ -181,33 +181,33 @@ export default {
         /**
          * Get a list of not yet selected options.
          */
-        selectableOptions: function (idx) {
+        selectableOptions(idx) {
             if (!(this.selectedOptions instanceof Array)) {
                 return []
             }
-            let selectable_Opts = []
-            let selected_keys = this.selectedOptions.map((m) => m[0][0].key)
+            const selectableOpts = []
+            const selectedKeys = this.selectedOptions.map((m) => m[0][0].key)
             for (let i = 0; i < this.options.length; i++) {
-                let option = this.options[i]
+                const option = this.options[i]
                 if (!("label" in option)) {
                     option.label = option.key
                 }
-                if (!selected_keys.includes(option.key)) {
-                    selectable_Opts.push(option)
+                if (!selectedKeys.includes(option.key)) {
+                    selectableOpts.push(option)
                 }
             }
-            return selectable_Opts
+            return selectableOpts
         },
         /**
          * Update the helper fields with the localValue.
          */
-        updateLocalValues: function () {
+        updateLocalValues() {
             // show only fields made available in passed `options`
             this.selectedOptions = []
             this.filledValues = []
             for (let key in this.localValue) {
                 if (this.options.map((o) => o.key).includes(key)) {
-                    let opt = this.options.filter((o) => o.key == key)
+                    const opt = this.options.filter((o) => o.key === key)
                     this.selectedOptions.push([opt])
                     this.filledValues.push(this.localValue[key])
                 }
@@ -261,7 +261,7 @@ fieldset > ul > li .val {
     margin: 0;
 }
 
-.ms {
+/* .ms {
     width: 20em;
 }
 
@@ -269,5 +269,5 @@ fieldset > ul > li .val {
     .ms {
         width: 100%;
     }
-}
+} */
 </style>
diff --git a/src/components/EditMultiselectPopup.vue b/src/components/EditMultiselectPopup.vue
index 8581e996a..427528ab4 100644
--- a/src/components/EditMultiselectPopup.vue
+++ b/src/components/EditMultiselectPopup.vue
@@ -4,12 +4,11 @@
             ref="ms"
             class="multiselect-popup-container__multiselect"
             v-bind="$attrs"
-            v-on="$listeners"
             open-direction="bottom"
             :multiple="false"
+            v-on="$listeners"
             @select="optionSelected"
             @close="closePopup"
-            @keyup="keyUp"
         />
         <div class="multiselect-popup-container__close-button">
             <button
@@ -26,36 +25,32 @@
 
 <script>
 import Multiselect from "@nextcloud/vue/dist/Components/Multiselect"
+
 export default {
     name: "EditMultiselectPopup",
     components: {
         Multiselect,
     },
     props: {
-        focused: false,
+        focused: {
+            type: Boolean,
+            default: false,
+        },
     },
     watch: {
         focused() {
-            if (this.focused == true) {
-                this.$refs["ms"].$el.focus()
+            if (this.focused === true) {
+                this.$refs.ms.$el.focus()
             }
         },
     },
     methods: {
-        closePopup: function (opt) {
+        closePopup(opt) {
             this.$parent.$emit("ms-popup-selection-canceled")
         },
-        optionSelected: function (opt) {
+        optionSelected(opt) {
             this.$parent.$emit("ms-popup-selected", opt)
         },
-        keyUp: function (e) {
-            if (e.keyCode === 13) {
-                console.log("13")
-            }
-            if (e.keyCode === 10) {
-                console.log("10")
-            }
-        },
     },
 }
 </script>
diff --git a/src/components/EditTimeField.vue b/src/components/EditTimeField.vue
index 4127df27e..096b43fb3 100644
--- a/src/components/EditTimeField.vue
+++ b/src/components/EditTimeField.vue
@@ -2,18 +2,18 @@
     <fieldset>
         <label>{{ fieldLabel }}</label>
         <input
+            v-model="hours"
             type="number"
             min="0"
-            v-model="hours"
             placeholder="00"
             @input="handleInput"
         />
         <span>:</span>
         <input
+            v-model="minutes"
             type="number"
             min="0"
             max="59"
-            v-model="minutes"
             placeholder="00"
             @input="handleInput"
         />
@@ -32,7 +32,10 @@ export default {
                 paddedTime: null,
             },
         },
-        fieldLabel: String,
+        fieldLabel: {
+            type: String,
+            default: "",
+        },
     },
     data() {
         return {
@@ -41,7 +44,7 @@ export default {
         }
     },
     watch: {
-        value: function () {
+        value() {
             this.hours = this.value.time[0]
             this.minutes = this.value.time[1]
         },
@@ -52,8 +55,8 @@ export default {
             this.hours = this.hours ? this.hours : 0
 
             // create padded time string
-            let hours_p = this.hours.toString().padStart(2, "0")
-            let mins_p = this.minutes.toString().padStart(2, "0")
+            const hours_p = this.hours.toString().padStart(2, "0")
+            const mins_p = this.minutes.toString().padStart(2, "0")
 
             this.$emit("input", {
                 time: [this.hours, this.minutes],
diff --git a/src/components/LazyPicture.vue b/src/components/LazyPicture.vue
index 8f64e833e..58ff0a28b 100644
--- a/src/components/LazyPicture.vue
+++ b/src/components/LazyPicture.vue
@@ -14,7 +14,6 @@
         />
         <img
             class="full-resolution"
-            imageLoaded
             :class="{ 'image-loaded': !isLoading }"
             :width="width ? width + 'px' : ''"
             :height="height ? height + 'px' : ''"
@@ -79,15 +78,15 @@ export default {
         },
     },
     mounted() {
-        let $this = this
+        const $this = this
 
         // init lozad
         const observer = lozad(this.$el, {
             enableAutoReload: true,
-            load: function (el) {
-                let loadingIndicator = el.querySelector(".loading-indicator")
-                let imgPlaceholder = el.querySelector(".low-resolution")
-                let img = el.querySelector(".full-resolution")
+            load(el) {
+                const loadingIndicator = el.querySelector(".loading-indicator")
+                const imgPlaceholder = el.querySelector(".low-resolution")
+                const img = el.querySelector(".full-resolution")
 
                 // callback for fully-loaded image event
                 const onThumbnailFullyLoaded = () => {
diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue
index 8d1ca09a2..ce24df85f 100644
--- a/src/components/RecipeEdit.vue
+++ b/src/components/RecipeEdit.vue
@@ -2,41 +2,41 @@
     <div class="wrapper">
         <div class="overlay" :class="{ hidden: !overlayVisible }" />
         <EditInputField
-            :fieldType="'text'"
-            :fieldLabel="t('cookbook', 'Name')"
             v-model="recipe['name']"
+            :field-type="'text'"
+            :field-label="t('cookbook', 'Name')"
         />
         <EditInputField
-            :fieldType="'markdown'"
-            :fieldLabel="t('cookbook', 'Description')"
             v-model="recipe['description']"
-            :referencePopupEnabled="true"
+            :field-type="'markdown'"
+            :field-label="t('cookbook', 'Description')"
+            :reference-popup-enabled="true"
         />
         <EditInputField
-            :fieldType="'url'"
-            :fieldLabel="t('cookbook', 'URL')"
             v-model="recipe['url']"
+            :field-type="'url'"
+            :field-label="t('cookbook', 'URL')"
         />
         <EditImageField
-            :fieldLabel="t('cookbook', 'Image')"
             v-model="recipe['image']"
+            :field-label="t('cookbook', 'Image')"
         />
         <EditTimeField
-            :fieldLabel="t('cookbook', 'Preparation time')"
             v-model="prepTime"
+            :field-label="t('cookbook', 'Preparation time')"
         />
         <EditTimeField
-            :fieldLabel="t('cookbook', 'Cooking time')"
             v-model="cookTime"
+            :field-label="t('cookbook', 'Cooking time')"
         />
         <EditTimeField
-            :fieldLabel="t('cookbook', 'Total time')"
             v-model="totalTime"
+            :field-label="t('cookbook', 'Total time')"
         />
         <EditMultiselect
-            :fieldLabel="t('cookbook', 'Category')"
-            :placeholder="t('cookbook', 'Choose category')"
             v-model="recipe['recipeCategory']"
+            :field-label="t('cookbook', 'Category')"
+            :placeholder="t('cookbook', 'Choose category')"
             :options="allCategories"
             :taggable="true"
             :multiple="false"
@@ -44,51 +44,51 @@
             @tag="addCategory"
         />
         <EditMultiselect
-            :fieldLabel="t('cookbook', 'Keywords')"
-            :placeholder="t('cookbook', 'Choose keywords')"
             v-model="selectedKeywords"
+            :field-label="t('cookbook', 'Keywords')"
+            :placeholder="t('cookbook', 'Choose keywords')"
             :options="allKeywords"
             :taggable="true"
             :multiple="true"
-            :tagWidth="60"
+            :tag-width="60"
             :loading="isFetchingKeywords"
             @tag="addKeyword"
         />
         <EditInputField
-            :fieldType="'number'"
-            :fieldLabel="t('cookbook', 'Servings')"
             v-model="recipe['recipeYield']"
+            :field-type="'number'"
+            :field-label="t('cookbook', 'Servings')"
         />
         <EditMultiselectInputGroup
-            :fieldLabel="t('cookbook', 'Nutrition Information')"
             v-model="recipe['nutrition']"
+            :field-label="t('cookbook', 'Nutrition Information')"
             :options="availableNutritionFields"
-            :labelSelectPlaceholder="t('cookbook', 'Pick option')"
+            :label-select-placeholder="t('cookbook', 'Pick option')"
         />
         <EditInputGroup
-            :fieldName="'tool'"
-            :fieldType="'text'"
-            :fieldLabel="t('cookbook', 'Tools')"
             v-model="recipe['tool']"
-            v-bind:createFieldsOnNewlines="true"
-            :referencePopupEnabled="true"
+            :field-name="'tool'"
+            :field-type="'text'"
+            :field-label="t('cookbook', 'Tools')"
+            :create-fields-on-newlines="true"
+            :reference-popup-enabled="true"
         />
         <EditInputGroup
-            :fieldName="'recipeIngredient'"
-            :fieldType="'text'"
-            :fieldLabel="t('cookbook', 'Ingredients')"
             v-model="recipe['recipeIngredient']"
-            v-bind:createFieldsOnNewlines="true"
-            :referencePopupEnabled="true"
+            :field-name="'recipeIngredient'"
+            :field-type="'text'"
+            :field-label="t('cookbook', 'Ingredients')"
+            :create-fields-on-newlines="true"
+            :reference-popup-enabled="true"
         />
         <EditInputGroup
-            :fieldName="'recipeInstructions'"
-            :fieldType="'textarea'"
-            :fieldLabel="t('cookbook', 'Instructions')"
             v-model="recipe['recipeInstructions']"
-            v-bind:createFieldsOnNewlines="true"
-            v-bind:showStepNumber="true"
-            :referencePopupEnabled="true"
+            :field-name="'recipeInstructions'"
+            :field-type="'textarea'"
+            :field-label="t('cookbook', 'Instructions')"
+            :create-fields-on-newlines="true"
+            :show-step-number="true"
+            :reference-popup-enabled="true"
         />
         <edit-multiselect-popup
             ref="referencesPopup"
@@ -106,13 +106,13 @@
 <script>
 import axios from "@nextcloud/axios"
 import Vue from "vue"
-import EditImageField from "./EditImageField"
-import EditInputField from "./EditInputField"
-import EditInputGroup from "./EditInputGroup"
-import EditMultiselect from "./EditMultiselect"
-import EditMultiselectInputGroup from "./EditMultiselectInputGroup"
-import EditMultiselectPopup from "./EditMultiselectPopup"
-import EditTimeField from "./EditTimeField"
+import EditImageField from "./EditImageField.vue"
+import EditInputField from "./EditInputField.vue"
+import EditInputGroup from "./EditInputGroup.vue"
+import EditMultiselect from "./EditMultiselect.vue"
+import EditMultiselectInputGroup from "./EditMultiselectInputGroup.vue"
+import EditMultiselectPopup from "./EditMultiselectPopup.vue"
+import EditTimeField from "./EditTimeField.vue"
 
 export default {
     name: "RecipeEdit",
@@ -125,6 +125,61 @@ export default {
         EditMultiselectInputGroup,
         EditMultiselectPopup,
     },
+    // We can check if the user has browsed from the same recipe's view to this
+    // edit and save some time by not reloading the recipe data, leading to a
+    // more seamless experience.
+    // This assumes that the data has not been changed some other way between
+    // loading the view component and loading this edit component. If that is
+    // the case, the user can always manually reload by clicking the breadcrumb.
+    beforeRouteEnter(to, from, next) {
+        if (window.isSameItemInstance(from.fullPath, to.fullPath)) {
+            next((vm) => {
+                vm.setup()
+            })
+        } else if (to.params && to.params.id) {
+            next((vm) => {
+                vm.loadRecipeData()
+            })
+        } else {
+            next((vm) => {
+                vm.setup()
+            })
+        }
+    },
+    /**
+     * This is one tricky feature of Vue router. If different paths lead to
+     * the same component (such as '/recipe/create' and '/recipe/xxx/edit
+     * or /recipe/xxx/edit and /recipe/yyy/edit)', the view will not automatically
+     * reload. So we have to check for these conditions and reload manually.
+     * This can also be used to confirm that the user wants to leave the page
+     * if there are unsaved changes.
+     */
+    beforeRouteLeave(to, from, next) {
+        // beforeRouteLeave is called when the static route changes.
+        // Cancel the navigation, if the form has unsaved edits and the user did not
+        // confirm leave. This prevents accidentally losing changes
+        if (this.confirmStayInEditedForm()) {
+            next(false)
+        } else {
+            // We have to check if the target component stays the same and reload.
+            // However, we should not reload if the component changes; otherwise
+            // reloaded data may overwrite the data loaded at the target component
+            // which will at the very least result in incorrect breadcrumb path!
+            next()
+        }
+        // Check if we should reload the component content
+        if (this.$window.shouldReloadContent(from.fullPath, to.fullPath)) {
+            this.setup()
+        }
+    },
+    beforeRouteUpdate(to, from, next) {
+        // beforeRouteUpdate is called when the static route stays the same
+        next()
+        // Check if we should reload the component content
+        if (this.$window.shouldReloadContent(from.fullPath, to.fullPath)) {
+            this.setup()
+        }
+    },
     props: ["id"],
     data() {
         return {
@@ -237,12 +292,10 @@ export default {
     },
     computed: {
         allrecipeOptions() {
-            return this.allRecipes.map((r) => {
-                return {
-                    recipe_id: r.recipe_id,
-                    title: r.recipe_id + ": " + r.name,
-                }
-            })
+            return this.allRecipes.map((r) => ({
+                recipe_id: r.recipe_id,
+                title: `${r.recipe_id}: ${r.name}`,
+            }))
         },
         categoryUpdating() {
             return this.$store.state.categoryUpdating
@@ -252,8 +305,8 @@ export default {
                 this.$store.state.loadingRecipe ||
                 this.$store.state.reloadingRecipe ||
                 (this.$store.state.categoryUpdating &&
-                    this.$store.state.categoryUpdating ==
-                        this.recipe["recipeCategory"])
+                    this.$store.state.categoryUpdating ===
+                        this.recipe.recipeCategory)
             )
         },
     },
@@ -280,7 +333,7 @@ export default {
             deep: true,
             handler() {
                 // convert keyword array to comma-separated string
-                this.recipe["keywords"] = this.selectedKeywords.join()
+                this.recipe.keywords = this.selectedKeywords.join()
             },
         },
         recipe: {
@@ -290,13 +343,86 @@ export default {
             },
         },
     },
+    mounted() {
+        const $this = this
+
+        // Store the initial recipe configuration for possible later use
+        if (this.recipeInit === null) {
+            this.recipeInit = this.recipe
+        }
+        // Register save method hook for access from the controls components
+        // The event hookmust first be destroyed to avoid it from firing multiple
+        // times if the same component is loaded again
+        this.$root.$off("saveRecipe")
+        this.$root.$on("saveRecipe", () => {
+            this.save()
+        })
+        // Register data load method hook for access from the controls components
+        this.$root.$off("reloadRecipeEdit")
+        this.$root.$on("reloadRecipeEdit", () => {
+            this.loadRecipeData()
+        })
+        this.$root.$off("categoryRenamed")
+        this.$root.$on("categoryRenamed", (val) => {
+            // Update selectable categories
+            const idx = this.allCategories.findIndex((c) => c == val[1])
+            if (idx >= 0) {
+                Vue.set(this.allCategories, idx, val[0])
+                // this.allCategories[idx] = val[0]
+            }
+            // Update selected category if the currently selected was renamed
+            if (this.recipe.recipeCategory === val[1]) {
+                this.recipe.recipeCategory = val[0]
+            }
+        })
+        // Register recipe-reference selection hook for showing popup when requested
+        // from a child element
+        this.$off("showRecipeReferencesPopup")
+        this.$on("showRecipeReferencesPopup", (val) => {
+            this.referencesPopupFocused = true
+            this.popupContext = val
+        })
+        // Register hook when recipe reference has been selected in popup
+        this.$off("ms-popup-selected")
+        this.$on("ms-popup-selected", (opt) => {
+            this.referencesPopupFocused = false
+            this.popupContext.context.pasteString(`r/${opt.recipe_id} `)
+        })
+        // Register hook when recipe reference has been selected in popup
+        this.$off("ms-popup-selection-canceled")
+        this.$on("ms-popup-selection-canceled", (opt) => {
+            this.referencesPopupFocused = false
+            this.popupContext.context.pasteCanceled()
+        })
+        this.savingRecipe = false
+
+        // Load data for all recipes to be used in recipe-reference popup suggestions
+        axios
+            .get(`${this.$window.baseUrl}/api/recipes`)
+            .then((response) => {
+                $this.allRecipes = response.data
+            })
+            .catch((e) => {
+                console.log(e)
+            })
+            .then(() => {
+                // finally
+                $this.loadingRecipeReferences = false
+            })
+    },
+    beforeDestroy() {
+        window.removeEventListener("beforeunload", this.beforeWindowUnload)
+    },
+    created() {
+        window.addEventListener("beforeunload", this.beforeWindowUnload)
+    },
     methods: {
         /**
          * Add newly created category and set as selected.
          */
         addCategory(newCategory) {
             this.allCategories.push(newCategory)
-            this.recipe["recipeCategory"] = newCategory
+            this.recipe.recipeCategory = newCategory
         },
         /**
          * Add newly created keyword.
@@ -305,7 +431,7 @@ export default {
             this.allKeywords.push(newKeyword)
             this.selectedKeywords.push(newKeyword)
         },
-        addEntry: function (field, index, content = "") {
+        addEntry(field, index, content = "") {
             this.recipe[field].splice(index, 0, content)
         },
         beforeWindowUnload(e) {
@@ -327,27 +453,27 @@ export default {
                 !this.confirmLeavingPage()
             )
         },
-        deleteEntry: function (field, index) {
+        deleteEntry(field, index) {
             this.recipe[field].splice(index, 1)
         },
         /**
          * Fetch and display recipe categories
          */
-        fetchCategories: function () {
-            let $this = this
+        fetchCategories() {
+            const $this = this
             axios
-                .get(this.$window.baseUrl + "/categories")
-                .then(function (response) {
-                    let json = response.data || []
+                .get(`${this.$window.baseUrl}/categories`)
+                .then((response) => {
+                    const json = response.data || []
                     $this.allCategories = []
                     for (let i = 0; i < json.length; i++) {
-                        if (json[i].name != "*") {
+                        if (json[i].name !== "*") {
                             $this.allCategories.push(json[i].name)
                         }
                     }
                     $this.isFetchingCategories = false
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     alert(t("cookbook", "Failed to fetch categories"))
                     if (e && e instanceof Error) {
                         throw e
@@ -357,30 +483,30 @@ export default {
         /**
          * Fetch and display recipe keywords
          */
-        fetchKeywords: function () {
-            let $this = this
+        fetchKeywords() {
+            const $this = this
             axios
-                .get(this.$window.baseUrl + "/keywords")
-                .then(function (response) {
-                    let json = response.data || []
+                .get(`${this.$window.baseUrl}/keywords`)
+                .then((response) => {
+                    const json = response.data || []
                     if (json) {
                         $this.allKeywords = []
                         for (let i = 0; i < json.length; i++) {
-                            if (json[i].name != "*") {
+                            if (json[i].name !== "*") {
                                 $this.allKeywords.push(json[i].name)
                             }
                         }
                     }
                     $this.isFetchingKeywords = false
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     alert(t("cookbook", "Failed to fetch keywords"))
                     if (e && e instanceof Error) {
                         throw e
                     }
                 })
         },
-        loadRecipeData: function () {
+        loadRecipeData() {
             if (!this.$store.state.recipe) {
                 // Make the control row show that a recipe is loading
                 this.$store.dispatch("setLoadingRecipe", {
@@ -394,25 +520,23 @@ export default {
                     recipe: this.$route.params.id,
                 })
             }
-            let $this = this
+            const $this = this
             axios
                 .get(
-                    this.$window.baseUrl +
-                        "/api/recipes/" +
-                        this.$route.params.id
+                    `${this.$window.baseUrl}/api/recipes/${this.$route.params.id}`
                 )
-                .then(function (response) {
-                    let recipe = response.data
+                .then((response) => {
+                    const recipe = response.data
                     if (
                         "nutrition" in recipe &&
                         recipe.nutrition instanceof Array
                     ) {
                         recipe.nutrition = {}
                     }
-                    $this.$store.dispatch("setRecipe", { recipe: recipe })
+                    $this.$store.dispatch("setRecipe", { recipe })
                     $this.setup()
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     alert(t("cookbook", "Loading recipe failed"))
                     // Disable loading indicator
                     if ($this.$store.state.loadingRecipe) {
@@ -426,18 +550,18 @@ export default {
                     $this.$window.goTo("/recipe/create")
                 })
         },
-        save: function () {
+        save() {
             this.savingRecipe = true
             this.$store.dispatch("setSavingRecipe", { saving: true })
-            let $this = this
+            const $this = this
 
             if (this.recipe.id) {
                 this.$store
                     .dispatch("updateRecipe", { recipe: this.recipe })
                     .then((response) => {
-                        $this.$window.goTo("/recipe/" + response.data)
+                        $this.$window.goTo(`/recipe/${response.data}`)
                     })
-                    .catch(function (e) {
+                    .catch((e) => {
                         // error
                         alert(t("cookbook", "Recipe could not be saved"))
                         console.log(e)
@@ -453,9 +577,9 @@ export default {
                 this.$store
                     .dispatch("createRecipe", { recipe: this.recipe })
                     .then((response) => {
-                        $this.$window.goTo("/recipe/" + response.data)
+                        $this.$window.goTo(`/recipe/${response.data}`)
                     })
-                    .catch(function (e) {
+                    .catch((e) => {
                         // error
                         alert(t("cookbook", "Recipe could not be saved"))
                         console.log(e)
@@ -469,7 +593,7 @@ export default {
                     })
             }
         },
-        setup: function () {
+        setup() {
             this.fetchCategories()
             this.fetchKeywords()
             if (this.$route.params.id) {
@@ -501,7 +625,7 @@ export default {
                     paddedTime: this.recipe.totalTime,
                 }
 
-                this.selectedKeywords = this.recipe["keywords"].split(",")
+                this.selectedKeywords = this.recipe.keywords.split(",")
 
                 // fallback if fetching all keywords fails
                 this.selectedKeywords.forEach((kw) => {
@@ -511,10 +635,8 @@ export default {
                 })
 
                 // fallback if fetching all categories fails
-                if (
-                    !this.allCategories.includes(this.recipe["recipeCategory"])
-                ) {
-                    this.allCategories.push(this.recipe["recipeCategory"])
+                if (!this.allCategories.includes(this.recipe.recipeCategory)) {
+                    this.allCategories.push(this.recipe.recipeCategory)
                 }
 
                 // Always set the active page last!
@@ -528,7 +650,7 @@ export default {
                 this.formDirty = false
             })
         },
-        initEmptyRecipe: function () {
+        initEmptyRecipe() {
             this.prepTime = { time: [0, 0], paddedTime: "" }
             this.cookTime = { time: [0, 0], paddedTime: "" }
             this.totalTime = { time: [0, 0], paddedTime: "" }
@@ -553,136 +675,6 @@ export default {
             this.formDirty = false
         },
     },
-    mounted() {
-        let $this = this
-
-        // Store the initial recipe configuration for possible later use
-        if (this.recipeInit === null) {
-            this.recipeInit = this.recipe
-        }
-        // Register save method hook for access from the controls components
-        // The event hookmust first be destroyed to avoid it from firing multiple
-        // times if the same component is loaded again
-        this.$root.$off("saveRecipe")
-        this.$root.$on("saveRecipe", () => {
-            this.save()
-        })
-        // Register data load method hook for access from the controls components
-        this.$root.$off("reloadRecipeEdit")
-        this.$root.$on("reloadRecipeEdit", () => {
-            this.loadRecipeData()
-        })
-        this.$root.$off("categoryRenamed")
-        this.$root.$on("categoryRenamed", (val) => {
-            // Update selectable categories
-            let idx = this.allCategories.findIndex((c) => c == val[1])
-            if (idx >= 0) {
-                Vue.set(this.allCategories, idx, val[0])
-                // this.allCategories[idx] = val[0]
-            }
-            // Update selected category if the currently selected was renamed
-            if (this.recipe["recipeCategory"] == val[1]) {
-                this.recipe.recipeCategory = val[0]
-            }
-        })
-        // Register recipe-reference selection hook for showing popup when requested
-        // from a child element
-        this.$off("showRecipeReferencesPopup")
-        this.$on("showRecipeReferencesPopup", (val) => {
-            this.referencesPopupFocused = true
-            this.popupContext = val
-        })
-        // Register hook when recipe reference has been selected in popup
-        this.$off("ms-popup-selected")
-        this.$on("ms-popup-selected", (opt) => {
-            this.referencesPopupFocused = false
-            this.popupContext.context.pasteString("r/" + opt.recipe_id + " ")
-        })
-        // Register hook when recipe reference has been selected in popup
-        this.$off("ms-popup-selection-canceled")
-        this.$on("ms-popup-selection-canceled", (opt) => {
-            this.referencesPopupFocused = false
-            this.popupContext.context.pasteCanceled()
-        })
-        this.savingRecipe = false
-
-        // Load data for all recipes to be used in recipe-reference popup suggestions
-        axios
-            .get(this.$window.baseUrl + "/api/recipes")
-            .then(function (response) {
-                $this.allRecipes = response.data
-            })
-            .catch(function (e) {
-                console.log(e)
-            })
-            .then(() => {
-                // finally
-                $this.loadingRecipeReferences = false
-            })
-    },
-    beforeDestroy() {
-        window.removeEventListener("beforeunload", this.beforeWindowUnload)
-    },
-    // We can check if the user has browsed from the same recipe's view to this
-    // edit and save some time by not reloading the recipe data, leading to a
-    // more seamless experience.
-    // This assumes that the data has not been changed some other way between
-    // loading the view component and loading this edit component. If that is
-    // the case, the user can always manually reload by clicking the breadcrumb.
-    beforeRouteEnter(to, from, next) {
-        if (window.isSameItemInstance(from.fullPath, to.fullPath)) {
-            next((vm) => {
-                vm.setup()
-            })
-        } else {
-            if (to.params && to.params.id) {
-                next((vm) => {
-                    vm.loadRecipeData()
-                })
-            } else {
-                next((vm) => {
-                    vm.setup()
-                })
-            }
-        }
-    },
-    /**
-     * This is one tricky feature of Vue router. If different paths lead to
-     * the same component (such as '/recipe/create' and '/recipe/xxx/edit
-     * or /recipe/xxx/edit and /recipe/yyy/edit)', the view will not automatically
-     * reload. So we have to check for these conditions and reload manually.
-     * This can also be used to confirm that the user wants to leave the page
-     * if there are unsaved changes.
-     */
-    beforeRouteLeave(to, from, next) {
-        // beforeRouteLeave is called when the static route changes.
-        // Cancel the navigation, if the form has unsaved edits and the user did not
-        // confirm leave. This prevents accidentally losing changes
-        if (this.confirmStayInEditedForm()) {
-            next(false)
-        } else {
-            // We have to check if the target component stays the same and reload.
-            // However, we should not reload if the component changes; otherwise
-            // reloaded data may overwrite the data loaded at the target component
-            // which will at the very least result in incorrect breadcrumb path!
-            next()
-        }
-        // Check if we should reload the component content
-        if (this.$window.shouldReloadContent(from.fullPath, to.fullPath)) {
-            this.setup()
-        }
-    },
-    beforeRouteUpdate(to, from, next) {
-        // beforeRouteUpdate is called when the static route stays the same
-        next()
-        // Check if we should reload the component content
-        if (this.$window.shouldReloadContent(from.fullPath, to.fullPath)) {
-            this.setup()
-        }
-    },
-    created() {
-        window.addEventListener("beforeunload", this.beforeWindowUnload)
-    },
 }
 </script>
 
diff --git a/src/components/RecipeImages.vue b/src/components/RecipeImages.vue
index 6a7ea3c90..df52ffbc0 100644
--- a/src/components/RecipeImages.vue
+++ b/src/components/RecipeImages.vue
@@ -6,7 +6,11 @@
             printable: $store.state.recipe.printImage,
         }"
     >
-        <img :src="$store.state.recipe.imageUrl" @click="toggleCollapsed()" />
+        <img
+            :alt="t('cookbook', 'Recipe image')"
+            :src="$store.state.recipe.imageUrl"
+            @click="toggleCollapsed()"
+        />
     </div>
 </template>
 
@@ -19,11 +23,10 @@ export default {
         }
     },
     methods: {
-        toggleCollapsed: function () {
+        toggleCollapsed() {
             this.collapsed = !this.collapsed
         },
     },
-    mounted() {},
 }
 </script>
 
diff --git a/src/components/RecipeIngredient.vue b/src/components/RecipeIngredient.vue
index b599eac95..72458a263 100644
--- a/src/components/RecipeIngredient.vue
+++ b/src/components/RecipeIngredient.vue
@@ -14,7 +14,15 @@
 <script>
 export default {
     name: "RecipeIngredient",
-    props: ["ingredient", "recipeIngredientsHaveSubgroups"],
+    props: {
+        ingredient: {
+            type: String,
+            default: "",
+        },
+        recipeIngredientsHaveSubgroups: {
+            type: Boolean,
+        },
+    },
     data() {
         return {
             headerPrefix: "## ",
@@ -22,7 +30,7 @@ export default {
         }
     },
     computed: {
-        displayIngredient: function () {
+        displayIngredient() {
             if (this.isHeader()) {
                 return this.ingredient.substring(this.headerPrefix.length)
             }
@@ -30,13 +38,10 @@ export default {
         },
     },
     methods: {
-        isHeader: function () {
-            if (this.ingredient.startsWith(this.headerPrefix)) {
-                return true
-            }
-            return false
+        isHeader() {
+            return this.ingredient.startsWith(this.headerPrefix)
         },
-        toggleDone: function () {
+        toggleDone() {
             this.isDone = !this.isDone
         },
     },
diff --git a/src/components/RecipeInstruction.vue b/src/components/RecipeInstruction.vue
index 45d54e264..e7539ff46 100644
--- a/src/components/RecipeInstruction.vue
+++ b/src/components/RecipeInstruction.vue
@@ -5,14 +5,19 @@
 <script>
 export default {
     name: "RecipeInstruction",
-    props: ["instruction"],
+    props: {
+        instruction: {
+            type: String,
+            default: "",
+        },
+    },
     data() {
         return {
             isDone: false,
         }
     },
     methods: {
-        toggleDone: function () {
+        toggleDone() {
             this.isDone = !this.isDone
         },
     },
diff --git a/src/components/RecipeKeyword.vue b/src/components/RecipeKeyword.vue
index 5166e211a..964a3d0b8 100644
--- a/src/components/RecipeKeyword.vue
+++ b/src/components/RecipeKeyword.vue
@@ -1,5 +1,5 @@
 <template>
-    <a v-on:click="clicked" ref="link">
+    <a ref="link" @click="clicked">
         <li>
             <span>{{ name }}</span>
             <span v-if="count != null" class="count">({{ count }})</span>
diff --git a/src/components/RecipeList.vue b/src/components/RecipeList.vue
index 7838fb6a4..ca0130e5e 100644
--- a/src/components/RecipeList.vue
+++ b/src/components/RecipeList.vue
@@ -13,8 +13,8 @@
                     :name="keywordObj.name"
                     :count="keywordObj.count"
                     :title="t('cookbook', 'Toggle keyword')"
-                    @keyword-clicked="keywordClicked(keywordObj)"
                     class="keyword active"
+                    @keyword-clicked="keywordClicked(keywordObj)"
                 />
                 <RecipeKeyword
                     v-for="keywordObj in selectableKeywords"
@@ -22,8 +22,8 @@
                     :name="keywordObj.name"
                     :count="keywordObj.count"
                     :title="t('cookbook', 'Toggle keyword')"
-                    @keyword-clicked="keywordClicked(keywordObj)"
                     class="keyword"
+                    @keyword-clicked="keywordClicked(keywordObj)"
                 />
                 <RecipeKeyword
                     v-for="keywordObj in unavailableKeywords"
@@ -34,16 +34,16 @@
                         // prettier-ignore
                         t('cookbook','Keyword not contained in visible recipes')
                     "
-                    @keyword-clicked="keywordClicked(keywordObj)"
                     class="keyword disabled"
+                    @keyword-clicked="keywordClicked(keywordObj)"
                 />
             </transition-group>
         </div>
         <ul class="recipes">
             <li
                 v-for="recipeObj in recipeObjects"
-                :key="recipeObj.recipe.recipe_id"
                 v-show="recipeObj.show"
+                :key="recipeObj.recipe.recipe_id"
             >
                 <router-link :to="'/recipe/' + recipeObj.recipe.recipe_id">
                     <lazy-picture
@@ -64,16 +64,21 @@
 </template>
 
 <script>
-import LazyPicture from "./LazyPicture"
-import RecipeKeyword from "./RecipeKeyword"
+import LazyPicture from "./LazyPicture.vue"
+import RecipeKeyword from "./RecipeKeyword.vue"
 
 export default {
     name: "RecipeList",
-    props: ["recipes"],
     components: {
         LazyPicture,
         RecipeKeyword,
     },
+    props: {
+        recipes: {
+            type: Array,
+            default: () => [],
+        },
+    },
     data() {
         return {
             // String-based filters applied to the list
@@ -87,15 +92,14 @@ export default {
          * An array of all keywords in all recipes. These are neither sorted nor unique
          */
         rawKeywords() {
-            var keywordArray = this.recipes.map(function (r) {
-                if (!"keywords" in r) {
+            const keywordArray = this.recipes.map((r) => {
+                if (!("keywords" in r)) {
                     return []
                 }
                 if (r.keywords != null) {
                     return r.keywords.split(",")
-                } else {
-                    return []
                 }
+                return []
             })
             return [].concat(...keywordArray)
         },
@@ -112,17 +116,14 @@ export default {
          * An array of objects that contain the keywords plus a count of recipes asociated with these keywords
          */
         keywordsWithCount() {
-            let $this = this
+            const $this = this
             return this.uniqKeywords
-                .map(function (kw) {
-                    return {
-                        name: kw,
-                        count: $this.rawKeywords.filter((kw2) => kw === kw2)
-                            .length,
-                    }
-                })
-                .sort(function (k1, k2) {
-                    if (k1.count != k2.count) {
+                .map((kw) => ({
+                    name: kw,
+                    count: $this.rawKeywords.filter((kw2) => kw === kw2).length,
+                }))
+                .sort((k1, k2) => {
+                    if (k1.count !== k2.count) {
                         // Distinguish by number
                         return k2.count - k1.count
                     }
@@ -152,9 +153,9 @@ export default {
          * An array of all recipes that are part in all filtered keywords
          */
         recipesFilteredByKeywords() {
-            let $this = this
-            return this.recipes.filter(function (r) {
-                if ($this.keywordFilter.length == 0) {
+            const $this = this
+            return this.recipes.filter((r) => {
+                if ($this.keywordFilter.length === 0) {
                     // No filtering, keep all
                     return true
                 }
@@ -163,18 +164,18 @@ export default {
                     return false
                 }
 
-                function keywordInRecipePresent(kw, r) {
-                    if (!r.keywords) {
+                function keywordInRecipePresent(kw, rec) {
+                    if (!rec.keywords) {
                         return false
                     }
 
-                    let keywords = r.keywords.split(",")
+                    const keywords = rec.keywords.split(",")
                     return keywords.includes(kw.name)
                 }
 
                 return $this.selectedKeywords
                     .map((kw) => keywordInRecipePresent(kw, r))
-                    .reduce((l, r) => l && r)
+                    .reduce((l, rec) => l && rec)
             })
         },
         /**
@@ -182,14 +183,12 @@ export default {
          */
         filteredRecipes() {
             let ret = this.recipesFilteredByKeywords
-            let $this = this
+            const $this = this
 
             if (this.filters) {
-                ret = ret.filter(function (r) {
-                    return r.name
-                        .toLowerCase()
-                        .includes($this.filters.toLowerCase())
-                })
+                ret = ret.filter((r) =>
+                    r.name.toLowerCase().includes($this.filters.toLowerCase())
+                )
             }
 
             return ret
@@ -202,17 +201,16 @@ export default {
                 return []
             }
 
-            let $this = this
-            return this.unselectedKeywords.filter(function (kw) {
-                return $this.filteredRecipes
-                    .map(function (r) {
-                        return (
+            const $this = this
+            return this.unselectedKeywords.filter((kw) =>
+                $this.filteredRecipes
+                    .map(
+                        (r) =>
                             r.keywords &&
                             r.keywords.split(",").includes(kw.name)
-                        )
-                    })
+                    )
                     .reduce((l, r) => l || r, false)
-            })
+            )
         },
         /**
          * An array of known keywords that are not associated with any visible recipe
@@ -232,11 +230,17 @@ export default {
             }, this)
         },
     },
+    mounted() {
+        this.$root.$off("applyRecipeFilter")
+        this.$root.$on("applyRecipeFilter", (value) => {
+            this.filters = value
+        })
+    },
     methods: {
         /**
          * Callback for click on keyword, add to or remove from list
          */
-        keywordClicked: function (keyword) {
+        keywordClicked(keyword) {
             const index = this.keywordFilter.indexOf(keyword.name)
             if (index > -1) {
                 this.keywordFilter.splice(index, 1)
@@ -245,12 +249,6 @@ export default {
             }
         },
     },
-    mounted() {
-        this.$root.$off("applyRecipeFilter")
-        this.$root.$on("applyRecipeFilter", (value) => {
-            this.filters = value
-        })
-    },
 }
 </script>
 
diff --git a/src/components/RecipeTimer.vue b/src/components/RecipeTimer.vue
index 2bf9ab6d0..af3b16103 100644
--- a/src/components/RecipeTimer.vue
+++ b/src/components/RecipeTimer.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="time">
         <button
-            v-if="this.timer"
+            v-if="timer"
             type="button"
             :class="countdown === null ? 'icon-play' : 'icon-pause'"
             @click="timerToggle"
@@ -14,7 +14,26 @@
 <script>
 export default {
     name: "RecipeTimer",
-    props: ["value", "phase", "label", "timer"],
+    props: {
+        value: {
+            type: Object,
+            default() {
+                return { hours: 0, minutes: 0 }
+            },
+        },
+        phase: {
+            type: String,
+            default: "",
+        },
+        label: {
+            type: String,
+            default: "",
+        },
+        timer: {
+            type: Boolean,
+            default: false,
+        },
+    },
     data() {
         return {
             countdown: null,
@@ -24,11 +43,6 @@ export default {
             showFullTime: false,
         }
     },
-    watch: {
-        value() {
-            this.resetTimeDisplay()
-        },
-    },
     computed: {
         displayTime: function () {
             let text = ""
@@ -44,11 +58,19 @@ export default {
             return text
         },
     },
+    watch: {
+        value() {
+            this.resetTimeDisplay()
+        },
+    },
+    mounted() {
+        this.resetTimeDisplay()
+    },
     methods: {
-        onTimerEnd: function (button) {
+        onTimerEnd(button) {
             window.clearInterval(this.countdown)
             // I'll just use an alert until this functionality is finished
-            let $this = this
+            const $this = this
             window.setTimeout(function () {
                 // The short timeout is needed or Vue doesn't have time to update the countdown
                 //  display to display 00:00:00
@@ -59,20 +81,20 @@ export default {
                 $this.resetTimeDisplay()
             }, 100)
         },
-        resetTimeDisplay: function () {
+        resetTimeDisplay() {
             if (this.value.hours) {
-                this.hours = parseInt(this.value.hours)
+                this.hours = parseInt(this.value.hours, 10)
             } else {
                 this.hours = 0
             }
             if (this.value.minutes) {
-                this.minutes = parseInt(this.value.minutes)
+                this.minutes = parseInt(this.value.minutes, 10)
             } else {
                 this.minutes = 0
             }
             this.seconds = 0
         },
-        timerToggle: function () {
+        timerToggle() {
             // We will switch to full time display the first time this method is invoked.
             // There should probably also be a way to reset the timer other than by letting
             //  it run its course...
@@ -81,7 +103,7 @@ export default {
             }
             if (this.countdown === null) {
                 // Pass this to callback function
-                let $this = this
+                const $this = this
                 this.countdown = window.setInterval(function () {
                     $this.seconds--
                     if ($this.seconds < 0) {
@@ -106,9 +128,6 @@ export default {
             }
         },
     },
-    mounted() {
-        this.resetTimeDisplay()
-    },
 }
 </script>
 
diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue
index dd7347d14..7cb566c92 100644
--- a/src/components/RecipeView.vue
+++ b/src/components/RecipeView.vue
@@ -5,7 +5,7 @@
             class="header"
             :class="{ responsive: $store.state.recipe.image }"
         >
-            <div class="image" v-if="$store.state.recipe.image">
+            <div v-if="$store.state.recipe.image" class="image">
                 <RecipeImages />
             </div>
 
@@ -22,7 +22,7 @@
                                     // prettier-ignore
                                     t('cookbook','Search recipes with this keyword')
                                 "
-                                v-on:keyword-clicked="keywordClicked(keyword)"
+                                @keyword-clicked="keywordClicked(keyword)"
                             />
                         </ul>
                     </div>
@@ -106,7 +106,7 @@
                                 v-for="(ingredient, idx) in recipe.ingredients"
                                 :key="'ingr' + idx"
                                 :ingredient="ingredient"
-                                :recipeIngredientsHaveSubgroups="
+                                :recipe-ingredients-have-subgroups="
                                     recipeIngredientsHaveSubgroups
                                 "
                             />
@@ -274,13 +274,13 @@
 import axios from "@nextcloud/axios"
 import moment from "@nextcloud/moment"
 
-import RecipeImages from "./RecipeImages"
-import RecipeIngredient from "./RecipeIngredient"
-import RecipeInstruction from "./RecipeInstruction"
-import RecipeKeyword from "./RecipeKeyword"
-import RecipeNutritionInfoItem from "./RecipeNutritionInfoItem"
-import RecipeTimer from "./RecipeTimer"
-import RecipeTool from "./RecipeTool"
+import RecipeImages from "./RecipeImages.vue"
+import RecipeIngredient from "./RecipeIngredient.vue"
+import RecipeInstruction from "./RecipeInstruction.vue"
+import RecipeKeyword from "./RecipeKeyword.vue"
+import RecipeNutritionInfoItem from "./RecipeNutritionInfoItem.vue"
+import RecipeTimer from "./RecipeTimer.vue"
+import RecipeTool from "./RecipeTool.vue"
 
 export default {
     name: "RecipeView",
@@ -299,7 +299,7 @@ export default {
         }
     },
     computed: {
-        recipe: function () {
+        recipe() {
             let recipe = {
                 description: "",
                 ingredients: [],
@@ -343,33 +343,33 @@ export default {
             }
 
             if (this.$store.state.recipe.cookTime) {
-                let cookT = this.$store.state.recipe.cookTime.match(
+                const cookT = this.$store.state.recipe.cookTime.match(
                     /PT(\d+?)H(\d+?)M/
                 )
-                let hh = parseInt(cookT[1]),
-                    mm = parseInt(cookT[2])
+                const hh = parseInt(cookT[1], 10)
+                const mm = parseInt(cookT[2], 10)
                 if (hh > 0 || mm > 0) {
                     recipe.timerCook = { hours: hh, minutes: mm }
                 }
             }
 
             if (this.$store.state.recipe.prepTime) {
-                let prepT = this.$store.state.recipe.prepTime.match(
+                const prepT = this.$store.state.recipe.prepTime.match(
                     /PT(\d+?)H(\d+?)M/
                 )
-                let hh = parseInt(prepT[1]),
-                    mm = parseInt(prepT[2])
+                const hh = parseInt(prepT[1], 10)
+                const mm = parseInt(prepT[2], 10)
                 if (hh > 0 || mm > 0) {
                     recipe.timerPrep = { hours: hh, minutes: mm }
                 }
             }
 
             if (this.$store.state.recipe.totalTime) {
-                let totalT = this.$store.state.recipe.totalTime.match(
+                const totalT = this.$store.state.recipe.totalTime.match(
                     /PT(\d+?)H(\d+?)M/
                 )
-                let hh = parseInt(totalT[1]),
-                    mm = parseInt(totalT[2])
+                const hh = parseInt(totalT[1], 10)
+                const mm = parseInt(totalT[2], 10)
                 if (hh > 0 || mm > 0) {
                     recipe.timerTotal = { hours: hh, minutes: mm }
                 }
@@ -382,7 +382,7 @@ export default {
             }
 
             if (this.$store.state.recipe.dateCreated) {
-                let date = this.parseDateTime(
+                const date = this.parseDateTime(
                     this.$store.state.recipe.dateCreated
                 )
                 recipe.dateCreated =
@@ -390,7 +390,7 @@ export default {
             }
 
             if (this.$store.state.recipe.dateModified) {
-                let date = this.parseDateTime(
+                const date = this.parseDateTime(
                     this.$store.state.recipe.dateModified
                 )
                 recipe.dateModified =
@@ -408,7 +408,7 @@ export default {
 
             return recipe
         },
-        recipeIngredientsHaveSubgroups: function () {
+        recipeIngredientsHaveSubgroups() {
             if (this.recipe.ingredients && this.recipe.ingredients.length > 0) {
                 for (let idx = 0; idx < this.recipe.ingredients.length; ++idx) {
                     if (
@@ -422,16 +422,17 @@ export default {
             }
             return false
         },
-        showCreatedDate: function () {
+        showCreatedDate() {
             if (!this.recipe.dateCreated) {
                 return false
             }
             return true
         },
-        showModifiedDate: function () {
+        showModifiedDate() {
             if (!this.recipe.dateModified) {
                 return false
-            } else if (
+            }
+            if (
                 this.$store.state.recipe.dateCreated &&
                 this.$store.state.recipe.dateModified &&
                 this.$store.state.recipe.dateCreated ===
@@ -442,7 +443,7 @@ export default {
             }
             return true
         },
-        showNutritions: function () {
+        showNutritions() {
             return (
                 this.recipe.nutrition &&
                 !(this.recipe.nutrition instanceof Array) &&
@@ -450,8 +451,16 @@ export default {
             )
         },
     },
+    mounted() {
+        this.setup()
+        // Register data load method hook for access from the controls components
+        this.$root.$off("reloadRecipeView")
+        this.$root.$on("reloadRecipeView", () => {
+            this.setup()
+        })
+    },
     methods: {
-        escapeHtml: function (unsafeString) {
+        escapeHtml(unsafeString) {
             return unsafeString
                 .replace(/&/g, "&amp;")
                 .replace(/\~/g, "&#732;")
@@ -460,9 +469,9 @@ export default {
                 .replace(/"/g, "&quot;")
                 .replace(/'/g, "&#039;")
         },
-        convertRecipeReferences: function (text) {
-            let re = /(^|\s|[,._+&?!-])#r\/(\d+)(?=$|\s|[.,_+&?!-])/g
-            let converted = text.replace(
+        convertRecipeReferences(text) {
+            const re = /(^|\s|[,._+&?!-])#r\/(\d+)(?=$|\s|[.,_+&?!-])/g
+            const converted = text.replace(
                 re,
                 '$1<a class="recipe-reference-inline" href="' +
                     this.$window.baseUrl +
@@ -470,13 +479,13 @@ export default {
             )
             return converted
         },
-        isNullOrEmpty: function (str) {
+        isNullOrEmpty(str) {
             return !str || (typeof str === "string" && 0 === str.trim().length)
         },
         /**
          * Callback for click on keyword
          */
-        keywordClicked: function (keyword) {
+        keywordClicked(keyword) {
             if (keyword) {
                 this.$router.push("/tags/" + keyword)
             }
@@ -484,15 +493,15 @@ export default {
         /* The schema.org standard requires the dates formatted as Date (https://schema.org/Date)
          * or DateTime (https://schema.org/DateTime). This follows the ISO 8601 standard.
          */
-        parseDateTime: function (dt) {
+        parseDateTime(dt) {
             if (!dt) return null
-            var date = moment(dt, moment.ISO_8601)
+            const date = moment(dt, moment.ISO_8601)
             if (!date.isValid()) {
                 return null
             }
             return date
         },
-        setup: function () {
+        setup() {
             // Make the control row show that a recipe is loading
             if (!this.$store.state.recipe) {
                 this.$store.dispatch("setLoadingRecipe", { recipe: -1 })
@@ -512,7 +521,7 @@ export default {
                 })
             }
 
-            let $this = this
+            const $this = this
 
             axios
                 .get(
@@ -521,9 +530,9 @@ export default {
                         this.$route.params.id
                 )
                 .then(function (response) {
-                    let recipe = response.data
+                    const recipe = response.data
                     // Store recipe data in vuex
-                    $this.$store.dispatch("setRecipe", { recipe: recipe })
+                    $this.$store.dispatch("setRecipe", { recipe })
 
                     // Always set the active page last!
                     $this.$store.dispatch("setPage", { page: "recipe" })
@@ -547,14 +556,6 @@ export default {
                 })
         },
     },
-    mounted() {
-        this.setup()
-        // Register data load method hook for access from the controls components
-        this.$root.$off("reloadRecipeView")
-        this.$root.$on("reloadRecipeView", () => {
-            this.setup()
-        })
-    },
     /**
      * This is one tricky feature of Vue router. If different paths lead to
      * the same component (such as '/recipe/xxx' and '/recipe/yyy)',
@@ -783,8 +784,7 @@ main {
     width: 36px;
     height: 36px;
     border: 1px solid var(--color-border-dark);
-    margin: 0 1rem 1rem 0;
-    margin-top: -6px;
+    margin: -6px 1rem 1rem 0;
     background-color: var(--color-background-dark);
     background-position: center;
     background-repeat: no-repeat;
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index ad295f55f..bff7d9061 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -7,14 +7,19 @@
 <script>
 import axios from "@nextcloud/axios"
 
-import RecipeList from "./RecipeList"
+import RecipeList from "./RecipeList.vue"
 
 export default {
     name: "Search",
     components: {
         RecipeList,
     },
-    props: ["query"],
+    props: {
+        query: {
+            type: String,
+            default: "",
+        },
+    },
     data() {
         return {
             results: [],
@@ -25,28 +30,41 @@ export default {
             this.keywordFilter = []
         },
     },
+    mounted() {
+        this.setup()
+        this.$root.$off("categoryRenamed")
+        this.$root.$on("categoryRenamed", (val) => {
+            if (
+                !this._inactive &&
+                this.query === "cat" &&
+                this.$route.params.value === val[1]
+            ) {
+                this.$window.goTo("/category/" + val[0])
+            }
+        })
+    },
     methods: {
-        setup: function () {
+        setup() {
             // TODO: This is a mess of different implementation styles, needs cleanup
             if (this.query === "name") {
                 // Search by name
                 // TODO
             } else if (this.query === "tags") {
                 // Search by tags
-                let $this = this
-                let tags = this.$route.params.value
+                const $this = this
+                const tags = this.$route.params.value
                 axios
                     .get(this.$window.baseUrl + "/api/tags/" + tags)
-                    .then(function (response) {
+                    .then((response) => {
                         $this.results = response.data
                     })
-                    .catch(function (e) {
+                    .catch((e) => {
                         $this.results = []
                         alert(
                             // prettier-ignore
-                            t("cookbook","Failed to load recipes with keywords: {tags}", 
+                            t("cookbook","Failed to load recipes with keywords: {tags}",
                                 {
-                                    tags: tags
+                                    tags
                                 }
                             )
                         )
@@ -56,14 +74,14 @@ export default {
                     })
             } else if (this.query === "cat") {
                 // Search by category
-                let $this = this
-                let cat = this.$route.params.value
+                const $this = this
+                const cat = this.$route.params.value
                 axios
                     .get(this.$window.baseUrl + "/api/category/" + cat)
-                    .then(function (response) {
+                    .then((response) => {
                         $this.results = response.data
                     })
-                    .catch(function (e) {
+                    .catch((e) => {
                         $this.results = []
                         alert(
                             // prettier-ignore
@@ -79,14 +97,14 @@ export default {
                     })
             } else {
                 // General search
-                let $this = this
+                const $this = this
                 axios
                     .get(
                         this.$window.baseUrl +
                             "/api/search/" +
                             this.$route.params.value
                     )
-                    .then(function (response) {
+                    .then((response) => {
                         $this.results = response.data
                     })
                     .catch((e) => {
@@ -101,19 +119,6 @@ export default {
             this.$store.dispatch("setPage", { page: "search" })
         },
     },
-    mounted() {
-        this.setup()
-        this.$root.$off("categoryRenamed")
-        this.$root.$on("categoryRenamed", (val) => {
-            if (
-                !this._inactive &&
-                this.query == "cat" &&
-                this.$route.params.value == val[1]
-            ) {
-                this.$window.goTo("/category/" + val[0])
-            }
-        })
-    },
     beforeRouteUpdate(to, from, next) {
         // Move to next route as expected
         next()
diff --git a/src/guest.js b/src/guest.js
index 8040ec3e9..2db4d137b 100644
--- a/src/guest.js
+++ b/src/guest.js
@@ -8,7 +8,7 @@
 import Vue from "vue"
 import store from "./store"
 
-import AppInvalidGuest from "./components/AppInvalidGuest"
+import AppInvalidGuest from "./components/AppInvalidGuest.vue"
 ;(function (OC, window) {
     "use strict"
 
@@ -25,7 +25,7 @@ import AppInvalidGuest from "./components/AppInvalidGuest"
     Vue.prototype.t = window.t
 
     // Start the app once document is done loading
-    document.addEventListener("DOMContentLoaded", function (event) {
+    document.addEventListener("DOMContentLoaded", (event) => {
         const App = Vue.extend(AppInvalidGuest)
         new App({
             store,
diff --git a/src/main.js b/src/main.js
index 2dd43ef78..3b16faa75 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,19 +5,16 @@
  * @license AGPL3 or later
  */
 
-// TODO: Agree on a markdown parser
+// Markdown
+import VueShowdown from "vue-showdown"
+import Editor from "v-markdown-editor"
+import "v-markdown-editor/dist/v-markdown-editor.css"
 
 import Vue from "vue"
 import router from "./router"
 import store from "./store"
 
-//import AppNavi from './components/AppNavi'
-import AppMain from "./components/AppMain"
-
-//Markdown
-import VueShowdown from "vue-showdown"
-import Editor from "v-markdown-editor"
-import "v-markdown-editor/dist/v-markdown-editor.css"
+import AppMain from "./components/AppMain.vue"
 ;(function (OC, window) {
     "use strict"
 
@@ -32,8 +29,8 @@ import "v-markdown-editor/dist/v-markdown-editor.css"
             return false // Obviously should not if both routes are the same
         }
 
-        let comps1 = url1.split("/")
-        let comps2 = url2.split("/")
+        const comps1 = url1.split("/")
+        const comps2 = url2.split("/")
 
         if (comps1.length < 2 || comps2.length < 2) {
             return false // Just a failsafe, this should never happen
@@ -57,7 +54,8 @@ import "v-markdown-editor/dist/v-markdown-editor.css"
             }
 
             return false
-        } else if (comps1.pop() === "create") {
+        }
+        if (comps1.pop() === "create") {
             // But, if we are moving from create to view, do not reload
             // the create component
             return false
@@ -74,8 +72,8 @@ import "v-markdown-editor/dist/v-markdown-editor.css"
         if (url1 === url2) {
             return true // Obviously true if the routes are the same
         }
-        let comps1 = url1.split("/")
-        let comps2 = url2.split("/")
+        const comps1 = url1.split("/")
+        const comps2 = url2.split("/")
         if (comps1.length < 2 || comps2.length < 2) {
             return false // Just a failsafe, this should never happen
         }
@@ -89,16 +87,12 @@ import "v-markdown-editor/dist/v-markdown-editor.css"
             // either of the urls have less than three components
             return false
         }
-        if (comps1[2] !== comps2[2]) {
-            // Different IDs, not same instance
-            return false
-        }
-        return true
+        return comps1[2] === comps2[2]
     }
 
     // A simple function to sanitize HTML tags
     window.escapeHTML = function (text) {
-        return text.replace(/[\"&'\/<>]/g, function (a) {
+        return text.replace(/[\"&'\/<>]/g, (a) => {
             return {
                 "&": "&amp;",
                 '"': "&quot;",
@@ -124,9 +118,11 @@ import "v-markdown-editor/dist/v-markdown-editor.css"
             } else {
                 return value.replace(",", ".")
             }
-        } else if (io === "o") {
+        }
+        if (io === "o") {
             return value.toString().replace(".", ",")
         }
+        return ""
     }
 
     // This will replace the PHP function nl2br in Vue components
@@ -172,9 +168,9 @@ import "v-markdown-editor/dist/v-markdown-editor.css"
     Vue.prototype.$window = window
     Vue.prototype.OC = OC
 
-    //Markdown for Vue
+    // Markdown for Vue
     Vue.use(VueShowdown, {
-        //set default flavor for Markdown
+        // set default flavor for Markdown
         flavor: "vanilla",
     })
     Vue.use(Editor)
@@ -183,7 +179,7 @@ import "v-markdown-editor/dist/v-markdown-editor.css"
     Vue.prototype.t = window.t
 
     // Start the app once document is done loading
-    document.addEventListener("DOMContentLoaded", function (event) {
+    document.addEventListener("DOMContentLoaded", (event) => {
         const App = Vue.extend(AppMain)
         new App({
             store,
diff --git a/src/router/index.js b/src/router/index.js
index 40b2a49a1..48e7ff47f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,11 +7,11 @@
 import Vue from "vue"
 import VueRouter from "vue-router"
 
-import Index from "../components/AppIndex"
-import NotFound from "../components/NotFound"
-import RecipeView from "../components/RecipeView"
-import RecipeEdit from "../components/RecipeEdit"
-import Search from "../components/SearchResults"
+import Index from "../components/AppIndex.vue"
+import NotFound from "../components/NotFound.vue"
+import RecipeView from "../components/RecipeView.vue"
+import RecipeEdit from "../components/RecipeEdit.vue"
+import Search from "../components/SearchResults.vue"
 
 Vue.use(VueRouter)
 
diff --git a/src/store/index.js b/src/store/index.js
index 6e269bc23..5e5b73ede 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -140,8 +140,8 @@ export default new Vuex.Store({
             c.commit("setCategoryUpdating", { c: category })
         },
         updateCategoryName(c, { categoryNames }) {
-            let oldName = categoryNames[0],
-                newName = categoryNames[1]
+            const oldName = categoryNames[0]
+            const newName = categoryNames[1]
             c.dispatch("setCategoryUpdating", { category: oldName })
 
             const request = axios({
@@ -154,12 +154,12 @@ export default new Vuex.Store({
             })
 
             request
-                .then(function (response) {
-                    if (c.state.recipe.recipeCategory == oldName) {
+                .then((response) => {
+                    if (c.state.recipe.recipeCategory === oldName) {
                         c.state.recipe.recipeCategory = newName
                     }
                 })
-                .catch(function (e) {
+                .catch((e) => {
                     if (e && e instanceof Error) {
                         throw e
                     }

From c9a7011f290b89852fed4fce442beb74e7968e9c Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Thu, 25 Feb 2021 13:25:10 +0100
Subject: [PATCH 2/5] Updated CHANGELOG

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36688b009..561248e23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@
   [#607](https://github.com/nextcloud/cookbook/pull/607) @christianlupus
 - Enforce CSS styling using stylelint
   [#608](https://github.com/nextcloud/cookbook/pull/608) @christianlupus
+- More code styling, cleanup & minor bugfixes
+  [#615](https://github.com/nextcloud/cookbook/pull/615) @seyfeb
 
 ## Deprecated
 - Obsolete routes to old user interface, see `appinfo/routes.php`

From 747e532333aebe92375bc30f1f11770084d3bb35 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Thu, 25 Feb 2021 21:07:15 +0100
Subject: [PATCH 3/5] Updated eslint configuration

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 .eslintrc.yml           | 9 +++++++++
 src/store/.eslintrc.yml | 8 ++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 src/store/.eslintrc.yml

diff --git a/.eslintrc.yml b/.eslintrc.yml
index 2c39435f3..271427fe3 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -9,3 +9,12 @@ extends:
     - "plugin:vue/strongly-recommended"
     - "plugin:vue/recommended"
     - prettier
+
+globals:
+    OC:
+    t:
+
+rules:
+    no-plusplus:
+        - error
+        - allowForLoopAfterthoughts: true
diff --git a/src/store/.eslintrc.yml b/src/store/.eslintrc.yml
new file mode 100644
index 000000000..f01dda6cb
--- /dev/null
+++ b/src/store/.eslintrc.yml
@@ -0,0 +1,8 @@
+extends: "../../.eslintrc.yml"
+
+rules:
+    no-param-reassign:
+        - error
+        - props: true
+          ignorePropertyModificationsFor:
+              - state

From fd1e2eb3ff40d728e7b3d5faec72eea4522b4d93 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Thu, 25 Feb 2021 21:20:27 +0100
Subject: [PATCH 4/5] Changes to make code compatible with eslint settings

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/AppIndex.vue                  |  4 +-
 src/components/AppInvalidGuest.vue           |  6 +-
 src/components/AppNavi.vue                   | 38 ++++----
 src/components/AppSettings.vue               | 33 ++++---
 src/components/EditInputField.vue            |  5 +-
 src/components/EditInputGroup.vue            | 42 +++++----
 src/components/EditMultiselectInputGroup.vue |  6 +-
 src/components/EditMultiselectPopup.vue      |  2 +-
 src/components/EditTimeField.vue             | 13 ++-
 src/components/LazyPicture.vue               |  1 -
 src/components/RecipeEdit.vue                | 32 +++++--
 src/components/RecipeIngredient.vue          |  7 +-
 src/components/RecipeInstruction.vue         |  2 +-
 src/components/RecipeList.vue                |  7 +-
 src/components/RecipeTimer.vue               | 23 ++---
 src/components/RecipeView.vue                | 94 +++++++++-----------
 src/components/SearchResults.vue             | 27 +++---
 src/guest.js                                 |  8 +-
 src/main.js                                  | 74 ++++++++-------
 src/store/index.js                           | 76 ++++++++--------
 20 files changed, 272 insertions(+), 228 deletions(-)

diff --git a/src/components/AppIndex.vue b/src/components/AppIndex.vue
index dd483a339..6570727ed 100644
--- a/src/components/AppIndex.vue
+++ b/src/components/AppIndex.vue
@@ -47,14 +47,14 @@ export default {
         loadAll() {
             const $this = this
             axios
-                .get(this.$window.baseUrl + "/api/recipes")
+                .get(`${this.$window.baseUrl}/api/recipes`)
                 .then((response) => {
                     $this.recipes = response.data
 
                     // Always set page name last
                     $this.$store.dispatch("setPage", { page: "index" })
                 })
-                .catch((e) => {
+                .catch(() => {
                     // Always set page name last
                     $this.$store.dispatch("setPage", { page: "index" })
                 })
diff --git a/src/components/AppInvalidGuest.vue b/src/components/AppInvalidGuest.vue
index 8a971dd8f..60ad1e337 100644
--- a/src/components/AppInvalidGuest.vue
+++ b/src/components/AppInvalidGuest.vue
@@ -34,18 +34,18 @@ export default {
         AppContent,
     },
     methods: {
-        selectFolder(e) {
+        selectFolder() {
             OC.dialogs.filepicker(
                 t("cookbook", "Path to your recipe collection"),
                 (path) => {
                     this.$store
                         .dispatch("updateRecipeDirectory", { dir: path })
                         .then(() => {
-                            location.reload()
+                            window.location.reload()
                         })
                 },
                 false, // Single result
-                "httpd/unix-directory", // Desired MIME type
+                ["httpd/unix-directory"], // Desired MIME type
                 true // Make modal dialog
             )
         },
diff --git a/src/components/AppNavi.vue b/src/components/AppNavi.vue
index 8b7d8bdda..24a088ac7 100644
--- a/src/components/AppNavi.vue
+++ b/src/components/AppNavi.vue
@@ -193,12 +193,13 @@ export default {
             Vue.set(this.isCategoryUpdating, idx, true)
 
             axios
-                .get(this.$window.baseUrl + "/api/category/" + cat.name)
+                .get(`${this.$window.baseUrl}/api/category/${cat.name}`)
                 .then((response) => {
                     cat.recipes = response.data
                 })
                 .catch((e) => {
                     cat.recipes = []
+                    // eslint-disable-next-line no-alert
                     alert(
                         // prettier-ignore
                         t("cookbook","Failed to load category {category} recipes",
@@ -232,11 +233,12 @@ export default {
                 .dispatch("updateCategoryName", {
                     categoryNames: [oldName, newName],
                 })
-                .then((response) => {
+                .then(() => {
                     $this.categories[idx].name = newName
                     $this.$root.$emit("categoryRenamed", [newName, oldName])
                 })
                 .catch((e) => {
+                    // eslint-disable-next-line no-alert
                     alert(
                         // prettier-ignore
                         t("cookbook",'Failed to update name of category "{category}"',
@@ -262,23 +264,23 @@ export default {
             this.downloading = true
             const $this = this
             axios({
-                url: this.$window.baseUrl + "/import",
+                url: `${this.$window.baseUrl}/import`,
                 method: "POST",
-                data: "url=" + e.target[1].value,
+                data: `url=${e.target[1].value}`,
             })
                 .then((response) => {
                     const recipe = response.data
                     $this.downloading = false
-                    $this.$window.goTo("/recipe/" + recipe.id)
-                    e.target[1].value = ""
+                    $this.$window.goTo(`/recipe/${recipe.id}`)
                     // Refresh left navigation pane to display changes
                     $this.$store.dispatch("setAppNavigationRefreshRequired", {
                         isRequired: true,
                     })
                 })
-                .catch((e) => {
+                .catch((e2) => {
                     $this.downloading = false
-                    alert(t("cookbook", e.request.responseJSON))
+                    // eslint-disable-next-line no-alert
+                    alert(t("cookbook", e2.request.responseJSON))
                 })
         },
 
@@ -289,7 +291,7 @@ export default {
             const $this = this
             this.loading.categories = true
             axios
-                .get(this.$window.baseUrl + "/categories")
+                .get(`${this.$window.baseUrl}/categories`)
                 .then((response) => {
                     const json = response.data || []
                     // Reset the old values
@@ -321,14 +323,17 @@ export default {
                     $this.$nextTick(() => {
                         for (let i = 0; i < $this.categories.length; i++) {
                             // Reload recipes in open categories
-                            if (!$this.$refs["app-navi-cat-" + i]) {
+                            if (!$this.$refs[`app-navi-cat-${i}`]) {
+                                // eslint-disable-next-line no-continue
                                 continue
                             }
-                            if ($this.$refs["app-navi-cat-" + i][0].opened) {
+                            if ($this.$refs[`app-navi-cat-${i}`][0].opened) {
+                                // eslint-disable-next-line no-console
                                 console.log(
-                                    "Reloading recipes in " +
-                                        $this.$refs["app-navi-cat-" + i][0]
+                                    `Reloading recipes in ${
+                                        $this.$refs[`app-navi-cat-${i}`][0]
                                             .title
+                                    }`
                                 )
                                 $this.categoryOpen(i)
                             }
@@ -341,6 +346,7 @@ export default {
                     })
                 })
                 .catch((e) => {
+                    // eslint-disable-next-line no-alert
                     alert(t("cookbook", "Failed to fetch categories"))
                     if (e && e instanceof Error) {
                         throw e
@@ -363,11 +369,12 @@ export default {
             }
             this.scanningLibrary = true
             axios({
-                url: this.$window.baseUrl + "/reindex",
+                url: `${this.$window.baseUrl}/reindex`,
                 method: "POST",
             })
                 .then(() => {
                     $this.scanningLibrary = false
+                    // eslint-disable-next-line no-console
                     console.log("Library reindexing complete")
                     $this.getCategories()
                     if (
@@ -377,8 +384,9 @@ export default {
                         $this.$router.go()
                     }
                 })
-                .catch((e) => {
+                .catch(() => {
                     $this.scanningLibrary = false
+                    // eslint-disable-next-line no-console
                     console.log("Library reindexing failed!")
                 })
         },
diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
index c790c8acc..9791b0da3 100644
--- a/src/components/AppSettings.vue
+++ b/src/components/AppSettings.vue
@@ -90,14 +90,15 @@ export default {
                 return
             }
             axios({
-                url: this.$window.baseUrl + "/config",
+                url: `${this.$window.baseUrl}/config`,
                 method: "POST",
                 data: { print_image: newVal ? 1 : 0 },
             })
-                .then((response) => {
+                .then(() => {
                     // Should this check the response of the query? To catch some errors that redirect the page
                 })
-                .catch((e) => {
+                .catch(() => {
+                    // eslint-disable-next-line no-alert
                     alert(
                         // prettier-ignore
                         t("cookbook","Could not set preference for image printing")
@@ -113,14 +114,15 @@ export default {
                 return
             }
             axios({
-                url: this.$window.baseUrl + "/config",
+                url: `${this.$window.baseUrl}/config`,
                 method: "POST",
                 data: { update_interval: newVal },
             })
-                .then((response) => {
+                .then(() => {
                     // Should this check the response of the query? To catch some errors that redirect the page
                 })
-                .catch((e) => {
+                .catch(() => {
+                    // eslint-disable-next-line no-alert
                     alert(
                         // prettier-ignore
                         t("cookbook","Could not set recipe update interval to {interval}",
@@ -141,7 +143,7 @@ export default {
         /**
          * Select a recipe folder using the Nextcloud file picker
          */
-        pickRecipeFolder(e) {
+        pickRecipeFolder() {
             OC.dialogs.filepicker(
                 t("cookbook", "Path to your recipe collection"),
                 (path) => {
@@ -154,7 +156,8 @@ export default {
                                 $this.$router.push("/")
                             }
                         })
-                        .catch((e) => {
+                        .catch(() => {
+                            // eslint-disable-next-line no-alert
                             alert(
                                 // prettier-ignore
                                 t("cookbook","Could not set recipe folder to {path}",
@@ -166,7 +169,7 @@ export default {
                         })
                 },
                 false,
-                "httpd/unix-directory",
+                ["httpd/unix-directory"],
                 true
             )
         },
@@ -176,7 +179,7 @@ export default {
          */
         setup() {
             axios({
-                url: this.$window.baseUrl + "/config",
+                url: `${this.$window.baseUrl}/config`,
                 method: "GET",
                 data: null,
             })
@@ -184,14 +187,16 @@ export default {
                     const config = response.data
                     this.resetPrintImage = false
                     if (config) {
-                        this.printImage = config["print_image"]
-                        this.updateInterval = config["update_interval"]
-                        this.recipeFolder = config["folder"]
+                        this.printImage = config.print_image
+                        this.updateInterval = config.update_interval
+                        this.recipeFolder = config.folder
                     } else {
+                        // eslint-disable-next-line no-alert
                         alert(t("cookbook", "Loading config failed"))
                     }
                 })
-                .catch((e) => {
+                .catch(() => {
+                    // eslint-disable-next-line no-alert
                     alert(t("cookbook", "Loading config failed"))
                 })
         },
diff --git a/src/components/EditInputField.vue b/src/components/EditInputField.vue
index 6dface87a..afe5fed1b 100644
--- a/src/components/EditInputField.vue
+++ b/src/components/EditInputField.vue
@@ -44,6 +44,7 @@ export default {
             default: false,
         },
         // Value (passed in v-model)
+        // eslint-disable-next-line vue/require-prop-types
         value: {
             default: "",
             required: true,
@@ -61,7 +62,7 @@ export default {
         },
     },
     methods: {
-        handleInput(e) {
+        handleInput() {
             this.$emit("input", this.content)
         },
         /**
@@ -117,7 +118,7 @@ export default {
         },
         pasteCanceled() {
             // set cursor to position after pasted string
-            this.$nextTick(function () {
+            this.$nextTick(function foc() {
                 const field = this.$refs.inputField
                 if (this.fieldType === "markdown") {
                     field.editor.setCursor(this.lastCursorPosition)
diff --git a/src/components/EditInputGroup.vue b/src/components/EditInputGroup.vue
index 039ea4903..b4b8f2146 100644
--- a/src/components/EditInputGroup.vue
+++ b/src/components/EditInputGroup.vue
@@ -63,7 +63,7 @@ export default {
     props: {
         value: {
             type: Array,
-            default: [],
+            default: () => [],
         },
         fieldType: {
             type: String,
@@ -116,17 +116,18 @@ export default {
          * the content is inserted into the newly created field
          * */
         addNewEntry(index = -1, focusAfterInsert = true, content = "") {
-            if (index === -1) {
-                index = this.buffer.length
+            let entryIdx = index
+            if (entryIdx === -1) {
+                entryIdx = this.buffer.length
             }
-            this.buffer.splice(index, 0, content)
+            this.buffer.splice(entryIdx, 0, content)
 
             if (focusAfterInsert) {
                 // const $this = this
-                this.$nextTick(function () {
+                this.$nextTick(function foc() {
                     const listFields = this.$refs["list-field"]
-                    if (listFields.length > index) {
-                        listFields[index].focus()
+                    if (listFields.length > entryIdx) {
+                        listFields[entryIdx].focus()
                     }
                 })
             }
@@ -141,9 +142,9 @@ export default {
         /**
          * Handle typing in input or field or textarea
          */
-        handleInput(e) {
+        handleInput() {
             // wait a tick to check if content was typed or pasted
-            this.$nextTick(function () {
+            this.$nextTick(function handlePastedOrTyped() {
                 if (this.contentPasted) {
                     this.contentPasted = false
 
@@ -167,16 +168,15 @@ export default {
 
             // get data from clipboard to keep newline characters, which are stripped
             // from the data pasted in the input field (e.target.value)
-            var clipboardData = e.clipboardData || window.clipboardData
-            var pastedData = clipboardData.getData("Text")
+            const clipboardData = e.clipboardData || window.clipboardData
+            const pastedData = clipboardData.getData("Text")
             const inputLinesArray = pastedData.split(/\r\n|\r|\n/g)
 
             if (inputLinesArray.length === 1) {
                 this.singleLinePasted = true
                 return
-            } else {
-                this.singleLinePasted = false
             }
+            this.singleLinePasted = false
 
             e.preventDefault()
 
@@ -202,12 +202,12 @@ export default {
             }
             this.$emit("input", this.buffer)
 
-            this.$nextTick(function () {
+            this.$nextTick(function foc() {
                 let indexToFocus = $insertedIndex + inputLinesArray.length
                 // Delete field if it's empty
                 if (this.buffer[$insertedIndex].trim() === "") {
                     this.deleteEntry($insertedIndex)
-                    indexToFocus--
+                    indexToFocus -= 1
                 }
                 this.$refs["list-field"][indexToFocus].focus()
                 this.contentPasted = false
@@ -232,18 +232,21 @@ export default {
                 e.preventDefault()
                 const $li = e.currentTarget.closest("li")
                 const $ul = $li.closest("ul")
-                let $pressed_li_index = Array.prototype.indexOf.call(
+                // eslint-disable-next-line camelcase
+                const $pressed_li_index = Array.prototype.indexOf.call(
                     $ul.childNodes,
                     $li
                 )
 
                 if (e.keyCode === 13 || e.keyCode === 10) {
                     if (
+                        // eslint-disable-next-line camelcase
                         $pressed_li_index >=
                         this.$refs["list-field"].length - 1
                     ) {
                         this.addNewEntry()
                     } else {
+                        // eslint-disable-next-line camelcase
                         $ul.children[$pressed_li_index + 1]
                             .getElementsByTagName("input")[0]
                             .focus()
@@ -267,6 +270,7 @@ export default {
                         this.$parent.$emit("showRecipeReferencesPopup", {
                             context: this,
                         })
+                        // eslint-disable-next-line camelcase
                         this.lastFocusedFieldIndex = $pressed_li_index
                         this.lastCursorPosition = cursorPos
                     }
@@ -298,7 +302,7 @@ export default {
         pasteCanceled() {
             const field = this.$refs["list-field"][this.lastFocusedFieldIndex]
             // set cursor back to previous position
-            this.$nextTick(function () {
+            this.$nextTick(function foc() {
                 field.focus()
                 field.setSelectionRange(
                     this.lastCursorPosition,
@@ -323,8 +327,8 @@ export default {
 
             // set cursor to position after pasted string. Waiting two ticks is necessary for
             // the data to be updated in the field
-            this.$nextTick(function () {
-                this.$nextTick(function () {
+            this.$nextTick(function delayedFocus() {
+                this.$nextTick(function foc() {
                     this.ignoreNextKeyUp = ignoreKeyup
                     field.focus()
                     const newCursorPos = this.lastCursorPosition + str.length
diff --git a/src/components/EditMultiselectInputGroup.vue b/src/components/EditMultiselectInputGroup.vue
index 9e524e585..a833b2f31 100644
--- a/src/components/EditMultiselectInputGroup.vue
+++ b/src/components/EditMultiselectInputGroup.vue
@@ -118,6 +118,7 @@ export default {
         },
         options: {
             deep: true,
+            // eslint-disable-next-line no-unused-vars
             handler(val, oldVal) {
                 this.updateLocalValues()
             },
@@ -144,7 +145,7 @@ export default {
          */
         optionUpdated(idx, val) {
             if (
-                idx == this.selectedOptions.length &&
+                idx === this.selectedOptions.length &&
                 typeof this.filledValues[idx] === "undefined"
             ) {
                 this.filledValues[idx] = ""
@@ -181,7 +182,7 @@ export default {
         /**
          * Get a list of not yet selected options.
          */
-        selectableOptions(idx) {
+        selectableOptions() {
             if (!(this.selectedOptions instanceof Array)) {
                 return []
             }
@@ -205,6 +206,7 @@ export default {
             // show only fields made available in passed `options`
             this.selectedOptions = []
             this.filledValues = []
+            // eslint-disable-next-line no-restricted-syntax, prefer-const
             for (let key in this.localValue) {
                 if (this.options.map((o) => o.key).includes(key)) {
                     const opt = this.options.filter((o) => o.key === key)
diff --git a/src/components/EditMultiselectPopup.vue b/src/components/EditMultiselectPopup.vue
index 427528ab4..cbba6bde7 100644
--- a/src/components/EditMultiselectPopup.vue
+++ b/src/components/EditMultiselectPopup.vue
@@ -45,7 +45,7 @@ export default {
         },
     },
     methods: {
-        closePopup(opt) {
+        closePopup() {
             this.$parent.$emit("ms-popup-selection-canceled")
         },
         optionSelected(opt) {
diff --git a/src/components/EditTimeField.vue b/src/components/EditTimeField.vue
index 096b43fb3..5bf9ccff6 100644
--- a/src/components/EditTimeField.vue
+++ b/src/components/EditTimeField.vue
@@ -27,10 +27,10 @@ export default {
         value: {
             type: Object,
             required: true,
-            default: {
+            default: () => ({
                 time: [null, null],
                 paddedTime: null,
-            },
+            }),
         },
         fieldLabel: {
             type: String,
@@ -45,8 +45,7 @@ export default {
     },
     watch: {
         value() {
-            this.hours = this.value.time[0]
-            this.minutes = this.value.time[1]
+            ;[this.hours, this.minutes] = this.value.time
         },
     },
     methods: {
@@ -55,12 +54,12 @@ export default {
             this.hours = this.hours ? this.hours : 0
 
             // create padded time string
-            const hours_p = this.hours.toString().padStart(2, "0")
-            const mins_p = this.minutes.toString().padStart(2, "0")
+            const hoursPadded = this.hours.toString().padStart(2, "0")
+            const minutesPadded = this.minutes.toString().padStart(2, "0")
 
             this.$emit("input", {
                 time: [this.hours, this.minutes],
-                paddedTime: "PT" + hours_p + "H" + mins_p + "M",
+                paddedTime: `PT${hoursPadded}H${minutesPadded}M`,
             })
         },
     },
diff --git a/src/components/LazyPicture.vue b/src/components/LazyPicture.vue
index 58ff0a28b..0978c8524 100644
--- a/src/components/LazyPicture.vue
+++ b/src/components/LazyPicture.vue
@@ -84,7 +84,6 @@ export default {
         const observer = lozad(this.$el, {
             enableAutoReload: true,
             load(el) {
-                const loadingIndicator = el.querySelector(".loading-indicator")
                 const imgPlaceholder = el.querySelector(".low-resolution")
                 const img = el.querySelector(".full-resolution")
 
diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue
index ce24df85f..2afbbe47e 100644
--- a/src/components/RecipeEdit.vue
+++ b/src/components/RecipeEdit.vue
@@ -94,7 +94,7 @@
             ref="referencesPopup"
             class="references-popup"
             :class="{ visible: referencesPopupFocused }"
-            :options="allrecipeOptions"
+            :options="allRecipeOptions"
             track-by="recipe_id"
             label="title"
             :loading="loadingRecipeReferences"
@@ -180,7 +180,12 @@ export default {
             this.setup()
         }
     },
-    props: ["id"],
+    props: {
+        id: {
+            type: String,
+            default: "",
+        },
+    },
     data() {
         return {
             // Initialize the recipe schema, otherwise v-models in child components may not work
@@ -291,7 +296,7 @@ export default {
         }
     },
     computed: {
-        allrecipeOptions() {
+        allRecipeOptions() {
             return this.allRecipes.map((r) => ({
                 recipe_id: r.recipe_id,
                 title: `${r.recipe_id}: ${r.name}`,
@@ -365,13 +370,14 @@ export default {
         this.$root.$off("categoryRenamed")
         this.$root.$on("categoryRenamed", (val) => {
             // Update selectable categories
-            const idx = this.allCategories.findIndex((c) => c == val[1])
+            const idx = this.allCategories.findIndex((c) => c === val[1])
             if (idx >= 0) {
                 Vue.set(this.allCategories, idx, val[0])
                 // this.allCategories[idx] = val[0]
             }
             // Update selected category if the currently selected was renamed
             if (this.recipe.recipeCategory === val[1]) {
+                // eslint-disable-next-line prefer-destructuring
                 this.recipe.recipeCategory = val[0]
             }
         })
@@ -390,7 +396,7 @@ export default {
         })
         // Register hook when recipe reference has been selected in popup
         this.$off("ms-popup-selection-canceled")
-        this.$on("ms-popup-selection-canceled", (opt) => {
+        this.$on("ms-popup-selection-canceled", () => {
             this.referencesPopupFocused = false
             this.popupContext.context.pasteCanceled()
         })
@@ -403,6 +409,7 @@ export default {
                 $this.allRecipes = response.data
             })
             .catch((e) => {
+                // eslint-disable-next-line no-console
                 console.log(e)
             })
             .then(() => {
@@ -442,6 +449,7 @@ export default {
             }
         },
         confirmLeavingPage() {
+            // eslint-disable-next-line no-alert
             return window.confirm(
                 "You have unsaved changes! Do you still want to leave?"
             )
@@ -474,6 +482,7 @@ export default {
                     $this.isFetchingCategories = false
                 })
                 .catch((e) => {
+                    // eslint-disable-next-line no-alert
                     alert(t("cookbook", "Failed to fetch categories"))
                     if (e && e instanceof Error) {
                         throw e
@@ -500,6 +509,7 @@ export default {
                     $this.isFetchingKeywords = false
                 })
                 .catch((e) => {
+                    // eslint-disable-next-line no-alert
                     alert(t("cookbook", "Failed to fetch keywords"))
                     if (e && e instanceof Error) {
                         throw e
@@ -513,7 +523,8 @@ export default {
                     recipe: -1,
                 })
             } else if (
-                this.$store.state.recipe.id === parseInt(this.$route.params.id)
+                this.$store.state.recipe.id ===
+                parseInt(this.$route.params.id, 10)
             ) {
                 // Make the control row show that the recipe is reloading
                 this.$store.dispatch("setReloadingRecipe", {
@@ -536,7 +547,8 @@ export default {
                     $this.$store.dispatch("setRecipe", { recipe })
                     $this.setup()
                 })
-                .catch((e) => {
+                .catch(() => {
+                    // eslint-disable-next-line no-alert
                     alert(t("cookbook", "Loading recipe failed"))
                     // Disable loading indicator
                     if ($this.$store.state.loadingRecipe) {
@@ -563,7 +575,9 @@ export default {
                     })
                     .catch((e) => {
                         // error
+                        // eslint-disable-next-line no-alert
                         alert(t("cookbook", "Recipe could not be saved"))
+                        // eslint-disable-next-line no-console
                         console.log(e)
                     })
                     .then(() => {
@@ -581,7 +595,9 @@ export default {
                     })
                     .catch((e) => {
                         // error
+                        // eslint-disable-next-line no-alert
                         alert(t("cookbook", "Recipe could not be saved"))
+                        // eslint-disable-next-line no-console
                         console.log(e)
                     })
                     .then(() => {
@@ -646,7 +662,7 @@ export default {
                 this.$store.dispatch("setPage", { page: "create" })
             }
             this.recipeInit = JSON.parse(JSON.stringify(this.recipe))
-            this.$nextTick(function () {
+            this.$nextTick(function markDirty() {
                 this.formDirty = false
             })
         },
diff --git a/src/components/RecipeIngredient.vue b/src/components/RecipeIngredient.vue
index 72458a263..5aa6759e1 100644
--- a/src/components/RecipeIngredient.vue
+++ b/src/components/RecipeIngredient.vue
@@ -7,6 +7,7 @@
         @click="toggleDone"
     >
         <div class="checkmark" :class="{ done: isDone }">✔</div>
+        <!-- eslint-disable-next-line vue/no-v-html -->
         <div class="ingredient" v-html="displayIngredient"></div>
     </li>
 </template>
@@ -32,9 +33,11 @@ export default {
     computed: {
         displayIngredient() {
             if (this.isHeader()) {
-                return this.ingredient.substring(this.headerPrefix.length)
+                return window.escapeHTML(
+                    this.ingredient.substring(this.headerPrefix.length)
+                )
             }
-            return this.ingredient
+            return window.escapeHTML(this.ingredient)
         },
     },
     methods: {
diff --git a/src/components/RecipeInstruction.vue b/src/components/RecipeInstruction.vue
index e7539ff46..229d491a1 100644
--- a/src/components/RecipeInstruction.vue
+++ b/src/components/RecipeInstruction.vue
@@ -1,5 +1,5 @@
 <template>
-    <li :class="{ done: isDone }" @click="toggleDone" v-html="instruction"></li>
+    <li :class="{ done: isDone }" @click="toggleDone">{{ instruction }}</li>
 </template>
 
 <script>
diff --git a/src/components/RecipeList.vue b/src/components/RecipeList.vue
index ca0130e5e..c09c98511 100644
--- a/src/components/RecipeList.vue
+++ b/src/components/RecipeList.vue
@@ -110,10 +110,11 @@ export default {
             function uniqFilter(value, index, self) {
                 return self.indexOf(value) === index
             }
-            return this.rawKeywords.sort().filter(uniqFilter)
+            const rawKWs = [...this.rawKeywords]
+            return rawKWs.sort().filter(uniqFilter)
         },
         /**
-         * An array of objects that contain the keywords plus a count of recipes asociated with these keywords
+         * An array of objects that contain the keywords plus a count of recipes associated with these keywords
          */
         keywordsWithCount() {
             const $this = this
@@ -222,7 +223,7 @@ export default {
         },
         // An array of recipe objects of all recipes with links to the recipes and a property if the recipe is to be shown
         recipeObjects() {
-            return this.recipes.map(function (r) {
+            return this.recipes.map(function makeObject(r) {
                 return {
                     recipe: r,
                     show: this.filteredRecipes.includes(r),
diff --git a/src/components/RecipeTimer.vue b/src/components/RecipeTimer.vue
index af3b16103..375a9dcb8 100644
--- a/src/components/RecipeTimer.vue
+++ b/src/components/RecipeTimer.vue
@@ -44,16 +44,16 @@ export default {
         }
     },
     computed: {
-        displayTime: function () {
+        displayTime() {
             let text = ""
             if (this.showFullTime) {
-                text += this.hours.toString().padStart(2, "0") + ":"
+                text += `${this.hours.toString().padStart(2, "0")}:`
             } else {
-                text += this.hours.toString() + ":"
+                text += `${this.hours.toString()}:`
             }
             text += this.minutes.toString().padStart(2, "0")
             if (this.showFullTime) {
-                text += ":" + this.seconds.toString().padStart(2, "0")
+                text += `:${this.seconds.toString().padStart(2, "0")}`
             }
             return text
         },
@@ -67,15 +67,16 @@ export default {
         this.resetTimeDisplay()
     },
     methods: {
-        onTimerEnd(button) {
+        onTimerEnd() {
             window.clearInterval(this.countdown)
             // I'll just use an alert until this functionality is finished
             const $this = this
-            window.setTimeout(function () {
+            window.setTimeout(() => {
                 // The short timeout is needed or Vue doesn't have time to update the countdown
                 //  display to display 00:00:00
+                // eslint-disable-next-line no-alert
                 alert(t("cookbook", "Cooking time is up!"))
-                //cookbook.notify(t('cookbook', 'Cooking time is up!'))
+                // cookbook.notify(t('cookbook', 'Cooking time is up!'))
                 $this.countdown = null
                 $this.showFullTime = false
                 $this.resetTimeDisplay()
@@ -104,15 +105,15 @@ export default {
             if (this.countdown === null) {
                 // Pass this to callback function
                 const $this = this
-                this.countdown = window.setInterval(function () {
-                    $this.seconds--
+                this.countdown = window.setInterval(() => {
+                    $this.seconds -= 1
                     if ($this.seconds < 0) {
                         $this.seconds = 59
-                        $this.minutes--
+                        $this.minutes -= 1
                     }
                     if ($this.minutes < 0) {
                         $this.minutes = 59
-                        $this.hours--
+                        $this.hours -= 1
                     }
                     if (
                         $this.hours === 0 &&
diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue
index 7cb566c92..52ebb7166 100644
--- a/src/components/RecipeView.vue
+++ b/src/components/RecipeView.vue
@@ -126,7 +126,7 @@
                         </ul>
                     </section>
 
-                    <section v-if="showNutritions">
+                    <section v-if="showNutritionData">
                         <h3>{{ t("cookbook", "Nutrition Information") }}</h3>
                         <ul class="nutrition-items">
                             <recipe-nutrition-info-item
@@ -293,6 +293,22 @@ export default {
         RecipeTimer,
         RecipeTool,
     },
+    /**
+     * This is one tricky feature of Vue router. If different paths lead to
+     * the same component (such as '/recipe/xxx' and '/recipe/yyy)',
+     * the component will not automatically reload. So we have to manually
+     * reload the page contents.
+     * This can also be used to confirm that the user wants to leave the page
+     * if there are unsaved changes.
+     */
+    beforeRouteUpdate(to, from, next) {
+        // beforeRouteUpdate is called when the static route stays the same
+        next()
+        // Check if we should reload the component content
+        if (this.$window.shouldReloadContent(from.fullPath, to.fullPath)) {
+            this.setup()
+        }
+    },
     data() {
         return {
             headerPrefix: "## ",
@@ -300,7 +316,7 @@ export default {
     },
     computed: {
         recipe() {
-            let recipe = {
+            const recipe = {
                 description: "",
                 ingredients: [],
                 instructions: [],
@@ -323,17 +339,13 @@ export default {
             if (this.$store.state.recipe.recipeIngredient) {
                 recipe.ingredients = Object.values(
                     this.$store.state.recipe.recipeIngredient
-                ).map((i) => {
-                    return this.convertRecipeReferences(this.escapeHtml(i))
-                })
+                ).map((i) => this.convertRecipeReferences(this.escapeHtml(i)))
             }
 
             if (this.$store.state.recipe.recipeInstructions) {
                 recipe.instructions = Object.values(
                     this.$store.state.recipe.recipeInstructions
-                ).map((i) => {
-                    return this.convertRecipeReferences(this.escapeHtml(i))
-                })
+                ).map((i) => this.convertRecipeReferences(this.escapeHtml(i)))
             }
 
             if (this.$store.state.recipe.keywords) {
@@ -376,9 +388,9 @@ export default {
             }
 
             if (this.$store.state.recipe.tool) {
-                recipe.tools = this.$store.state.recipe.tool.map((i) => {
-                    return this.convertRecipeReferences(this.escapeHtml(i))
-                })
+                recipe.tools = this.$store.state.recipe.tool.map((i) =>
+                    this.convertRecipeReferences(this.escapeHtml(i))
+                )
             }
 
             if (this.$store.state.recipe.dateCreated) {
@@ -399,12 +411,13 @@ export default {
 
             if (this.$store.state.recipe.nutrition) {
                 if (this.$store.state.recipe.nutrition instanceof Array) {
-                    this.$store.state.recipe.nutrition = {}
+                    recipe.nutrition = {}
+                } else {
+                    recipe.nutrition = this.$store.state.recipe.nutrition
                 }
             } else {
-                this.$store.state.recipe.nutrition = {}
+                recipe.nutrition = {}
             }
-            recipe.nutrition = this.$store.state.recipe.nutrition
 
             return recipe
         },
@@ -423,27 +436,20 @@ export default {
             return false
         },
         showCreatedDate() {
-            if (!this.recipe.dateCreated) {
-                return false
-            }
-            return true
+            return this.recipe.dateCreated
         },
         showModifiedDate() {
             if (!this.recipe.dateModified) {
                 return false
             }
-            if (
+            return !(
                 this.$store.state.recipe.dateCreated &&
                 this.$store.state.recipe.dateModified &&
                 this.$store.state.recipe.dateCreated ===
                     this.$store.state.recipe.dateModified
-            ) {
-                // don't show modified date if create and modified timestamp are the same
-                return false
-            }
-            return true
+            )
         },
-        showNutritions() {
+        showNutritionData() {
             return (
                 this.recipe.nutrition &&
                 !(this.recipe.nutrition instanceof Array) &&
@@ -463,7 +469,7 @@ export default {
         escapeHtml(unsafeString) {
             return unsafeString
                 .replace(/&/g, "&amp;")
-                .replace(/\~/g, "&#732;")
+                .replace(/~/g, "&#732;")
                 .replace(/</g, "&lt;")
                 .replace(/>/g, "&gt;")
                 .replace(/"/g, "&quot;")
@@ -473,21 +479,19 @@ export default {
             const re = /(^|\s|[,._+&?!-])#r\/(\d+)(?=$|\s|[.,_+&?!-])/g
             const converted = text.replace(
                 re,
-                '$1<a class="recipe-reference-inline" href="' +
-                    this.$window.baseUrl +
-                    '/#/recipe/$2">#$2</a>'
+                `$1<a class="recipe-reference-inline" href="${this.$window.baseUrl}/#/recipe/$2">#$2</a>`
             )
             return converted
         },
         isNullOrEmpty(str) {
-            return !str || (typeof str === "string" && 0 === str.trim().length)
+            return !str || (typeof str === "string" && str.trim().length === 0)
         },
         /**
          * Callback for click on keyword
          */
         keywordClicked(keyword) {
             if (keyword) {
-                this.$router.push("/tags/" + keyword)
+                this.$router.push(`/tags/${keyword}`)
             }
         },
         /* The schema.org standard requires the dates formatted as Date (https://schema.org/Date)
@@ -508,7 +512,8 @@ export default {
 
                 // Make the control row show that the recipe is reloading
             } else if (
-                this.$store.state.recipe.id === parseInt(this.$route.params.id)
+                this.$store.state.recipe.id ===
+                parseInt(this.$route.params.id, 10)
             ) {
                 this.$store.dispatch("setReloadingRecipe", {
                     recipe: this.$route.params.id,
@@ -525,11 +530,9 @@ export default {
 
             axios
                 .get(
-                    this.$window.baseUrl +
-                        "/api/recipes/" +
-                        this.$route.params.id
+                    `${this.$window.baseUrl}/api/recipes/${this.$route.params.id}`
                 )
-                .then(function (response) {
+                .then((response) => {
                     const recipe = response.data
                     // Store recipe data in vuex
                     $this.$store.dispatch("setRecipe", { recipe })
@@ -537,7 +540,7 @@ export default {
                     // Always set the active page last!
                     $this.$store.dispatch("setPage", { page: "recipe" })
                 })
-                .catch(function (e) {
+                .catch(() => {
                     if ($this.$store.state.loadingRecipe) {
                         // Reset loading recipe
                         $this.$store.dispatch("setLoadingRecipe", { recipe: 0 })
@@ -552,26 +555,11 @@ export default {
 
                     $this.$store.dispatch("setPage", { page: "recipe" })
 
+                    // eslint-disable-next-line no-alert
                     alert(t("cookbook", "Loading recipe failed"))
                 })
         },
     },
-    /**
-     * This is one tricky feature of Vue router. If different paths lead to
-     * the same component (such as '/recipe/xxx' and '/recipe/yyy)',
-     * the component will not automatically reload. So we have to manually
-     * reload the page contents.
-     * This can also be used to confirm that the user wants to leave the page
-     * if there are unsaved changes.
-     */
-    beforeRouteUpdate(to, from, next) {
-        // beforeRouteUpdate is called when the static route stays the same
-        next()
-        // Check if we should reload the component content
-        if (this.$window.shouldReloadContent(from.fullPath, to.fullPath)) {
-            this.setup()
-        }
-    },
 }
 </script>
 
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index bff7d9061..c0d5d7b19 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -14,6 +14,12 @@ export default {
     components: {
         RecipeList,
     },
+    beforeRouteUpdate(to, from, next) {
+        // Move to next route as expected
+        next()
+        // Reload view
+        this.setup()
+    },
     props: {
         query: {
             type: String,
@@ -26,6 +32,7 @@ export default {
         }
     },
     watch: {
+        // eslint-disable-next-line no-unused-vars
         $route(to, from) {
             this.keywordFilter = []
         },
@@ -35,11 +42,12 @@ export default {
         this.$root.$off("categoryRenamed")
         this.$root.$on("categoryRenamed", (val) => {
             if (
+                // eslint-disable-next-line no-underscore-dangle
                 !this._inactive &&
                 this.query === "cat" &&
                 this.$route.params.value === val[1]
             ) {
-                this.$window.goTo("/category/" + val[0])
+                this.$window.goTo(`/category/${val[0]}`)
             }
         })
     },
@@ -54,12 +62,13 @@ export default {
                 const $this = this
                 const tags = this.$route.params.value
                 axios
-                    .get(this.$window.baseUrl + "/api/tags/" + tags)
+                    .get(`${this.$window.baseUrl}/api/tags/${tags}`)
                     .then((response) => {
                         $this.results = response.data
                     })
                     .catch((e) => {
                         $this.results = []
+                        // eslint-disable-next-line no-alert
                         alert(
                             // prettier-ignore
                             t("cookbook","Failed to load recipes with keywords: {tags}",
@@ -77,12 +86,13 @@ export default {
                 const $this = this
                 const cat = this.$route.params.value
                 axios
-                    .get(this.$window.baseUrl + "/api/category/" + cat)
+                    .get(`${this.$window.baseUrl}/api/category/${cat}`)
                     .then((response) => {
                         $this.results = response.data
                     })
                     .catch((e) => {
                         $this.results = []
+                        // eslint-disable-next-line no-alert
                         alert(
                             // prettier-ignore
                             t("cookbook","Failed to load category {category} recipes",
@@ -100,15 +110,14 @@ export default {
                 const $this = this
                 axios
                     .get(
-                        this.$window.baseUrl +
-                            "/api/search/" +
-                            this.$route.params.value
+                        `${this.$window.baseUrl}/api/search/${this.$route.params.value}`
                     )
                     .then((response) => {
                         $this.results = response.data
                     })
                     .catch((e) => {
                         $this.results = []
+                        // eslint-disable-next-line no-alert
                         alert(t("cookbook", "Failed to load search results"))
                         if (e && e instanceof Error) {
                             throw e
@@ -119,11 +128,5 @@ export default {
             this.$store.dispatch("setPage", { page: "search" })
         },
     },
-    beforeRouteUpdate(to, from, next) {
-        // Move to next route as expected
-        next()
-        // Reload view
-        this.setup()
-    },
 }
 </script>
diff --git a/src/guest.js b/src/guest.js
index 2db4d137b..fdf7d5b9a 100644
--- a/src/guest.js
+++ b/src/guest.js
@@ -9,12 +9,14 @@ import Vue from "vue"
 import store from "./store"
 
 import AppInvalidGuest from "./components/AppInvalidGuest.vue"
-;(function (OC, window) {
-    "use strict"
 
+// eslint-disable-next-line func-names, import/newline-after-import
+;(function (OC, window) {
     // Fetch Nextcloud nonce identifier for dynamic script loading
+    // eslint-disable-next-line camelcase,no-undef
     __webpack_nonce__ = btoa(OC.requestToken)
 
+    // eslint-disable-next-line no-param-reassign
     window.baseUrl = OC.generateUrl("apps/cookbook")
 
     // Also make the injections available in Vue components
@@ -25,7 +27,7 @@ import AppInvalidGuest from "./components/AppInvalidGuest.vue"
     Vue.prototype.t = window.t
 
     // Start the app once document is done loading
-    document.addEventListener("DOMContentLoaded", (event) => {
+    document.addEventListener("DOMContentLoaded", () => {
         const App = Vue.extend(AppInvalidGuest)
         new App({
             store,
diff --git a/src/main.js b/src/main.js
index 3b16faa75..bc716a475 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,16 +15,19 @@ import router from "./router"
 import store from "./store"
 
 import AppMain from "./components/AppMain.vue"
-;(function (OC, window) {
-    "use strict"
 
+// eslint-disable-next-line func-names, import/newline-after-import
+;(function (OC, window) {
     // Fetch Nextcloud nonce identifier for dynamic script loading
+    // eslint-disable-next-line camelcase,no-undef
     __webpack_nonce__ = btoa(OC.requestToken)
 
+    // eslint-disable-next-line no-param-reassign
     window.baseUrl = OC.generateUrl("apps/cookbook")
 
     // Check if two routes point to the same component but have different content
-    window.shouldReloadContent = function (url1, url2) {
+    // eslint-disable-next-line no-param-reassign
+    window.shouldReloadContent = function shouldReloadContent(url1, url2) {
         if (url1 === url2) {
             return false // Obviously should not if both routes are the same
         }
@@ -49,11 +52,7 @@ import AppMain from "./components/AppMain.vue"
         // If one of the routes is edit and the other is not
         if (comps1.length !== comps2.length) {
             // Only reload if changing from edit to create
-            if (comps1.pop() === "create" || comps2.pop() === "create") {
-                return true
-            }
-
-            return false
+            return comps1.pop() === "create" || comps2.pop() === "create"
         }
         if (comps1.pop() === "create") {
             // But, if we are moving from create to view, do not reload
@@ -68,7 +67,8 @@ import AppMain from "./components/AppMain.vue"
     }
 
     // Check if the two urls point to the same item instance
-    window.isSameItemInstance = function (url1, url2) {
+    // eslint-disable-next-line no-param-reassign
+    window.isSameItemInstance = function isSameItemInstance(url1, url2) {
         if (url1 === url2) {
             return true // Obviously true if the routes are the same
         }
@@ -91,20 +91,24 @@ import AppMain from "./components/AppMain.vue"
     }
 
     // A simple function to sanitize HTML tags
-    window.escapeHTML = function (text) {
-        return text.replace(/[\"&'\/<>]/g, (a) => {
-            return {
-                "&": "&amp;",
-                '"': "&quot;",
-                "'": "&apos;",
-                "<": "&lt;",
-                ">": "&gt;",
-            }[a]
-        })
+    // eslint-disable-next-line no-param-reassign
+    window.escapeHTML = function escapeHTML(text) {
+        return text.replace(
+            /["&'/<>]/g,
+            (a) =>
+                ({
+                    "&": "&amp;",
+                    '"': "&quot;",
+                    "'": "&apos;",
+                    "<": "&lt;",
+                    ">": "&gt;",
+                }[a])
+        )
     }
 
     // Fix the decimal separator for languages that use a comma instead of dot
-    window.fixDecimalSeparator = function (value, io) {
+    // eslint-disable-next-line no-param-reassign
+    window.fixDecimalSeparator = function fixDecimalSeparator(value, io) {
         // value is the string value of the number to process
         // io is either 'i' as in input or 'o' as in output
         if (!value) {
@@ -115,9 +119,8 @@ import AppMain from "./components/AppMain.vue"
             //  e.g. 12,500.25
             if (value.indexOf(".") > value.indexOf(",")) {
                 return value.replace(",", "")
-            } else {
-                return value.replace(",", ".")
             }
+            return value.replace(",", ".")
         }
         if (io === "o") {
             return value.toString().replace(".", ",")
@@ -126,38 +129,45 @@ import AppMain from "./components/AppMain.vue"
     }
 
     // This will replace the PHP function nl2br in Vue components
-    window.nl2br = function (text) {
+    // eslint-disable-next-line no-param-reassign
+    window.nl2br = function nl2br(text) {
         return text.replace(/\n/g, "<br />")
     }
 
     // A simple function that converts a MySQL datetime into a timestamp.
-    window.getTimestamp = function (date) {
+    // eslint-disable-next-line no-param-reassign
+    window.getTimestamp = function getTimestamp(date) {
         if (date) {
             return new Date(date)
-        } else {
-            return null
         }
+        return null
     }
 
     // Push a new URL to the router, essentially navigating to that page.
-    window.goTo = function (url) {
+    // eslint-disable-next-line no-param-reassign
+    window.goTo = function goTo(url) {
         router.push(url)
     }
 
     // Notify the user if notifications are allowed
+    // eslint-disable-next-line no-param-reassign
     window.notify = function notify(title, options) {
         if (!("Notification" in window)) {
             return
-        } else if (Notification.permission === "granted") {
-            var notification = new Notification(title, options)
+        }
+        if (Notification.permission === "granted") {
+            // eslint-disable-next-line no-unused-vars
+            const notification = new Notification(title, options)
         } else if (Notification.permission !== "denied") {
-            Notification.requestPermission(function (permission) {
+            Notification.requestPermission((permission) => {
                 if (!("permission" in Notification)) {
                     Notification.permission = permission
                 }
                 if (permission === "granted") {
-                    var notification = new Notification(title, options)
+                    // eslint-disable-next-line no-unused-vars
+                    const notification = new Notification(title, options)
                 } else {
+                    // eslint-disable-next-line no-alert
                     alert(title)
                 }
             })
@@ -179,7 +189,7 @@ import AppMain from "./components/AppMain.vue"
     Vue.prototype.t = window.t
 
     // Start the app once document is done loading
-    document.addEventListener("DOMContentLoaded", (event) => {
+    document.addEventListener("DOMContentLoaded", () => {
         const App = Vue.extend(AppMain)
         new App({
             store,
diff --git a/src/store/index.js b/src/store/index.js
index 5e5b73ede..f631fb139 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -46,38 +46,41 @@ export default new Vuex.Store({
     },
 
     mutations: {
-        setAppNavigationRefreshRequired(s, { b }) {
-            s.appNavigation.refreshRequired = b
+        setAppNavigationRefreshRequired(state, { b }) {
+            state.appNavigation.refreshRequired = b
         },
-        setAppNavigationVisible(s, { b }) {
-            s.appNavigation.visible = b
+        setAppNavigationVisible(state, { b }) {
+            state.appNavigation.visible = b
         },
-        setCategoryUpdating(s, { c }) {
-            s.categoryUpdating = c
+        setCategoryUpdating(state, { c }) {
+            state.categoryUpdating = c
         },
-        setLoadingRecipe(s, { r }) {
-            s.loadingRecipe = r
+        setLoadingRecipe(state, { r }) {
+            state.loadingRecipe = r
         },
-        setPage(s, { p }) {
-            s.page = p
+        setPage(state, { p }) {
+            state.page = p
         },
-        setRecipe(s, { r }) {
-            s.recipe = r
+        setRecipe(state, { r }) {
+            state.recipe = r
             // Setting recipe also means that loading/reloading the recipe has finished
-            s.loadingRecipe = 0
-            s.reloadingRecipe = 0
+            state.loadingRecipe = 0
+            state.reloadingRecipe = 0
         },
-        setReloadingRecipe(s, { r }) {
-            s.reloadingRecipe = r
+        setRecipeCategory(state, { c }) {
+            state.recipe.category = c
         },
-        setSavingRecipe(s, { b }) {
-            s.savingRecipe = b
+        setReloadingRecipe(state, { r }) {
+            state.reloadingRecipe = r
         },
-        setUser(s, { u }) {
-            s.user = u
+        setSavingRecipe(state, { b }) {
+            state.savingRecipe = b
         },
-        setUpdatingRecipeDirectory(s, { b }) {
-            s.updatingRecipeDirectory = b
+        setUser(state, { u }) {
+            state.user = u
+        },
+        setUpdatingRecipeDirectory(state, { b }) {
+            state.updatingRecipeDirectory = b
         },
     },
 
@@ -88,10 +91,10 @@ export default new Vuex.Store({
         createRecipe(c, { recipe }) {
             const request = axios({
                 method: "POST",
-                url: window.baseUrl + "/api/recipes",
+                url: `${window.baseUrl}/api/recipes`,
                 data: recipe,
             })
-            request.then((response) => {
+            request.then(() => {
                 // Refresh navigation to display changes
                 c.dispatch("setAppNavigationRefreshRequired", {
                     isRequired: true,
@@ -103,8 +106,8 @@ export default new Vuex.Store({
          * Delete recipe on the server
          */
         deleteRecipe(c, { id }) {
-            const request = axios.delete(window.baseUrl + "/api/recipes/" + id)
-            request.then((response) => {
+            const request = axios.delete(`${window.baseUrl}/api/recipes/${id}`)
+            request.then(() => {
                 // Refresh navigation to display changes
                 c.dispatch("setAppNavigationRefreshRequired", {
                     isRequired: true,
@@ -119,7 +122,7 @@ export default new Vuex.Store({
             c.commit("setAppNavigationRefreshRequired", { b: isRequired })
         },
         setLoadingRecipe(c, { recipe }) {
-            c.commit("setLoadingRecipe", { r: parseInt(recipe) })
+            c.commit("setLoadingRecipe", { r: parseInt(recipe, 10) })
         },
         setPage(c, { page }) {
             c.commit("setPage", { p: page })
@@ -128,7 +131,7 @@ export default new Vuex.Store({
             c.commit("setRecipe", { r: recipe })
         },
         setReloadingRecipe(c, { recipe }) {
-            c.commit("setReloadingRecipe", { r: parseInt(recipe) })
+            c.commit("setReloadingRecipe", { r: parseInt(recipe, 10) })
         },
         setSavingRecipe(c, { saving }) {
             c.commit("setSavingRecipe", { b: saving })
@@ -146,17 +149,16 @@ export default new Vuex.Store({
 
             const request = axios({
                 method: "PUT",
-                url:
-                    window.baseUrl +
-                    "/api/category/" +
-                    encodeURIComponent(oldName),
+                url: `${window.baseUrl}/api/category/${encodeURIComponent(
+                    oldName
+                )}`,
                 data: { name: newName },
             })
 
             request
-                .then((response) => {
+                .then(() => {
                     if (c.state.recipe.recipeCategory === oldName) {
-                        c.state.recipe.recipeCategory = newName
+                        c.commit("setRecipeCategory", { c: newName })
                     }
                 })
                 .catch((e) => {
@@ -175,7 +177,7 @@ export default new Vuex.Store({
             c.commit("setUpdatingRecipeDirectory", { b: true })
             c.dispatch("setRecipe", { recipe: null })
             const request = axios({
-                url: window.baseUrl + "/config",
+                url: `${window.baseUrl}/config`,
                 method: "POST",
                 data: { folder: dir },
             })
@@ -194,10 +196,10 @@ export default new Vuex.Store({
         updateRecipe(c, { recipe }) {
             const request = axios({
                 method: "PUT",
-                url: window.baseUrl + "/api/recipes/" + recipe.id,
+                url: `${window.baseUrl}/api/recipes/${recipe.id}`,
                 data: recipe,
             })
-            request.then((response) => {
+            request.then(() => {
                 // Refresh navigation to display changes
                 c.dispatch("setAppNavigationRefreshRequired", {
                     isRequired: true,

From 036ff218255527c99782739d00268c5748cae0ff Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Thu, 25 Feb 2021 21:40:54 +0100
Subject: [PATCH 5/5] Added eslint to tests

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 .github/workflows/tests.yml | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 9df24b78c..7ca74a038 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -47,6 +47,16 @@ jobs:
                 Please run `npm run prettier-fix` in order to correct this.';
                 exit 1;
                 }
+
+        -   name: Check for issues with vue and js files (eslint)
+            shell: bash
+            run: >-
+                npm run eslint || {
+                echo '::error ::The eslint style checker failed.
+                Please run `npm run eslint-fix` in order to correct this.';
+                exit 1;
+                }
+
         -   name: Check for formatting issues with CSS files (stylelint)
             shell: bash
             run: >-