shadcn-vue-admin

By default, the project uses a standard layout. If you want specific directories (like pages/errors/ or pages/auth/) to use a different layout or no layout at all, follow these steps.

Step 1: Create a directory-level layout file

Create a file in src/pages/ with the same name as the directory you want to target. Use the <route> block to disable the default layout.

<template>
  <router-view />
</template>

<route lang="yml">
meta:
  layout: false # Disables default layout for all sub-routes
</route>

Step 2: Handle redundant parent routes

Creating the file above might generate empty parent routes (e.g., /errors/). To fix this, create an index.vue inside the target directory and perform a redirect using the Vue 3.5+ Composition API.

<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter()
// Example: Redirect to a specific sub-route like 404
router.replace({ name: '/errors/404' })
</script>

By default, the routing system applies a standard layout. To use a custom layout (or no layout) for pages in directories like pages/errors/ or pages/auth/, you must create a corresponding file in the src/pages/ root to intercept the route and set the layout metadata.

Step 1: Create the interceptor file

Create src/pages/auth.vue (or errors.vue) with the following structure:

<template>
  <router-view />
</template>

<route lang="yml">
meta:
  layout: false
</route>

Step 2: Handle directory redirects

Because the file-based routing will still generate empty routes for the directories (e.g., /auth/), you should create an index.vue inside the original directory (e.g., src/pages/auth/index.vue) to redirect users to the correct sub-page:

<script lang="ts" setup>
const router = useRouter()
router.replace({ name: '/auth/login' }) // Replace with your target route
</script>

The Apps dashboard page provides a searchable and filterable interface for managing applications. It uses a BasicPage layout and allows users to filter apps by name, connection status (connected vs notConnected), and sort them alphabetically.

Key Features

• Search: Filter apps by name using a text input.
• Status Filtering: Filter by all, connected, or notConnected status.
• Sorting: Sort the list in ascending (asc) or descending (desc) order by name.
• Layout: Uses the BasicPage component with a sticky header and a grid-based display for AppCard components.

<template>
  <BasicPage
    title="Apps"
    description="Apps description"
    sticky
  >
    <!-- Search, Filter, and Sort controls -->
    <main class="grid grid-cols-1 gap-4 mt-2 lg:grid-cols-3">
      <AppCard
        v-for="app in appList" :key="app.name"
        :app="app"
      />
    </main>
  </BasicPage>
</template>

The dashboard page is implemented using a BasicPage layout component which provides a standardized structure for page titles, descriptions, and action buttons. It utilizes a tabbed interface (UiTabs) to switch between different views like Overview, Analytics, and Reports.

Key components used in this layout:

• BasicPage: The primary wrapper that handles page metadata and sticky positioning.
• UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent: Components used to implement the tabbed navigation.
• #actions slot: A template slot within BasicPage used to place primary action buttons (e.g., a 'Download' button) in the header area.

<template>
  <BasicPage
    title="workspace"
    description="workspace description"
    sticky
  >
    <template #actions>
      <Button @click="...">
        {{ $t('download') }}
      </Button>
    </template>

    <UiTabs :default-value="defaultTab">
      <UiTabsList>
        <UiTabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value">
          {{ tab.name }}
        </UiTabsTrigger>
      </UiTabsList>
      <UiTabsContent value="overview">
        <OverviewContent />
      </UiTabsContent>
    </UiTabs>
  </BasicPage>
</template>