Elegantly Handling Popups in Vue 3: A Simple Composable Guide
15/08/2023 - In this guide, we'll explore a simple yet effective way to manage popups using VueRouter and a nifty composable.

Navigating the world of Vue 3 can be a thrilling journey, especially when you discover elegant solutions to common challenges. One such challenge? Handling popups. In this guide, we’ll explore a simple yet effective way to manage popups using VueRouter and a nifty composable. Perfect for developers eager to level up their Vue skills!
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
andvue
. - 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.
Keep Exploring

8 Advanced JavaScript Array Methods for Efficient Data Manipulation
While basic array methods like `push`, `pop`, or `slice` are widely known, there are several advanced methods that can supercharge our data manipulation capabilities.

7 Advanced Tips for Writing Cleaner and More Efficient JavaScript Code
Mastering the art of clean coding can significantly enhance performance, readability, and maintainability. In this article, we'll delve into seven advanced tips to elevate your JavaScript game.