The useAdmin composable provides a reactive way to determine if the current route is an admin route. It checks the route's metadata for an admin group designation, making it useful for conditional rendering of admin-specific UI elements or features.

Basic Usage

<script setup lang="ts">
const { isAdminRoute } = useAdmin()
</script>

<template>
  <div>
    <h1>Dashboard</h1>
    
    <!-- Show admin panel only on admin routes -->
    <AdminPanel v-if="isAdminRoute" />
    
    <!-- Show different navigation based on route type -->
    <UserNav v-if="!isAdminRoute" />
    <AdminNav v-else />
  </div>
</template>

Options

The useAdmin composable accepts an optional configuration object:

Return Value

Returns an object with:

• isAdminRoute - A computed boolean that reactively checks if the current route's metadata includes the admin group

How It Works

The composable checks if the route's meta.groups array includes 'admin':

export function isAdminRoute(routeMeta: RouteMeta): boolean {
  return routeMeta.groups?.includes('admin') ?? false
}

Routes are marked as admin routes by placing them in the admin route group. For example, pages/(private)/(admin)/somePage.vue.

Read more about route grouping here.

Examples

With Custom Route

Pass a specific route instance instead of using the current route:

const route = useRoute()
const { isAdminRoute } = useAdmin({ route })

Conditional Layout

<script setup lang="ts">
const { isAdminRoute } = useAdmin()

const layoutClass = computed(() => 
  isAdminRoute.value ? 'admin-layout' : 'user-layout'
)
</script>

<template>
  <div :class="layoutClass">
    <slot />
  </div>
</template>

Using the Helper Function

The underlying isAdminRoute function can be imported and used independently:

import { isAdminRoute } from '#auth/composables/useAdmin'

const route = useRoute()
if (isAdminRoute(route.meta)) {
  // Handle admin route
}