One of the longest-lived technical decisions in our recipe finder app was showing recipe details inside a dialog modal. It worked — until it didn't. Here's how we migrated from a bloated modal to a clean, SEO-friendly full page, what we cut along the way, and what the app looks like now.

Demo:

https://recipe-finder.org/recipe/644488-german-rhubarb-cake-with-meringue

The Old Approach: Everything in a Modal

The original setup opened a <v-dialog> when a user clicked a recipe card. The modal held the entire recipe detail UI: ingredients, nutrition, videos, AI chef, grocery import, recipe scaler — all of it. The logic for opening it, fetching the recipe, and handling deep-link slugs lived inside HomePage.vue .

<!-- Old: HomePage.vue controlled everything --> <RecipeDetailsModal :is-open= "isRecipeModalOpen" :recipe= "selectedRecipeDetails" :loading= "loadingRecipeDetails" @ close= "closeModal" />

Enter fullscreen mode

Exit fullscreen mode

The problem was that HomePage.vue had become a god component.…