How to determine if route is active?

[martinszeltins]

I have routes like users/new and users/list and users/edit and I want to write the logic that if the route starts with users then I want to return true for isRouteActive.

But the problem is that I cannot write route.path.startsWith('/users') because it won't work for localized routes like /es/users/

Here is my code:

<template>
    <div :class="usersActiveClass">
        Users
    </div>
</template>

<script setup lang="ts">
    const route = useRoute()

    const usersActiveClass = computed(() => {
        // (!) This won't work for '/es/users/list'
        return route.path.startsWith('/users') ? 'bg-gray-200' : ''
    })
</script>