Elegantly Handling Popups in Vue 3: A Simple Composable Guide

The Power of VueRouter and Composables

Vue 3, with its Composition API, offers a more flexible way to reuse and organize logic. Combine this with the capabilities of VueRouter, and you have a powerful duo. Our goal? To toggle popups using query strings without disturbing other URL parameters.

The Code: A Deep Dive

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 It Down

• Imports: We start by importing necessary tools from vue-router and vue.

• usePopup Function: This is our composable function, designed to provide utility functions for handling popups.

• popup: A computed property that fetches the current popup value from the query string.

• showPopup: A function to display a popup. It replaces the current route with the same path but updates the popup query parameter.

• closePopup: A function to close the popup. It retains the current route but removes the popup query parameter.

Why Use VueRouter Over Simple State or Global State?

In the Vue ecosystem, there are multiple ways to handle state and UI changes, such as using ref for reactive state or employing global state management solutions like pinia. So, why opt for VueRouter for managing popups?

• URL Reflects Application State: One of the primary advantages of using VueRouter is that the URL becomes a reflection of the application's state. This means that when a user shares a URL, the recipient sees the application in the exact state it was shared, including which popups are open. This is especially useful for sharing specific views of an application without resorting to complex state management.

• Avoid Global State Overhead: While global state solutions like pinia are powerful, they can be overkill for simple UI changes like toggling a popup. By using VueRouter, you can achieve the desired functionality without introducing the overhead of a global state solution.

• Simplified State Management: Managing popups with ref or other reactive properties can become cumbersome, especially when you have multiple popups or when popups depend on other application states. With VueRouter, the state is managed through the URL, simplifying the logic and making it more transparent.

Use Case: Client-Side Applications and URL Sharing

Imagine you're building a client-side application where you need to show or hide popups based on user actions. Now, consider a scenario where a user wants to share a specific view of the application, including an open popup. With our usePopup composable, this becomes straightforward. The recipient of the shared URL will see the exact view, with the popup open, without any additional state management gymnastics on your part. It's a seamless way to ensure consistent user experiences across shared views.

Conclusion

For developers, understanding the power of VueRouter for state representation can be a revelation. While tools like ref and pinia have their place, when it comes to managing UI elements like popups and ensuring shareable states, VueRouter combined with our usePopup composable emerges as an elegant and efficient solution.