From c4c6eb3ca692279502c155dccc939b10b8726c19 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sun, 16 Mar 2025 16:25:55 +0100
Subject: [PATCH] route lazy loading + route naming improvements

---
 vue3/src/apps/tandoor/Tandoor.vue             |  17 +-
 vue3/src/apps/tandoor/main.ts                 |  69 +++-----
 .../dialogs/ShoppingLineItemDialog.vue        |   2 +-
 .../display/HorizontalMealPlanWindow.vue      |   2 +-
 .../display/NavigationDrawerContextMenu.vue   |   2 +-
 vue3/src/components/display/RecipeCard.vue    |   4 +-
 .../components/inputs/GlobalSearchDialog.vue  |   7 +-
 .../components/model_editors/RecipeEditor.vue |   3 +-
 vue3/src/pages/IngredientEditorPage.vue       |   2 +-
 vue3/src/pages/RecipeEditPage.vue             | 163 ------------------
 vue3/src/pages/RecipeImportPage.vue           |   4 +-
 vue3/src/pages/SearchPage.vue                 |   2 +-
 vue3/src/pages/SettingsPage.vue               |  16 +-
 vue3/src/pages/StartPage.vue                  |   3 +-
 14 files changed, 58 insertions(+), 238 deletions(-)
 delete mode 100644 vue3/src/pages/RecipeEditPage.vue

diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index 0a6fd757f..0e99fc318 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -31,7 +31,7 @@
                             <v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
                         </v-list-item>
                         <v-divider></v-divider>
-                        <v-list-item :to="{ name: 'view_settings', params: {} }">
+                        <v-list-item :to="{ name: 'SettingsPage', params: {} }">
                             <template #prepend>
                                 <v-icon icon="fa-solid fa-sliders"></v-icon>
                             </template>
@@ -90,7 +90,7 @@
         <v-app-bar color="warning" density="compact" v-if="useUserPreferenceStore().isAuthenticated && isSpaceAboveLimit(useUserPreferenceStore().activeSpace)">
             <p class="text-center w-100">
                 {{ $t('SpaceLimitExceeded') }}
-                <v-btn color="success" variant="flat" :to="{name: 'view_settings_space'}">{{ $t('SpaceSettings') }}</v-btn>
+                <v-btn color="success" variant="flat" :to="{name: 'SpaceSettings'}">{{ $t('SpaceSettings') }}</v-btn>
             </p>
         </v-app-bar>
 
@@ -106,7 +106,7 @@
 
         <v-navigation-drawer v-if="lgAndUp && useUserPreferenceStore().isAuthenticated">
             <v-list nav>
-                <v-list-item :to="{ name: 'view_settings', params: {} }">
+                <v-list-item :to="{ name: 'SettingsPage', params: {} }">
                     <template #prepend>
                         <v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
                     </template>
@@ -115,8 +115,8 @@
                 </v-list-item>
                 <v-divider></v-divider>
                 <v-list-item prepend-icon="$recipes" title="Home" :to="{ name: 'view_home', params: {} }"></v-list-item>
-                <v-list-item prepend-icon="$mealplan" :title="$t('Meal_Plan')" :to="{ name: 'view_mealplan', params: {} }"></v-list-item>
-                <v-list-item prepend-icon="$shopping" :title="$t('Shopping_list')" :to="{ name: 'view_shopping', params: {} }"></v-list-item>
+                <v-list-item prepend-icon="$mealplan" :title="$t('Meal_Plan')" :to="{ name: 'MealPlanPage', params: {} }"></v-list-item>
+                <v-list-item prepend-icon="$shopping" :title="$t('Shopping_list')" :to="{ name: 'ShoppingListPage', params: {} }"></v-list-item>
                 <v-list-item prepend-icon="fas fa-globe" :title="$t('Import')" :to="{ name: 'RecipeImportPage', params: {} }"></v-list-item>
                 <v-list-item prepend-icon="$books" :title="$t('Books')" :to="{ name: 'BooksPage', params: {} }"></v-list-item>
                 <v-list-item prepend-icon="fa-solid fa-folder-tree" :title="$t('Database')" :to="{ name: 'ModelListPage', params: {model: 'food'} }"></v-list-item>
@@ -127,7 +127,7 @@
 
             <template #append>
                 <v-list nav>
-                    <v-list-item prepend-icon="fas fa-sliders" :title="$t('Settings')" :to="{ name: 'view_settings', params: {} }"></v-list-item>
+                    <v-list-item prepend-icon="fas fa-sliders" :title="$t('Settings')" :to="{ name: 'SettingsPage', params: {} }"></v-list-item>
                     <v-list-item prepend-icon="fa-solid fa-heart" href="https://tandoor.dev" target="_blank">
                         Tandoor {{ useUserPreferenceStore().serverSettings.version }}
                     </v-list-item>
@@ -153,7 +153,7 @@
                 <v-icon icon="fa-fw fas fa-bars"></v-icon>
                 <v-bottom-sheet activator="parent" close-on-content-click>
                     <v-list nav>
-                        <v-list-item prepend-icon="fa-solid fa-sliders" :to="{ name: 'view_settings', params: {} }" :title="$t('Settings')"></v-list-item>
+                        <v-list-item prepend-icon="fa-solid fa-sliders" :to="{ name: 'SettingsPage', params: {} }" :title="$t('Settings')"></v-list-item>
                         <v-list-item prepend-icon="fas fa-globe" :title="$t('Import')" :to="{ name: 'RecipeImportPage', params: {} }"></v-list-item>
                         <v-list-item prepend-icon="fa-solid fa-folder-tree" :to="{ name: 'ModelListPage', params: {model: 'food'} }" :title="$t('Database')"></v-list-item>
                     </v-list>
@@ -180,6 +180,9 @@ import NavigationDrawerContextMenu from "@/components/display/NavigationDrawerCo
 import {useDjangoUrls} from "@/composables/useDjangoUrls";
 import {onMounted, ref} from "vue";
 import {isSpaceAboveLimit} from "@/utils/logic_utils";
+import SpaceSettings from "@/components/settings/SpaceSettings.vue";
+import SettingsPage from "@/pages/SettingsPage.vue";
+import MealPlanPage from "@/pages/MealPlanPage.vue";
 
 const {lgAndUp} = useDisplay()
 const {getDjangoUrl} = useDjangoUrls()
diff --git a/vue3/src/apps/tandoor/main.ts b/vue3/src/apps/tandoor/main.ts
index eb5855ed6..8088cd4d5 100644
--- a/vue3/src/apps/tandoor/main.ts
+++ b/vue3/src/apps/tandoor/main.ts
@@ -7,64 +7,41 @@ import App from './Tandoor.vue'
 import mavonEditor from 'mavon-editor'
 import 'vite/modulepreload-polyfill';
 import vuetify from "@/vuetify";
-import ShoppingListPage from "@/pages/ShoppingListPage.vue";
-import StartPage from "@/pages/StartPage.vue";
-import RecipeViewPage from "@/pages/RecipeViewPage.vue";
-import RecipeEditPage from "@/pages/RecipeEditPage.vue";
-import MealPlanPage from "@/pages/MealPlanPage.vue";
-import SearchPage from "@/pages/SearchPage.vue";
-import TestPage from "@/pages/TestPage.vue";
+
 import {setupI18n} from "@/i18n";
-import SettingsPage from "@/pages/SettingsPage.vue";
-import AccountSettings from "@/components/settings/AccountSettings.vue";
-import CosmeticSettings from "@/components/settings/CosmeticSettings.vue";
-import ShoppingSettings from "@/components/settings/ShoppingSettings.vue";
-import MealPlanSettings from "@/components/settings/MealPlanSettings.vue";
-import SpaceSettings from "@/components/settings/SpaceSettings.vue";
-import SpaceMemberSettings from "@/components/settings/SpaceMemberSettings.vue";
-import UserSpaceSettings from "@/components/settings/UserSpaceSettings.vue";
-import ApiSettings from "@/components/settings/ApiSettings.vue";
-import ModelListPage from "@/pages/ModelListPage.vue";
-import ModelEditPage from "@/pages/ModelEditPage.vue";
-import RecipeImportPage from "@/pages/RecipeImportPage.vue";
-import IngredientEditorPage from "@/pages/IngredientEditorPage.vue";
-import BooksPage from "@/pages/BooksPage.vue";
-import BookViewPage from "@/pages/BookViewPage.vue";
 
 const routes = [
-    {path: '/', component: StartPage, name: 'view_home'},
+    {path: '/', component: () => import("@/pages/StartPage.vue"), name: 'view_home'},
     {path: '/search', redirect: {name: 'view_home'}},
-    {path: '/test', component: TestPage, name: 'view_test'},
+    {path: '/test', component: () => import("@/pages/TestPage.vue"), name: 'view_test'},
     {
-        path: '/settings', component: SettingsPage, name: 'view_settings', redirect: '/settings/account',
+        path: '/settings', component: () => import("@/pages/SettingsPage.vue"), name: 'SettingsPage', redirect: '/settings/account',
         children: [
-            {path: 'account', component: AccountSettings, name: 'view_settings_account'},
-            {path: 'cosmetic', component: CosmeticSettings, name: 'view_settings_cosmetic'},
-            {path: 'shopping', component: ShoppingSettings, name: 'view_settings_shopping'},
-            {path: 'meal-plan', component: MealPlanSettings, name: 'view_settings_mealplan'},
-            {path: 'space', component: SpaceSettings, name: 'view_settings_space'},
-            {path: 'space-members', component: SpaceMemberSettings, name: 'view_settings_space_member'},
-            {path: 'user-space', component: UserSpaceSettings, name: 'view_settings_user_space'},
-            {path: 'api', component: ApiSettings, name: 'view_settings_api'},
+            {path: 'account', component: () => import("@/components/settings/AccountSettings.vue"), name: 'AccountSettings'},
+            {path: 'cosmetic', component: () => import("@/components/settings/CosmeticSettings.vue"), name: 'CosmeticSettings'},
+            {path: 'shopping', component: () => import("@/components/settings/ShoppingSettings.vue"), name: 'ShoppingSettings'},
+            {path: 'meal-plan', component: () => import("@/components/settings/MealPlanSettings.vue"), name: 'MealPlanSettings'},
+            {path: 'space', component: () => import("@/components/settings/SpaceSettings.vue"), name: 'SpaceSettings'},
+            {path: 'space-members', component: () => import("@/components/settings/SpaceMemberSettings.vue"), name: 'SpaceMemberSettings'},
+            {path: 'user-space', component: () => import("@/components/settings/UserSpaceSettings.vue"), name: 'UserSpaceSettings'},
+            {path: 'api', component: () => import("@/components/settings/ApiSettings.vue"), name: 'ApiSettings'},
         ]
     },
     //{path: '/settings/:page', component: SettingsPage, name: 'view_settings_page', props: true},
-    {path: '/advanced-search', component: SearchPage, name: 'view_search'},
-    {path: '/shopping', component: ShoppingListPage, name: 'view_shopping'},
-    {path: '/mealplan', component: MealPlanPage, name: 'view_mealplan'},
-    {path: '/books', component: BooksPage, name: 'BooksPage'},
-    {path: '/book/:bookId', component: BookViewPage, name: 'BookViewPage', props: true},
-    {path: '/recipe/import', component: RecipeImportPage, name: 'RecipeImportPage'},
+    {path: '/advanced-search', component: () => import("@/pages/SearchPage.vue"), name: 'SearchPage'},
+    {path: '/shopping', component: () => import("@/pages/ShoppingListPage.vue"), name: 'ShoppingListPage'},
+    {path: '/mealplan', component: () => import("@/pages/MealPlanPage.vue"), name: 'MealPlanPage'},
+    {path: '/books', component: () => import("@/pages/BooksPage.vue"), name: 'BooksPage'},
+    {path: '/book/:bookId', component: () => import("@/pages/BookViewPage.vue"), name: 'BookViewPage', props: true},
+    {path: '/recipe/import', component: () => import("@/pages/RecipeImportPage.vue"), name: 'RecipeImportPage'},
 
-    {path: '/recipe/:id', component: RecipeViewPage, name: 'view_recipe', props: true},
-    {path: '/view/recipe/:id', redirect: {name: 'view_recipe'}}, // old Tandoor v1 url pattern
+    {path: '/recipe/:id', component: () => import("@/pages/RecipeViewPage.vue"), name: 'RecipeViewPage', props: true},
+    {path: '/view/recipe/:id', redirect: {name: 'RecipeViewPage'}}, // old Tandoor v1 url pattern
 
-    {path: '/recipe/edit/:recipe_id', component: RecipeEditPage, name: 'edit_recipe', props: true},
+    {path: '/list/:model?', component: () => import("@/pages/ModelListPage.vue"), props: true, name: 'ModelListPage'},
+    {path: '/edit/:model/:id?', component: () => import("@/pages/ModelListPage.vue"), props: true, name: 'ModelEditPage'},
 
-    {path: '/list/:model?', component: ModelListPage, props: true, name: 'ModelListPage'},
-    {path: '/edit/:model/:id?', component: ModelEditPage, props: true, name: 'ModelEditPage'},
-
-    {path: '/ingredient-editor', component: IngredientEditorPage, name: 'IngredientEditorPage'},
+    {path: '/ingredient-editor', component: () => import("@/pages/IngredientEditorPage.vue"), name: 'IngredientEditorPage'},
 ]
 
 const router = createRouter({
diff --git a/vue3/src/components/dialogs/ShoppingLineItemDialog.vue b/vue3/src/components/dialogs/ShoppingLineItemDialog.vue
index 8b8e30ed9..8b07e85e2 100644
--- a/vue3/src/components/dialogs/ShoppingLineItemDialog.vue
+++ b/vue3/src/components/dialogs/ShoppingLineItemDialog.vue
@@ -98,7 +98,7 @@
                                                        @save="(args: ShoppingListEntry) => { useShoppingStore().entries.set(e.id!, args); shoppingListFood.entries.set(e.id!, args) }"></model-edit-dialog>
                                 </v-btn>
                                 <v-btn color="edit" icon="$recipes" v-if="e.listRecipe && e.listRecipeData.recipe && e.ingredient"
-                                       :to="{name: 'view_recipe', params: {id: e.listRecipeData.recipe}}">
+                                       :to="{name: 'RecipeViewPage', params: {id: e.listRecipeData.recipe}}">
                                     <v-icon icon="$recipes"></v-icon>
                                 </v-btn>
                                 <v-btn icon="" @click="useShoppingStore().deleteObject(e, true); shoppingListFood.entries.delete(e.id!)" color="delete">
diff --git a/vue3/src/components/display/HorizontalMealPlanWindow.vue b/vue3/src/components/display/HorizontalMealPlanWindow.vue
index 4761a989e..442966a5f 100644
--- a/vue3/src/components/display/HorizontalMealPlanWindow.vue
+++ b/vue3/src/components/display/HorizontalMealPlanWindow.vue
@@ -136,7 +136,7 @@ onMounted(() => {
 
 function clickMealPlan(plan: MealPlan){
     if(plan.recipe){
-        router.push( {name: 'view_recipe', params: {id: plan.recipe.id}})
+        router.push( {name: 'RecipeViewPage', params: {id: plan.recipe.id}})
     }
 }
 
diff --git a/vue3/src/components/display/NavigationDrawerContextMenu.vue b/vue3/src/components/display/NavigationDrawerContextMenu.vue
index bba227113..d3142eabb 100644
--- a/vue3/src/components/display/NavigationDrawerContextMenu.vue
+++ b/vue3/src/components/display/NavigationDrawerContextMenu.vue
@@ -11,7 +11,7 @@
         </v-list-item>
     </template>
 
-    <template v-if="route.name == 'view_mealplan'">
+    <template v-if="route.name == 'MealPlanPage'">
         <v-divider></v-divider>
         <v-list-subheader>{{$t('Settings')}}</v-list-subheader>
         <v-list-item>
diff --git a/vue3/src/components/display/RecipeCard.vue b/vue3/src/components/display/RecipeCard.vue
index 703cb04a5..56d1f5bf5 100644
--- a/vue3/src/components/display/RecipeCard.vue
+++ b/vue3/src/components/display/RecipeCard.vue
@@ -1,14 +1,14 @@
 <template>
     <template v-if="!props.loading">
 
-        <router-link :to="{name: 'view_recipe', params: {id: props.recipe.id}}">
+        <router-link :to="{name: 'RecipeViewPage', params: {id: props.recipe.id}}">
             <recipe-image :style="{height: props.height}" :recipe="props.recipe" rounded="lg" class="mr-3 ml-3">
 
             </recipe-image>
         </router-link>
         <div class="ml-3">
             <div class="d-flex ">
-                <div class="flex-grow-1 cursor-pointer" @click="router.push({name: 'view_recipe', params: {id: props.recipe.id}})">
+                <div class="flex-grow-1 cursor-pointer" @click="router.push({name: 'RecipeViewPage', params: {id: props.recipe.id}})">
                     <p class="font-weight-bold mt-2">{{ props.recipe.name }}</p>
                 </div>
                 <div class="mt-1">
diff --git a/vue3/src/components/inputs/GlobalSearchDialog.vue b/vue3/src/components/inputs/GlobalSearchDialog.vue
index 601869216..0a438b5e4 100644
--- a/vue3/src/components/inputs/GlobalSearchDialog.vue
+++ b/vue3/src/components/inputs/GlobalSearchDialog.vue
@@ -51,7 +51,7 @@
 
             </v-card-text>
             <v-card-actions>
-                <v-btn @click="dialog=false"  :to="{name: 'view_search'}" variant="plain" prepend-icon="$search">{{ $t('Advanced') }}</v-btn>
+                <v-btn @click="dialog=false"  :to="{name: 'SearchPage'}" variant="plain" prepend-icon="$search">{{ $t('Advanced') }}</v-btn>
                 <v-btn @click="dialog=false" variant="plain">{{ $t('Close') }}</v-btn>
             </v-card-actions>
         </v-card>
@@ -71,6 +71,7 @@ import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 import {useDebounceFn} from "@vueuse/core";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {useI18n} from "vue-i18n";
+import SearchPage from "@/pages/SearchPage.vue";
 
 const router = useRouter()
 const {mobile} = useDisplay()
@@ -218,11 +219,11 @@ function goToSelectedRecipe(index: number) {
     let searchResult = searchResults.value[index]
 
     if (searchResult.type == 'link_advanced_search') {
-        router.push({name: 'view_search', query: {'query': searchQuery.value}})
+        router.push({name: 'SearchPage', query: {'query': searchQuery.value}})
     } else {
         console.log('going to', searchResult.recipeId)
         if (searchResult.recipeId != null) {
-            router.push({name: 'view_recipe', params: {'id': searchResult.recipeId}})
+            router.push({name: 'RecipeViewPage', params: {'id': searchResult.recipeId}})
         }
     }
 
diff --git a/vue3/src/components/model_editors/RecipeEditor.vue b/vue3/src/components/model_editors/RecipeEditor.vue
index 84f1df9b9..cb0e0634a 100644
--- a/vue3/src/components/model_editors/RecipeEditor.vue
+++ b/vue3/src/components/model_editors/RecipeEditor.vue
@@ -110,7 +110,7 @@
         <v-card-text v-if="isSpaceAtRecipeLimit(useUserPreferenceStore().activeSpace)">
             <v-alert color="warning" icon="fa-solid fa-triangle-exclamation">
                 {{$t('SpaceLimitReached')}}
-                <v-btn color="success" variant="flat" :to="{name: 'view_settings_space'}">{{ $t('SpaceSettings') }}</v-btn>
+                <v-btn color="success" variant="flat" :to="{name: 'SpaceSettings'}">{{ $t('SpaceSettings') }}</v-btn>
             </v-alert>
         </v-card-text>
     </model-editor-base>
@@ -150,6 +150,7 @@ import ClosableHelpAlert from "@/components/display/ClosableHelpAlert.vue";
 import {useDisplay} from "vuetify";
 import {isSpaceAtRecipeLimit} from "@/utils/logic_utils";
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import SpaceSettings from "@/components/settings/SpaceSettings.vue";
 
 
 const props = defineProps({
diff --git a/vue3/src/pages/IngredientEditorPage.vue b/vue3/src/pages/IngredientEditorPage.vue
index f9b50e8e0..9b92ffd12 100644
--- a/vue3/src/pages/IngredientEditorPage.vue
+++ b/vue3/src/pages/IngredientEditorPage.vue
@@ -95,7 +95,7 @@
                 <template v-slot:expanded-row="{ columns, item }">
                     <tr>
                         <td :colspan="columns.length">
-                            <v-btn variant="outlined" color="secondary" target="_blank" :to="{name: 'view_recipe', params: {id: r.id}}" v-for="r in item.usedInRecipes">
+                            <v-btn variant="outlined" color="secondary" target="_blank" :to="{name: 'RecipeViewPage', params: {id: r.id}}" v-for="r in item.usedInRecipes">
                                 {{ r.name }} (#{{ r.id }})
                             </v-btn>
                         </td>
diff --git a/vue3/src/pages/RecipeEditPage.vue b/vue3/src/pages/RecipeEditPage.vue
deleted file mode 100644
index 3aec216f3..000000000
--- a/vue3/src/pages/RecipeEditPage.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-    <v-container>
-        <v-row>
-            <v-col>
-                <v-card>
-                    <v-card-title>{{ recipe.name }}</v-card-title>
-
-                    <v-card-text>
-
-
-                        <v-form>
-                            <v-text-field
-                                label="Name"
-                                v-model="recipe.name"
-                            ></v-text-field>
-
-                            <v-textarea
-                                label="Description"
-                                v-model="recipe.description"
-                                :rules="[v => v.length <= 512 || '> 512']"
-                                counter
-                                clearable
-                            ></v-textarea>
-
-                            <v-combobox
-                                label="Keywords"
-                                v-model="recipe.keywords"
-                                :items="keywords"
-                                item-title="name"
-                                multiple
-                                clearable
-                                chips
-                            ></v-combobox>
-
-                            <v-row>
-                                <v-col>
-                                    <v-text-field
-                                        v-model.number="recipe.waitingTime"
-                                        label="Waiting Time (min)"
-                                    ></v-text-field>
-                                </v-col>
-                                <v-col>
-                                    <v-text-field
-                                        v-model.number="recipe.workingTime"
-                                        label="Working Time (min)"
-                                    ></v-text-field>
-                                </v-col>
-                            </v-row>
-
-                            <v-row>
-                                <v-col>
-                                    <v-text-field
-                                        v-model.number="recipe.servings"
-                                        label="Servings"
-                                    ></v-text-field>
-                                </v-col>
-                                <v-col>
-                                    <v-text-field
-                                        v-model="recipe.servingsText"
-                                        label="Servings Text"
-                                    ></v-text-field>
-                                </v-col>
-                            </v-row>
-
-
-                        </v-form>
-                    </v-card-text>
-                </v-card>
-            </v-col>
-        </v-row>
-
-
-        <v-row v-for="(step, index) in recipe.steps" class="mt-1">
-            <v-col>
-                <step-editor v-model="recipe.steps[index]" :step-index="index"></step-editor>
-            </v-col>
-        </v-row>
-
-        <v-speed-dial
-            location="top"
-            transition="fade-transition"
-        >
-            <template v-slot:activator="{ props: activatorProps }">
-                <v-fab
-                    app
-                    v-bind="activatorProps"
-                    color="primary"
-                    size="large"
-                    icon="$save"
-                ></v-fab>
-            </template>
-
-            <v-btn key="1" icon="$success"></v-btn>
-            <v-btn key="2" icon="$info"></v-btn>
-            <v-btn key="3" icon="$warning"></v-btn>
-            <v-btn key="4" icon="$error"></v-btn>
-        </v-speed-dial>
-    </v-container>
-
-
-    <v-btn @click="updateRecipe()">Save</v-btn>
-    <v-btn :to="{name: 'view_recipe', params: {id: recipe_id}}">View</v-btn>
-
-
-</template>
-
-<script lang="ts">
-import {defineComponent, PropType} from 'vue'
-import {ApiApi, Keyword, Recipe} from "@/openapi";
-import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
-import StepEditor from "@/components/inputs/StepEditor.vue";
-
-
-export default defineComponent({
-    name: "RecipeEditPage",
-    components: {StepEditor, StepMarkdownEditor},
-    props: {
-        recipe_id: {type: String, required: false},
-    },
-    watch: {
-        recipe_id: function () {
-            this.refreshRecipe()
-        }
-    },
-    data() {
-        return {
-            recipe: {} as Recipe,
-            keywords: [] as Keyword[],
-        }
-    },
-    mounted() {
-        this.refreshRecipe()
-
-        const api = new ApiApi()
-        api.apiKeywordList({page: 1, pageSize: 100}).then(r => {
-            if (r.results) {
-                this.keywords = r.results
-            }
-        })
-    },
-    methods: {
-        refreshRecipe() {
-            if (this.recipe.id != Number(this.recipe_id)) {
-                const api = new ApiApi()
-                api.apiRecipeRetrieve({id: Number(this.recipe_id)}).then(r => {
-                    this.recipe = r
-                })
-            }
-        },
-        updateRecipe() {
-            const api = new ApiApi()
-            api.apiRecipeUpdate({id: Number(this.recipe_id), recipe: this.recipe}).then(r => {
-                this.recipe = r
-            })
-        }
-    }
-})
-</script>
-
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/vue3/src/pages/RecipeImportPage.vue b/vue3/src/pages/RecipeImportPage.vue
index dbbb2b735..b888c2472 100644
--- a/vue3/src/pages/RecipeImportPage.vue
+++ b/vue3/src/pages/RecipeImportPage.vue
@@ -39,7 +39,7 @@
                                             <v-alert-title>{{ $t('Duplicate') }}</v-alert-title>
                                             {{ $t('DuplicateFoundInfo') }}
                                             <v-list>
-                                                <v-list-item :to="{name: 'view_recipe', params: {id: r.id}}" v-for="r in importResponse.duplicates" :key="r.id"> {{ r.name }}
+                                                <v-list-item :to="{name: 'RecipeViewPage', params: {id: r.id}}" v-for="r in importResponse.duplicates" :key="r.id"> {{ r.name }}
                                                     (#{{ r.id }})
                                                 </v-list-item>
                                             </v-list>
@@ -294,7 +294,7 @@ function createRecipeFromImport() {
 
         api.apiRecipeCreate({recipe: importResponse.value.recipe}).then(recipe => {
             updateRecipeImage(recipe.id!, null, importResponse.value.recipe?.imageUrl).then(r => {
-                router.push({name: 'view_recipe', params: {id: recipe.id}})
+                router.push({name: 'RecipeViewPage', params: {id: recipe.id}})
             })
         }).catch(err => {
             useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
diff --git a/vue3/src/pages/SearchPage.vue b/vue3/src/pages/SearchPage.vue
index a2379af04..e59fdf808 100644
--- a/vue3/src/pages/SearchPage.vue
+++ b/vue3/src/pages/SearchPage.vue
@@ -199,7 +199,7 @@ function reset() {
 }
 
 function handleRowClick(event: PointerEvent, data: any) {
-    router.push({name: 'view_recipe', params: {id: recipes.value[data.index].id}})
+    router.push({name: 'RecipeViewPage', params: {id: recipes.value[data.index].id}})
 }
 
 /**
diff --git a/vue3/src/pages/SettingsPage.vue b/vue3/src/pages/SettingsPage.vue
index 2bb4f60f4..8ed209bbd 100644
--- a/vue3/src/pages/SettingsPage.vue
+++ b/vue3/src/pages/SettingsPage.vue
@@ -3,22 +3,22 @@
         <v-row>
             <v-col cols="12" md="3" offset-md="1" offset-xl="2" xl="2">
                 <v-list class="bg-transparent">
-                    <v-list-item :to="{name: 'view_settings_account'}" prepend-icon="fa-solid fa-user">{{ $t('Profile') }}</v-list-item>
+                    <v-list-item :to="{name: 'AccountSettings'}" prepend-icon="fa-solid fa-user">{{ $t('Profile') }}</v-list-item>
 
                     <v-divider></v-divider>
                     <v-list-subheader>{{ $t('Settings') }}</v-list-subheader>
-                    <v-list-item :to="{name: 'view_settings_cosmetic'}" prepend-icon="fa-solid fa-palette">{{ $t('Cosmetic') }}</v-list-item>
-                    <v-list-item :to="{name: 'view_settings_shopping'}" prepend-icon="$shopping">{{ $t('Shopping_list') }}</v-list-item>
-                    <v-list-item :to="{name: 'view_settings_mealplan'}" prepend-icon="$mealplan">{{ $t('Meal_Plan') }}</v-list-item>
+                    <v-list-item :to="{name: 'CosmeticSettings'}" prepend-icon="fa-solid fa-palette">{{ $t('Cosmetic') }}</v-list-item>
+                    <v-list-item :to="{name: 'ShoppingSettings'}" prepend-icon="$shopping">{{ $t('Shopping_list') }}</v-list-item>
+                    <v-list-item :to="{name: 'MealPlanSettings'}" prepend-icon="$mealplan">{{ $t('Meal_Plan') }}</v-list-item>
                     <v-list-item :href="getDjangoUrl('settings-shopping/')" target="_blank" prepend-icon="$search">{{ $t('Search') }}</v-list-item>
                     <v-divider></v-divider>
                     <v-list-subheader>Space</v-list-subheader>
-                    <v-list-item :to="{name: 'view_settings_user_space'}" prepend-icon="$spaces">{{ $t('YourSpaces') }}</v-list-item>
-                    <v-list-item :to="{name: 'view_settings_space'}" prepend-icon="$settings">{{ $t('SpaceSettings') }}</v-list-item>
-                    <v-list-item :to="{name: 'view_settings_space_member'}" prepend-icon="fa-solid fa-users">{{ $t('SpaceMembers') }}</v-list-item>
+                    <v-list-item :to="{name: 'UserSpaceSettings'}" prepend-icon="$spaces">{{ $t('YourSpaces') }}</v-list-item>
+                    <v-list-item :to="{name: 'SpaceSettings'}" prepend-icon="$settings">{{ $t('SpaceSettings') }}</v-list-item>
+                    <v-list-item :to="{name: 'SpaceMemberSettings'}" prepend-icon="fa-solid fa-users">{{ $t('SpaceMembers') }}</v-list-item>
                     <v-divider></v-divider>
                     <v-list-subheader>Admin</v-list-subheader>
-                    <v-list-item :to="{name: 'view_settings_api'}" prepend-icon="fa-solid fa-code">{{ $t('API') }}</v-list-item>
+                    <v-list-item :to="{name: 'ApiSettings'}" prepend-icon="fa-solid fa-code">{{ $t('API') }}</v-list-item>
                     <v-list-item :href="getDjangoUrl('system')" target="_blank" prepend-icon="fa-solid fa-server">{{ $t('System') }}</v-list-item>
                 </v-list>
 
diff --git a/vue3/src/pages/StartPage.vue b/vue3/src/pages/StartPage.vue
index a0e736ffa..1b4c5b51c 100644
--- a/vue3/src/pages/StartPage.vue
+++ b/vue3/src/pages/StartPage.vue
@@ -23,7 +23,7 @@
 
         <v-row>
             <v-col class="text-center">
-                <v-btn size="x-large" rounded="xl" prepend-icon="$search" variant="tonal" :to="{name: 'view_search', params: {query: ''}}">{{ $t('View_Recipes') }}</v-btn>
+                <v-btn size="x-large" rounded="xl" prepend-icon="$search" variant="tonal" :to="{name: 'SearchPage', params: {query: ''}}">{{ $t('View_Recipes') }}</v-btn>
             </v-col>
         </v-row>
 
@@ -36,6 +36,7 @@ import {onMounted, ref} from "vue"
 import {ApiApi} from "@/openapi"
 import HorizontalRecipeScroller from "@/components/display/HorizontalRecipeWindow.vue"
 import HorizontalMealPlanWindow from "@/components/display/HorizontalMealPlanWindow.vue"
+import SearchPage from "@/pages/SearchPage.vue";
 
 const totalRecipes = ref(-1)