Elegant Popup Management in Vue 3

Vue 3's Composition API, combined with VueRouter, offers a powerful way to manage popups while maintaining clean URL states. Let's explore a simple yet effective implementation.

The Composable Implementation

import { useRoute, useRouter } from 'vue-router';
import { computed } from 'vue';

export function usePopup() {
  const route = useRoute();
  const router = useRouter();
  const popup = computed(() => route.query.popup);
  const showPopup = (t: string) =>
    router.replace({
      path: route.path,
      query: { ...route.query, popup: t },
    });

  const closePopup = () =>
    router.replace({
      path: route.path,
      query: { ...route.query, popup: undefined },
    });
  return { popup, showPopup, closePopup };
}

Breaking Down the Solution

Core Components

1. Route Management

   • Utilizes VueRouter for state
   • Preserves query parameters
   • Maintains URL consistency

2. Popup State

   • Computed property for current state
   • Clean show/hide functions
   • Preserves other URL parameters

Advantages Over Alternative Approaches

vs. Simple State Management

• URL reflects application state
• Shareable popup states
• Browser history integration
• Clean state management

vs. Global State Solutions

• No additional dependencies
• Simpler implementation
• Built-in URL integration
• Lighter weight solution

Use Cases

1. Modal Windows

   • User profile views
   • Setting panels
   • Detail displays

2. Feature Previews

   • Product details
   • Image galleries
   • Information panels

3. Multi-step Flows

   • Form wizards
   • Setup processes
   • Guided tours

Best Practices

1. Maintain URL cleanliness
2. Handle state transitions smoothly
3. Preserve existing query parameters
4. Consider UX in state management
5. Document popup behaviors

The combination of VueRouter and composables creates a maintainable and user-friendly popup management solution.