Menu

Post image 1
Post image 2
1 / 2
0

From Modal to Full Page: How We Refactored a Vue 3 Recipe Detail View

DEV Community·Rusu Ionut·30 days ago
#QWwnELdr
#vue#webdev#recipe#fullscreen#const#article
Reading 0:00
15s threshold

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 .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More