Login flow barely works

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!isPublic">
     <ul class="nav">
       <li class="nav-item">
         <router-link
@@ -42,11 +42,18 @@
 import AlertToast from './components/AlertToast.vue'
 import HouseholdSwitcher from '@/components/HouseholdSwitcher.vue'
 import { useHousehold } from '@/composables/useHousehold'
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
 
 // Initialize household slug provider binding to current route
 useHousehold()
 
 // components in <script setup> are auto-registered by import + usage
+const route = useRoute()
+const isPublic = computed(() => {
+  const n = String(route.name || '')
+  return n === 'login' || n === 'create-account' || n === 'welcome' || n === 'invitation-accept'
+})
 </script>
 
 <style>

src/components/meals/MealPlanPage.vue

@@ -23,7 +23,7 @@
           <li>
             <router-link
               class="nav-link"
-              :to="`/meals/${selectedMeal.id}`"
+              :to="{ name: 'meal-edit', params: { householdSlug: slug, id: selectedMeal.id } }"
               active-class="active"
             >
               Edit Meal
@@ -45,13 +45,14 @@
     <action-item
       title="Plan Meal"
       :image="planMeal"
-      @click="() => $router.push('/meals/add')"
+      @click="() => $router.push({ name: 'meal-add', params: { householdSlug: slug } })"
     />
   </div>
 </template>
 
 <script setup>
 import { ref, onBeforeMount } from 'vue'
+import { useRoute } from 'vue-router'
 import ActionItem from '@/components/ActionItem.vue'
 import MealCard from '@/components/meals/MealCard.vue'
 import { getUpcomingMeals, markMealConsumed, deleteMeal } from '@/api/sdk'
@@ -67,6 +68,8 @@ to.setDate(to.getDate() + 7)
 
 const meals = ref([])
 const selectedMeal = ref(null)
+const route = useRoute()
+const slug = typeof route.params.householdSlug === 'string' ? route.params.householdSlug : ''
 
 onBeforeMount(async () => {
   meals.value = await getUpcomingMeals(from, to)

src/components/shopping/MyShoppingPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1>My Shopping List</h1>
-    <router-link :to="`/shopping/current`">
+    <router-link :to="{ name: 'shopping-current', params: { householdSlug: slug } }">
       Full Shopping List
     </router-link>
 
@@ -64,7 +64,7 @@
 
 <script setup lang="ts">
 import { ref, onBeforeMount } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { useAuth } from '@/composables/useAuth'
 import { useAlert } from '@/composables/useAlert'
 import { useShopping } from '@/composables/useShopping'
@@ -72,6 +72,8 @@ import type { Ingredient } from '@/domain/types'
 import EditableIngredientsPanel from '@/components/ingredients/EditableIngredientsPanel.vue'
 
 const router = useRouter()
+const route = useRoute()
+const slug = typeof route.params.householdSlug === 'string' ? route.params.householdSlug : ''
 const { loadUser } = useAuth()
 const { show: showAlert } = useAlert()
 const { getCurrentShoppingList, requestIngredient, unrequestIngredient } = useShopping()