Fixed render bug

frontend-spec.md

@@ -9,6 +9,17 @@ Status of tests and typing
 Prerequisites
 - Node.js 20.19.0 LTS or newer (chrome-devtools-mcp requires >=20.19.0). An `.nvmrc` file is provided; run `nvm use` to switch.
 
+## Test credentials for manual QA (Nov 2, 2025)
+
+- Email: specuser+20251102@example.com
+- Display Name: Spec User
+- Password: SpecPassw0rd!
+- Household slug: faulconfridge-qa2
+
+Notes
+- Created via live browser flow; redirected to slug-scoped app shell.
+- Verified Meal Plan and Shopping pages load under `/:householdSlug` without missing-param errors.
+
 # Frontend Specification: Household Multi-Tenancy (v2)
 
 ## 1. Objective

src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory, createMemoryHistory, Router } from 'vue-router'
+import { createRouter, createWebHashHistory, createMemoryHistory, Router, RouterView } from 'vue-router'
 import { setHouseholdSlugProvider } from '@/api/client'
 import type { RouteRecordRaw } from 'vue-router'
 
@@ -38,9 +38,11 @@ export function createAppRouter(getCurrentUser: () => Promise<unknown> | unknown
   ]
 
   const routes: RouteRecordRaw[] = []
-  routes.push({ path: '/', name: 'root', component: { template: '<div />' }, meta: { requiresAuth: true } })
+  // Avoid runtime template compilation by using render functions/components
+  const Empty = { render: () => null }
+  routes.push({ path: '/', name: 'root', component: Empty, meta: { requiresAuth: true } })
   routes.push(...publicRoutes)
-  routes.push({ path: '/:householdSlug', component: { template: '<router-view />' }, children: featureChildren })
+  routes.push({ path: '/:householdSlug', component: RouterView, children: featureChildren })
 
   // Use hash history in real browsers; fallback to memory history in tests/SSR where `globalThis.location` may be unavailable
   // Some test runners may polyfill `window` but not the global `location`, and vue-router's hash history uses the global.