### Project Setup and Development Commands

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Instructions for cloning the project, installing dependencies using pnpm, configuring environment variables, and starting the development server or building for production.

```bash
# Clone and install
git clone https://github.com/Whbbit1999/shadcn-vue-admin.git
cd shadcn-vue-admin
pnpm install

# Configure environment variables
cp .env.example .env
# Edit .env with your API settings:
# VITE_SERVER_API_URL=http://localhost:3000
# VITE_SERVER_API_PREFIX=/api
# VITE_SERVER_API_TIMEOUT=5000

# Start development server
pnpm dev

# Build for production
pnpm build
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/whbbit1999/shadcn-vue-admin/blob/main/README.md

Installs the necessary project dependencies using pnpm. This command should be run after cloning the repository.

```bash
pnpm install
```

--------------------------------

### Pinia Store Setup with Session Persistence (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Configures Pinia with `pinia-plugin-persistedstate` for automatic session storage persistence. Includes examples for an authentication store and a theme configuration store.

```typescript
// src/plugins/pinia/setup.ts
import type { App } from 'vue'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(createPersistedState({ storage: sessionStorage }))

export function setupPinia(app: App) {
  app.use(pinia)
}

export default pinia

// src/stores/auth.ts - Auth store example
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('user', () => {
  const isLogin = ref(false)
  return { isLogin }
})

// src/stores/theme.ts - Theme store with persistence
import { defineStore } from 'pinia'
import type { ContentLayout, Radius, Theme } from '@/constants/themes'

export const useThemeStore = defineStore('system-config', () => {
  const radius = ref(0.5)
  const theme = ref<Theme>('zinc')
  const contentLayout = ref<ContentLayout>('centered')

  function setRadius(newRadius: Radius) { radius.value = newRadius }
  function setTheme(newTheme: Theme) { theme.value = newTheme }
  function setContentLayout(newContentLayout: ContentLayout) { contentLayout.value = newContentLayout }

  return { radius, setRadius, theme, setTheme, contentLayout, setContentLayout }
}, { persist: true })
```

--------------------------------

### Start Development Server

Source: https://github.com/whbbit1999/shadcn-vue-admin/blob/main/README.md

Starts the development server for the Shadcn Vue Admin project using pnpm. This allows for local development and testing.

```bash
pnpm dev
```

--------------------------------

### Plugin System Initialization for Vue Application

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Sets up a modular plugin system to initialize core application functionalities including Pinia, TanStack Query, i18n, and the router. This is integrated into the main Vue application setup.

```typescript
// src/plugins/index.ts
import type { App } from 'vue'

import { setupAutoAnimate } from './auto-animate/setup'
import { setupDayjs } from './dayjs/setup'
import { setupI18n } from './i18n/setup'
import { setupNProgress } from './nprogress/setup'
import { setupPinia } from './pinia/setup'
import { setupRouter } from './router/setup'
import { setupTanstackVueQuery } from './tanstack-vue-query/setup'

export function setupPlugins(app: App) {
  setupDayjs()
  setupNProgress()
  setupAutoAnimate(app)
  setupTanstackVueQuery(app)
  setupI18n(app)
  setupPinia(app)
  setupRouter(app)
}

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { setupPlugins } from './plugins'

import '@/assets/index.css'

function bootstrap() {
  const app = createApp(App)
  setupPlugins(app)
  app.mount('#app')
}

bootstrap()
```

--------------------------------

### Internationalization Setup with Vue-i18n

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

This setup configures internationalization for the project using vue-i18n, supporting English ('en') and Chinese ('zh') locales. It includes a function to initialize the i18n plugin and demonstrates how to use the useI18n hook within components for translations and language switching.

```typescript
// src/plugins/i18n/setup.ts
import type { App } from 'vue'
import { createI18n } from 'vue-i18n'
import en from './en.json'
import zh from './zh.json'

export function setupI18n(app: App) {
  const i18n = createI18n({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: { zh, en },
  })
  app.use(i18n)
}

// Usage in component
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

// Change language
locale.value = 'zh'

// Use translations
const title = t('common.title')
```

--------------------------------

### Vue Router Setup with File-Based Routing and Auth Guard (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Sets up Vue Router using file-based routing and virtual layouts. Includes a custom authentication guard (`createRouterGuard`) that redirects unauthenticated users to the sign-in page if a route requires authentication.

```typescript
// src/router/index.ts
import type { RouteRecordRaw } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import { createRouter, createWebHistory } from 'vue-router'
import { handleHotUpdate, routes } from 'vue-router/auto-routes'
import { createRouterGuard } from './guard'

const router = createRouter({
  history: createWebHistory(),
  routes: setupLayouts(routes as RouteRecordRaw[]),
  scrollBehavior() {
    return { left: 0, top: 0, behavior: 'smooth' }
  },
})

createRouterGuard(router)
export default router

if (import.meta.hot) {
  handleHotUpdate(router)
}

// src/router/guard/auth-guard.ts
import type { Router } from 'vue-router'
import { storeToRefs } from 'pinia'
import pinia from '@/plugins/pinia/setup'
import { useAuthStore } from '@/stores/auth'

export function authGuard(router: Router) {
  router.beforeEach((to, _from) => {
    const authStore = useAuthStore(pinia)
    const { isLogin } = storeToRefs(authStore)

    // Redirect to login if page requires auth and user is not logged in
    if (to.meta.auth && !unref(isLogin) && to.name !== '/auth/sign-in') {
      return {
        name: '/auth/sign-in',
        query: { redirect: to.fullPath },
      }
    }
  })
}
```

--------------------------------

### Clone Project Repository

Source: https://github.com/whbbit1999/shadcn-vue-admin/blob/main/README.md

Clones the Shadcn Vue Admin project from GitHub using Git. This is the first step to get the project locally.

```bash
git clone https://github.com/Whbbit1999/shadcn-vue-admin.git
```

--------------------------------

### TanStack Query Setup with Stale Time and Devtools (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Configures TanStack Vue Query with a default stale time of 5 minutes and enables integration with Vue Query Devtools v6. Requires `@tanstack/vue-query` package.

```typescript
// src/plugins/tanstack-vue-query/setup.ts
import type { App } from 'vue'
import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
    },
  },
})

export function setupTanstackVueQuery(app: App) {
  app.use(VueQueryPlugin, {
    enableDevtoolsV6Plugin: true,
    queryClient,
  })
}
```

--------------------------------

### Responsive Modal/Drawer Usage (Vue)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

This Vue component demonstrates the usage of the `useModal` composable. It imports the composable, destructures its returned values, and uses them to dynamically render either a Dialog or Drawer component based on screen size. The example shows how to integrate trigger buttons, content, headers, footers, and close actions.

```vue
<!-- Usage in component -->
<script setup lang="ts">
const { Modal, contentClass } = useModal()
const open = ref(false)
</script>

<template>
  <component :is="Modal.Root" v-model:open="open">
    <component :is="Modal.Trigger" as-child>
      <Button>Open Modal</Button>
    </component>
    <component :is="Modal.Content" :class="contentClass">
      <component :is="Modal.Header">
        <component :is="Modal.Title">Modal Title</component>
        <component :is="Modal.Description">Modal description text</component>
      </component>
      <div>Content goes here</div>
      <component :is="Modal.Footer">
        <component :is="Modal.Close" as-child>
          <Button variant="outline">Cancel</Button>
        </component>
        <Button @click="handleSubmit">Submit</Button>
      </component>
    </component>
  </component>
</template>
```

--------------------------------

### System Theme Management Usage (JavaScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

This JavaScript snippet demonstrates how to use the `useSystemTheme` composable within a Vue component. It shows how to destructure the returned theme and radius values, along with the `setTheme` and `setRadius` functions. The example illustrates changing the application's theme to 'blue' and setting the border-radius to 0.75rem.

```javascript
// Usage in component
const { theme, radius, setTheme, setRadius } = useSystemTheme()

// Change theme
setTheme('blue')

// Change border radius
setRadius(0.75)
```

--------------------------------

### Copy Component for Clipboard Functionality in Vue

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

The Copy component enables easy copying of text to the clipboard, providing tooltip feedback for confirmation. It leverages VueUse's useClipboard hook and supports customization of size, variant, and tooltip text. Usage examples demonstrate basic and advanced configurations.

```vue
<!-- src/components/sva-ui/copy/Copy.vue usage -->
<script setup lang="ts">
import { Copy } from '@/components/sva-ui/copy'
</script>

<template>
  <!-- Basic usage -->
  <Copy content="Text to copy" />

  <!-- With custom size and variant -->
  <Copy
    content="user@example.com"
    size="sm"
    variant="ghost"
    copy-tooltip-text="Copy email"
    copied-tooltip-text="Email copied!"
  />

  <!-- In a code block -->
  <div class="flex items-center gap-2 bg-muted p-2 rounded">
    <code>npm install shadcn-vue</code>
    <Copy content="npm install shadcn-vue" size="sm" />
  </div>
</template>
```

--------------------------------

### InlineTip Component for Contextual Tips in Vue

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

The InlineTip component displays contextual information or notes with distinct semantic variants for different purposes (info, warning, destructive, success). Each tip includes a label and content, allowing for clear communication of messages within the UI. Usage examples demonstrate each variant.

```vue
<!-- src/components/sva-ui/inline-tip usage -->
<script setup lang="ts">
import { InlineTip } from '@/components/sva-ui/inline-tip'
</script>

<template>
  <!-- Info tip (default) -->
  <InlineTip label="Note">
    This is an informational message about the feature.
  </InlineTip>

  <!-- Warning tip -->
  <InlineTip label="Warning" variant="warning">
    Please backup your data before proceeding with this action.
  </InlineTip>

  <!-- Error/Destructive tip -->
  <InlineTip label="Important" variant="destructive">
    This action cannot be undone. All data will be permanently deleted.
  </InlineTip>

  <!-- Success tip -->
  <InlineTip label="Success" variant="success">
    Your changes have been saved successfully.
  </InlineTip>
</template>
```

--------------------------------

### Task Table Columns Definition (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Defines the column structure for a 'Task' data table using TanStack Table's ColumnDef. It includes custom cell rendering for badges and headers, enabling sorting and filtering functionalities. This setup is crucial for displaying task-related data effectively.

```typescript
// Define columns for a Task table
import type { ColumnDef } from '@tanstack/vue-table'
import { h } from 'vue'
import DataTableColumnHeader from '@/components/data-table/column-header.vue'
import { SelectColumn } from '@/components/data-table/table-columns'
import { Badge } from '@/components/ui/badge'

interface Task {
  id: string
  title: string
  status: string
  priority: string
  label: string
}

export const columns: ColumnDef<Task>[] = [
  SelectColumn as ColumnDef<Task>,
  {
    accessorKey: 'id',
    header: ({ column }) => h(DataTableColumnHeader<Task>, { column, title: 'Task' }),
    cell: ({ row }) => h('div', { class: 'w-20' }, row.getValue('id')),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'title',
    header: ({ column }) => h(DataTableColumnHeader<Task>, { column, title: 'Title' }),
    cell: ({ row }) => {
      return h('div', { class: 'flex space-x-2' }, [
        h(Badge, { variant: 'outline' }, () => row.original.label),
        h('span', { class: 'max-w-[500px] truncate font-medium' }, row.getValue('title')),
      ])
    },
  },
  {
    accessorKey: 'status',
    header: ({ column }) => h(DataTableColumnHeader<Task>, { column, title: 'Status' }),
    cell: ({ row }) => h('div', { class: 'flex items-center' }, row.getValue('status')),
    filterFn: (row, id, value) => value.includes(row.getValue(id)),
  },
]
```

--------------------------------

### StatusBadge Component for Status Indicators in Vue

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

The StatusBadge component visually represents different statuses using colored dots and badge styling. It supports various color themes (success, warning, destructive, default) and badge variants (secondary, outline), with an option for a rounded status indicator. Usage examples showcase different combinations.

```vue
<!-- src/components/sva-ui/status-badge usage -->
<script setup lang="ts">
import { StatusBadge } from '@/components/sva-ui/status-badge'
</script>

<template>
  <!-- Different status colors -->
  <StatusBadge color="success">Active</StatusBadge>
  <StatusBadge color="warning">Pending</StatusBadge>
  <StatusBadge color="destructive">Failed</StatusBadge>
  <StatusBadge color="default">Draft</StatusBadge>

  <!-- With different badge variants -->
  <StatusBadge variant="secondary" color="success">Completed</StatusBadge>
  <StatusBadge variant="outline" color="warning">In Progress</StatusBadge>

  <!-- With rounded status indicator -->
  <StatusBadge color="success" rounded="full">Online</StatusBadge>
</template>
```

--------------------------------

### Responsive Modal/Drawer Composable (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

The `useModal` composable provides responsive UI components, rendering as a Dialog on desktop and a Drawer on mobile. It utilizes `@vueuse/core` for media queries and depends on shadcn-vue UI components for Dialog and Drawer. It returns computed properties for selecting the appropriate component based on screen size and a CSS class for content styling.

```typescript
import { useMediaQuery } from '@vueuse/core'
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'

export function useModal() {
  const isDesktop = useMediaQuery('(min-width: 768px)')

  const Modal = computed(() => ({
    Root: isDesktop.value ? Dialog : Drawer,
    Trigger: isDesktop.value ? DialogTrigger : DrawerTrigger,
    Content: isDesktop.value ? DialogContent : DrawerContent,
    Header: isDesktop.value ? DialogHeader : DrawerHeader,
    Title: isDesktop.value ? DialogTitle : DrawerTitle,
    Description: isDesktop.value ? DialogDescription : DrawerDescription,
    Footer: isDesktop.value ? DialogFooter : DrawerFooter,
    Close: isDesktop.value ? DialogClose : DrawerClose,
  }))

  const contentClass = computed(() => {
    return isDesktop.value ? null : 'px-2 pb-8 *:px-4'
  })

  return { contentClass, isDesktop, Modal }
}
```

--------------------------------

### API Service with TanStack Query for Task Management (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

This section details the API service implementation for managing tasks using TanStack Query hooks (`useQuery`, `useMutation`). It leverages the `useAxios` composable for HTTP requests and defines types for responses and requests. It includes functions for fetching all tasks, a single task by ID, creating, updating, and deleting tasks.

```typescript
// src/services/types/response.type.ts
export interface IResponse<T, E = Record<string, any>> {
  data: T
  extra: E
  code: number
  message: string
  success: boolean
}

export interface IPaginationRequestQuery {
  page?: number
  pageSize?: number
}

// src/services/api/example-tasks.api.ts
import type { AxiosError } from 'axios'
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
import { useAxios } from '@/composables/use-axios'
import type { IResponse } from '../types/response.type'

export interface ITask {
  title: string
  description: string
  status: 'pending' | 'in-progress' | 'completed'
}

// Fetch all tasks
export function useGetTasksQuery() {
  const { axiosInstance } = useAxios()

  return useQuery<IResponse<ITask[]>, AxiosError>({
    queryKey: ['useGetTasksQuery'],
    queryFn: async () => {
      const response = await axiosInstance.get('/tasks')
      return response.data
    },
  })
}

// Fetch single task
export function useGetTaskByIdQuery(id: number) {
  const { axiosInstance } = useAxios()

  return useQuery<IResponse<ITask>, AxiosError>({
    queryKey: ['useGetTaskQuery', id],
    queryFn: async () => {
      const response = await axiosInstance.get(`/tasks/${id}`)
      return response.data
    },
  })
}

// Create task mutation
export function useCreateTaskMutation() {
  const { axiosInstance } = useAxios()
  const queryClient = useQueryClient()

  return useMutation<IResponse<ITask>, AxiosError, ITask>({
    mutationKey: ['useCreateTaskMutation'],
    mutationFn: async (data: ITask) => {
      return await axiosInstance.post('/tasks', data)
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['useGetTasksQuery'] })
    },
  })
}

// Update task mutation
export function useUpdateTaskMutation(id: number) {
  const { axiosInstance } = useAxios()
  const queryClient = useQueryClient()

  return useMutation<IResponse<boolean>, AxiosError, Partial<ITask>>({
    mutationKey: ['useUpdateTaskMutation', id],
    mutationFn: async (data: Partial<ITask>) => {
      return await axiosInstance.put(`/tasks/${id}`, data)
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['useGetTaskQuery', id] })
      queryClient.invalidateQueries({ queryKey: ['useGetTasksQuery'] })
    },
  })
}

// Delete task mutation
export function useDeleteTaskMutation() {
  const { axiosInstance } = useAxios()
  const queryClient = useQueryClient()

  return useMutation<IResponse<boolean>, AxiosError, number>({
    mutationKey: ['useDeleteTaskMutation'],
    mutationFn: async (id: number) => {
      return await axiosInstance.delete(`/tasks/${id}`)
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['useGetTasksQuery'] })
    },
  })
}

// Usage in component
const { data: tasks, isLoading, error } = useGetTasksQuery()
const createMutation = useCreateTaskMutation()

async function handleCreate() {
  await createMutation.mutateAsync({
    title: 'New Task',
    description: 'Task description',
    status: 'pending'
  })
}
```

--------------------------------

### System Theme Management Composable (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

The `useSystemTheme` composable manages application theme colors and border-radius. It integrates with Pinia for state management and automatically updates CSS variables on the document's root element when theme or radius settings change. It depends on a Pinia store (`useThemeStore`) and constants defined in `themes.ts`. The composable returns the current theme and radius values, along with functions to update them.

```typescript
// src/constants/themes.ts
export const THEMES = ['zinc', 'red', 'rose', 'orange', 'green', 'blue', 'yellow', 'violet'] as const
export type Theme = typeof THEMES[number]

export type Radius = typeof RADIUS[number]
export const RADIUS = [0, 0.25, 0.5, 0.75, 1] as const

export type ContentLayout = 'full' | 'centered'

// src/composables/use-system-theme.ts
import { storeToRefs } from 'pinia'
import { watch } from 'vue'
import { THEMES } from '@/constants/themes'
import { useThemeStore } from '@/stores/theme'

export function useSystemTheme() {
  const themeStore = useThemeStore()
  const { setTheme, setRadius } = themeStore
  const { theme, radius } = storeToRefs(themeStore)

  if (typeof document !== 'undefined') {
    watch(theme, (theme) => {
      document.documentElement.classList.remove(...THEMES.map(t => `theme-${t}`))
      document.documentElement.classList.add(`theme-${theme}`)
    }, { immediate: true })

    watch(radius, (radius) => {
      document.documentElement.style.setProperty('--radius', `${radius}rem`)
    }, { immediate: true })
  }

  return { theme, radius, setTheme, setRadius }
}
```

--------------------------------

### Configure Axios Instance with Interceptors (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

The `useAxios` composable sets up a configured Axios instance with base URL, timeout, and interceptors for handling request and response transformations. It relies on environment variables for configuration and the `axios` library.

```typescript
// src/composables/use-axios.ts
import type { AxiosError } from 'axios'
import axios from 'axios'
import env from '@/utils/env'

export function useAxios() {
  const axiosInstance = axios.create({
    baseURL: env.VITE_SERVER_API_URL + env.VITE_SERVER_API_PREFIX,
    timeout: env.VITE_SERVER_API_TIMEOUT,
  })

  axiosInstance.interceptors.request.use(
    (config) => config,
    (error) => Promise.reject(error)
  )

  axiosInstance.interceptors.response.use(
    (response) => response,
    (error: AxiosError) => Promise.reject(error)
  )

  return { axiosInstance }
}

// Usage with TanStack Query
const { axiosInstance } = useAxios()
const response = await axiosInstance.get('/tasks')
```

--------------------------------

### DataTable Component Usage (Vue)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Demonstrates how to integrate the DataTable component into a Vue.js page. It shows the necessary imports for the DataTable, column definitions, and sample data, along with how to pass these as props and utilize slots for custom elements like a toolbar.

```vue
<!-- Usage in page component -->
<script setup lang="ts">
import DataTable from '@/components/data-table/data-table.vue'
import { columns } from './components/columns'
import tasks from './data/tasks.json'
</script>

<template>
  <DataTable :data="tasks" :columns="columns">
    <template #toolbar>
      <DataTableToolbar :table="table" />
    </template>
  </DataTable>
</template>
```

--------------------------------

### File-Based Routing Configuration in Vue Router

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

This configuration demonstrates how to manage page layouts and route protection using file-based routing with Vue Router. It shows how to skip default layouts for specific routes (e.g., auth pages) and protect routes requiring authentication by setting meta properties.

```vue
<!-- src/pages/auth.vue - Configure auth pages to skip default layout -->
<template>
  <router-view />
</template>

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

<!-- src/pages/auth/index.vue - Redirect empty auth route -->
<script lang="ts" setup>
const router = useRouter()
router.replace({ name: '/auth/sign-in' })
</script>

<!-- src/pages/dashboard/index.vue - Protected page requiring auth -->
<template>
  <BasicPage title="Dashboard" description="Overview of your account">
    <DashboardContent />
  </BasicPage>
</template>

<route lang="yml">
meta:
  auth: true
</route>
```

--------------------------------

### useAuth Composable for Authentication Logic (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

A composable function that encapsulates authentication logic, including login, logout, and redirect handling. It integrates with the Pinia auth store and Vue Router for navigation. Includes a simulated delay for login.

```typescript
// src/composables/use-auth.ts
import { storeToRefs } from 'pinia'
import { useAuthStore } from '@/stores/auth'

export function useAuth() {
  const router = useRouter()
  const authStore = useAuthStore()
  const { isLogin } = storeToRefs(authStore)
  const loading = ref(false)

  function logout() {
    isLogin.value = false
    router.push({ path: '/auth/sign-in' })
  }

  function toHome() {
    router.push({ path: '/workspace' })
  }

  async function login() {
    loading.value = true
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLogin.value = true
    loading.value = false

    const redirect = router.currentRoute.value.query.redirect as string
    if (!redirect || redirect.startsWith('//')) {
      toHome()
    } else {
      router.push(redirect)
    }
  }

  return { loading, logout, login }
}

// Usage in component
const { login, logout, loading } = useAuth()

async function handleLogin() {
  await login()
}
```

--------------------------------

### Vite Configuration with Auto-Import and Routing

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Configures Vite for a Vue 3 project, enabling auto-imports for Vue APIs, composables, and components. It also sets up file-based routing via unplugin-vue-router and integrates TailwindCSS and Vite Vue Layouts.

```typescript
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Component from 'unplugin-vue-components/vite'
import { VueRouterAutoImports } from 'unplugin-vue-router'
import VueRouter from 'unplugin-vue-router/vite'
import { defineConfig } from 'vite'
import Layouts from 'vite-plugin-vue-layouts'

export default defineConfig({
  plugins: [
    VueRouter({
      exclude: ['**/components/**', '**/layouts/**', '**/data/**', '**/types/**'],
      dts: 'src/types/typed-router.d.ts',
    }),
    vue(),
    tailwindcss(),
    Layouts({ defaultLayout: 'default' }),
    AutoImport({
      imports: ['vue', VueRouterAutoImports],
      dirs: ['src/composables/**/*.ts', 'src/constants/**/*.ts', 'src/stores/**/*.ts'],
      dts: 'src/types/auto-import.d.ts',
    }),
    Component({
      dirs: ['src/components'],
      directoryAsNamespace: true,
      dts: 'src/types/auto-import-components.d.ts',
    }),
  ],
  resolve: {
    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
  },
})
```

--------------------------------

### BasicPage Layout Component in Vue

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

The BasicPage component provides a reusable layout for pages, including a header with title, description, and actions, along with a main content area. It utilizes BasicHeader and slots for customization. Dependencies include LayoutHeaderProps and BasicHeader.vue.

```vue
<!-- src/components/global-layout/basic-page.vue -->
<script lang="ts" setup>
import type { LayoutHeaderProps } from './types'
import BasicHeader from './basic-header.vue'

defineProps<LayoutHeaderProps>()
</script>

<template>
  <main>
    <BasicHeader :title="title" :description="description" :sticky="sticky">
      <template #actions>
        <slot name="actions" />
      </template>
    </BasicHeader>
    <main class="py-4">
      <slot />
    </main>
  </main>
</template>

<!-- Usage example -->
<script setup lang="ts">
import { BasicPage } from '@/components/global-layout'
</script>

<template>
  <BasicPage title="Tasks" description="Manage your tasks" sticky>
    <template #actions>
      <Button>Import</Button>
      <Button>Create Task</Button>
    </template>
    <div class="overflow-x-auto">
      <DataTable :data="tasks" :columns="columns" />
    </div>
  </BasicPage>
</template>
```

--------------------------------

### Environment Variable Validation with Zod and Vue Sonner

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Implements runtime validation for environment variables using Zod schemas. Invalid configurations trigger error notifications displayed via vue-sonner, ensuring application stability.

```typescript
// src/utils/env.ts
import { toast } from 'vue-sonner'
import { z } from 'zod'

const EnvSchema = z.object({
  VITE_SERVER_API_URL: z.url(),
  VITE_SERVER_API_PREFIX: z.string(),
  VITE_SERVER_API_TIMEOUT: z.coerce.number().default(5000),
})

export type env = z.infer<typeof EnvSchema>

const { data: env, error } = EnvSchema.safeParse(import.meta.env)

if (error) {
  console.error('Invalid env')
  const flattenError = z.flattenError(error)
  setTimeout(() => {
    toast.error('Env error: you should check your .env file', {
      description: JSON.stringify(flattenError, null, 2),
      duration: 10000,
    })
  }, 1000)
}

export default env!
```

--------------------------------

### Redirect Index Page in Nested Directories

Source: https://github.com/whbbit1999/shadcn-vue-admin/blob/main/README.md

Redirects the index page within a nested directory to a specific route. This is used when a directory does not have an `index.vue` and you want to avoid blank pages or redundant routes.

```vue
<script lang="ts" setup>
const router = useRouter()
router.replace({ name: '/errors/404' })
</script>
```

--------------------------------

### DataTable Component Types and Hooks (TypeScript)

Source: https://context7.com/whbbit1999/shadcn-vue-admin/llms.txt

Defines the TypeScript interfaces for server-side pagination and DataTable properties. It also includes a hook for generating a Vue Table instance using TanStack Table, managing its state, and handling various table interactions like sorting, filtering, and pagination.

```typescript
// src/components/data-table/types.ts
import type { ColumnDef } from '@tanstack/vue-table'

export interface ServerPagination {
  page: number
  pageSize: number
  total: number
  onPageChange: (page: number) => void
  onPageSizeChange: (pageSize: number) => void
}

export interface DataTableProps<T> {
  loading?: boolean
  columns: ColumnDef<T, any>[]
  data: T[]
  serverPagination?: ServerPagination
}
```

```typescript
// src/components/data-table/use-generate-vue-table.ts
import type { ColumnFiltersState, PaginationState, SortingState, VisibilityState } from '@tanstack/vue-table'
import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
import { DEFAULT_PAGE_SIZE } from '@/constants/pagination'
import { valueUpdater } from '@/lib/utils'

export function generateVueTable<T>(props: DataTableProps<T>) {
  const sorting = ref<SortingState>([])
  const columnFilters = ref<ColumnFiltersState>([])
  const columnVisibility = ref<VisibilityState>({})
  const rowSelection = ref({})
  const pagination = ref<PaginationState>({
    pageIndex: 0,
    pageSize: DEFAULT_PAGE_SIZE,
  })

  const table = useVueTable<T>({
    get data() { return props.data },
    get columns() { return props.columns },
    state: {
      get sorting() { return sorting.value },
      get columnFilters() { return columnFilters.value },
      get columnVisibility() { return columnVisibility.value },
      get rowSelection() { return rowSelection.value },
      get pagination() { return pagination.value },
    },
    enableRowSelection: true,
    onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
    onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
    onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
    onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
    onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, pagination),
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  })

  return table
}
```

--------------------------------

### Disable Default Layout for Specific Pages

Source: https://github.com/whbbit1999/shadcn-vue-admin/blob/main/README.md

Configures Vue Router to disable the default layout for specific pages by setting `meta.layout` to `false` in the route configuration. This is useful for pages like error or authentication pages.

```vue
<template>
  <router-view />
</template>

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.