### Install Dependencies and Start Dev Server

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/README.md

Standard contributing steps: clone the repository, install dependencies using pnpm, and start the development server.

```bash
pnpm install
pnpm run dev
```

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

### Local Development Workflow

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/OVERVIEW.md

Commands for setting up local development, including installing dependencies, starting the dev server, and running type checking, linting, and formatting.

```bash
pnpm install
pnpm run dev              # Start at http://localhost:3000
pnpm run typecheck        # Check TypeScript
pnpm run lint             # Check linting
pnpm run format           # Auto-fix code
```

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

### Start Development Server

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/README.md

Starts the local development server for real-time updates and testing.

```bash
pnpm run dev
```

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

### Development Workflow Commands

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/entry-points.md

Provides essential commands for setting up and running the development environment. Includes installing dependencies, starting the dev server, and running type checks and linting.

```bash
pnpm install                    # Install all dependencies
pnpm run dev                    # Start dev server at :3000
pnpm run typecheck             # Validate TypeScript
pnpm run lint                  # Check code style
```

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

### Install Dependencies

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/README.md

Installs all project dependencies using pnpm.

```bash
pnpm install
```

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

### Initialize Nuxt Shadcn Dashboard Project

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/README.md

Use this command to quickly set up a new Nuxt Shadcn Dashboard project. Ensure you have npx and Node.js installed. If pnpm is not installed, install it globally first.

```bash
npx nuxi@latest init -t github:dianprata/nuxt-shadcn-dashboard my-dashboard-app
cd my-dashboard-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
```

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

### Build and Preview Production Site

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Builds the Nuxt project for production and then starts a local server to preview the production build.

```bash
pnpm run build
# Then preview with:
pnpm run preview
```

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

### Install Project Dependencies

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Installs project dependencies using pnpm and runs the post-installation script for Nuxt preparation.

```bash
# Using pnpm (required)
pnpm install

# After install, Nuxt is auto-prepared
pnpm run postinstall
```

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

### Build and Preview Production Build

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/OVERVIEW.md

Commands to install dependencies, build the project for production, generate a static site, and preview the production build.

```bash
pnpm install          # Install dependencies
pnpm run build        # Build for production
pnpm run generate     # Generate static site (optional)
pnpm run preview      # Preview production build
```

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

### App Settings Configuration Example

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/README.md

This example shows how to configure app settings in `app.config.ts`. To apply changes after modifying settings, clear the 'app_settings' cookie.

```typescript
export default defineAppConfig({
  appSettings: {
    sidebar: {
      collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
      side: 'left', // 'left' | 'right'
      variant: 'inset', // 'sidebar' | 'floating' | 'inset'
    },
    theme: {
      color: 'default', // 'default' | 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'teal' | 'yellow' | 'rose'
      type: 'scaled', // 'default' | 'mono' | 'scaled'
    }
  },
})
```

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

### Task Data Model Usage Example

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/data-models.md

Demonstrates filtering tasks by priority, retrieving label names, getting status with icons, and preparing options for UI select components.

```typescript
<script setup lang="ts">
import { labels, statuses, priorities } from '~/components/tasks/data/data'

// Filter by priority
const highPriorityTasks = tasks.filter(t => t.priority === 'high')

// Get label name
const getLabelName = (labelValue: string) => {
  return labels.find(l => l.value === labelValue)?.label
}

// Get status with icon
const getStatusWithIcon = (statusValue: string) => {
  return statuses.find(s => s.value === statusValue)
}

// Filter options for UI select components
const priorityOptions = priorities.map(p => ({
  value: p.value,
  label: p.label
}))
</script>

<template>
  <select>
    <option v-for="priority in priorities" :key="priority.value" :value="priority.value">
      {{ priority.label }}
    </option>
  </select>
</template>
```

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

### Example: Simple Class Merging with cn

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/utilities.md

Demonstrates basic merging of static class names using the 'cn' utility.

```vue
<script setup lang="ts">
import { cn } from '~/lib/utils'

// Simple class merging
const buttonClasses = cn(
  'px-4 py-2',
  'rounded-lg',
  'bg-blue-500'
)
// Result: 'px-4 py-2 rounded-lg bg-blue-500'

// Conditional classes
const isActive = ref(true)
const styles = computed(() => cn(
  'px-4 py-2 rounded',
  isActive.value && 'bg-blue-500 text-white',
  !isActive.value && 'bg-gray-200 text-gray-600'
))

// Resolving Tailwind conflicts
const conflictResolved = cn(
  'bg-red-500',
  'bg-blue-500'  // This will override red
)
// Result: 'bg-blue-500'

// Array of classes
const baseClasses = ['p-4', 'rounded-md']
const additionalClasses = ['shadow-lg', 'border']
const combined = cn(baseClasses, additionalClasses)

// Object-based conditions (with clsx)
const buttonClass = cn({
  'px-4 py-2': true,
  'rounded-lg': true,
  'hover:bg-blue-600': true,
  'cursor-pointer': !disabled.value,
  'cursor-not-allowed': disabled.value
})
</script>

<template>
  <button :class="buttonClass">Click me</button>
</template>
```

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

### Application Configuration with Theme

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Example of setting application configuration including sidebar and theme options. User preferences stored in cookies can override these values.

```typescript
// In app.config.ts
export default defineAppConfig({
  appSettings: {
    sidebar: {
      collapsible: 'icon',
      side: 'left',
      variant: 'floating',
    },
    theme: {
      color: 'blue',
      type: 'scaled',
    },
  },
})
```

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

### Vue.js Table Usage Example

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/data-models.md

Demonstrates how to set up and use a Vue.js table with custom columns, sorting, filtering, and row selection. Requires @tanstack/vue-table.

```vue
<script setup lang="ts">
import { columns } from '~/components/tasks/components/columns'
import { useVueTable, FlexRender, getCoreRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/vue-table'
import type { Task } from '~/components/tasks/data/schema'

const data = ref<Task[]>([])
const sorting = ref([])
const columnFilters = ref([])
const columnVisibility = ref({})
const rowSelection = ref({})

const table = useVueTable({
  get data() { return data.value },
  columns: columns,
  state: {
    get sorting() { return sorting.value },
    get columnFilters() { return columnFilters.value },
    get columnVisibility() { return columnVisibility.value },
    get rowSelection() { return rowSelection.value },
  },
  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getSortedRowModel: getSortedRowModel(),
})
</script>

<template>
  <div class="rounded-md border">
    <table>
      <thead>
        <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
          <th v-for="header in headerGroup.headers" :key="header.id">
            <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in table.getRowModel().rows" :key="row.id">
          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
```

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

### Change Theme Settings

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/README.md

Example of how to update the application's theme color and type using the `useAppSettings` composable. Ensure `useAppSettings` and theme constants are imported.

```typescript
import { useAppSettings } from '~/composables/useAppSettings'
import { THEME_COLORS, THEME_TYPE } from '~/constants/themes'

const { updateAppSettings } = useAppSettings()

updateAppSettings({
  theme: {
    color: 'blue',
    type: 'scaled'
  }
})
```

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

### Using THEME_TYPE for Theme Selection

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/constants.md

Shows how to import and use the THEME_TYPE constant to manage different theme variations. Includes an example of updating application settings based on the selected theme type.

```typescript
<script setup lang="ts">
import { THEME_TYPE } from '~/constants/themes'

const selectedType = ref('default')

const changeThemeType = (type: ThemeType) => {
  const { updateAppSettings } = useAppSettings()
  updateAppSettings({
    theme: { type }
  })
}
</script>

<template>
  <div>
    <button
      v-for="type in THEME_TYPE"
      :key="type"
      @click="changeThemeType(type)"
      :class="{ active: selectedType === type }"
    >
      {{ type }}
    </button>
  </div>
</template>
```

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

### TanStack Vue Table Setup

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/PATTERNS.md

Initializes TanStack Vue Table with data, columns, and state management for sorting, filtering, and selection.

```vue
<script setup lang="ts">
import { useVueTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/vue-table'

const sorting = ref([])
const columnFilters = ref([])
const columnVisibility = ref({})
const rowSelection = ref({})

const table = useVueTable({
  get data() { return data.value },
  columns: columns,
  state: {
    get sorting() { return sorting.value },
    get columnFilters() { return columnFilters.value },
    get columnVisibility() { return columnVisibility.value },
    get rowSelection() { return rowSelection.value },
  },
  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getSortedRowModel: getSortedRowModel(),
})
</script>

<template>
  <div class="rounded-md border">
    <table>
      <thead>
        <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
          <th v-for="header in headerGroup.headers" :key="header.id">
            <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in table.getRowModel().rows" :key="row.id">
          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
```

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

### Nuxt Auto-Import Configuration for lib/

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Enables auto-importing utilities from the `~/lib/` directory in Nuxt. Provides examples of available utilities like `cn()` and `valueUpdater()`.

```typescript
imports: {
  dirs: ['./lib']
}
```

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

### Modify App Settings Defaults

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/OVERVIEW.md

Example of how to change default application settings by modifying the `appSettings` object in `app/app.config.ts`.

```typescript
export default defineAppConfig({
  appSettings: {
    // Change defaults here
  }
})
```

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

### Linting

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/README.md

Checks the code for style guide violations and potential issues.

```bash
pnpm run lint
```

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

### Nuxt Configuration Setup

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Complete Nuxt 4 configuration including devtools, CSS, Vite plugins, component paths, module integrations, and shadcn-nuxt specific settings. This configuration sets up the project's build and runtime environment.

```typescript
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/tailwind.css'],
  vite: {
    plugins: [tailwindcss()]
  },
  components: [
    {
      path: '~/components',
      extensions: ['.vue']
    }
  ],
  modules: [
    'shadcn-nuxt',
    '@vueuse/nuxt',
    '@nuxt/eslint',
    '@nuxt/icon',
    '@pinia/nuxt',
    '@nuxtjs/color-mode',
    '@nuxt/fonts',
    '@nuxthub/core'
  ],
  shadcn: {
    prefix: '',
    componentDir: '~/components/ui'
  },
  colorMode: {
    classSuffix: ''
  },
  eslint: {
    config: {
      standalone: false
    }
  },
  fonts: {
    defaults: {
      weights: [300, 400, 500, 600, 700, 800]
    }
  },
  routeRules: {
    '/components': { redirect: '/components/accordion' },
    '/settings': { redirect: '/settings/profile' }
  },
  imports: {
    dirs: ['./lib']
  },
  compatibilityDate: '2026-03-13',
  nitro: {
    prerender: {
      ignore: [
        '/examples/forms',
        '/terms',
        '/privacy',
        '/components/pagination',
        '/docs'
      ]
    }
  },
  app: {
    baseURL: '/nuxt-shadcn-dashboard/'
  }
})
```

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

### Example: Updating Sorting and Visibility with valueUpdater

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/utilities.md

Demonstrates how to use 'valueUpdater' to manage sorting and column visibility states within a Vue component, integrating with TanStack Vue Table.

```vue
<script setup lang="ts">
import { valueUpdater } from '~/lib/utils'
import { useVueTable, FlexRender, getCoreRowModel } from '@tanstack/vue-table'

const sorting = ref([])
const columnVisibility = ref({})

// Update with a plain value
const setSorting = (newSorting) => {
  valueUpdater(newSorting, sorting)
}

// Update with a function
const toggleSorting = (id) => {
  valueUpdater(old => {
    // Modify the old value
    return old.some(s => s.id === id)
      ? old.filter(s => s.id !== id)
      : [...old, { id, desc: false }]
  }, sorting)
}

// With TanStack Vue Table
const table = useVueTable({
  get data() {
    return data.value
  },
  columns: columns,
  state: {
    get sorting() {
      return sorting.value
    },
    get columnVisibility() {
      return columnVisibility.value
    }
  },
  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
  getCoreRowModel: getCoreRowModel(),
})
</script>

<template>
  <div class="rounded-md border">
    <table>
      <thead>
        <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
          <th v-for="header in headerGroup.headers" :key="header.id">
            <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
          </th>
        </tr>
      </thead>
    </table>
  </div>
</template>
```

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

### Complete Theme Customization UI

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/constants.md

Provides a comprehensive example of a theme customizer component that allows users to select both color and type, apply changes, and reset to defaults. It integrates constants and composables for theme management.

```typescript
<script setup lang="ts">
import { THEME_COLORS, THEME_TYPE } from '~/constants/themes'
import type { ThemeColor, ThemeType } from '~/constants/themes'
import { useAppSettings } from '~/composables/useAppSettings'

const { updateAppSettings, theme } = useAppSettings()

const selectedColor = ref<ThemeColor>('default')
const selectedType = ref<ThemeType>('default')

const applyTheme = () => {
  updateAppSettings({
    theme: {
      color: selectedColor.value,
      type: selectedType.value
    }
  })
}

const resetToDefaults = () => {
  selectedColor.value = 'default'
  selectedType.value = 'default'
  applyTheme()
}
</script>

<template>
  <div class="theme-customizer">
    <h2>Theme Customizer</h2>
    
    <fieldset>
      <legend>Colors</legend>
      <div class="color-grid">
        <button
          v-for="color in THEME_COLORS"
          :key="color.name"
          @click="selectedColor = color.name"
          :class="{ selected: selectedColor === color.name }"
          :style="{ backgroundColor: color.value }"
          :title="color.name"
        />
      </div>
    </fieldset>
    
    <fieldset>
      <legend>Theme Type</legend>
      <div class="type-buttons">
        <button
          v-for="type in THEME_TYPE"
          :key="type"
          @click="selectedType = type"
          :class="{ active: selectedType === type }"
        >
          {{ type }}
        </button>
      </div>
    </fieldset>
    
    <div class="actions">
      <button @click="applyTheme">Apply Theme</button>
      <button @click="resetToDefaults">Reset to Defaults</button>
    </div>
    
    <p>Current: {{ theme.color }} / {{ theme.type }}</p>
  </div>
</template>
```

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

### Vue 3 Composition Function Pattern

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/OVERVIEW.md

Illustrates the standard setup and usage patterns for Vue 3 composables. This pattern is followed by all composables in the project.

```typescript
function useExample() {
  const state = ref('initial')
  const update = (value) => { state.value = value }
  return { state, update }
}

// Usage
const { state, update } = useExample()
```

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

### Sample Mail Message Object

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/data-models.md

An example of a single mail message object, detailing its properties like id, sender, subject, body, date, read status, and labels.

```typescript
{
  id: '6c84fb90-12c4-11e1-840d-7b25c5ee775a',
  name: 'William Smith',
  email: 'williamsmith@example.com',
  subject: 'Meeting Tomorrow',
  text: 'Hi, let\'s have a meeting tomorrow to discuss the project. I\'ve been reviewing the project details and have some ideas I\'d like to share. It\'s crucial that we align on our next steps to ensure the project\'s success.\n\n  Please come prepared with any questions or insights you may have. Looking forward to our meeting!\n\n  Best regards, William',
  date: '2023-10-22T09:00:00',
  read: true,
  labels: ['meeting', 'work', 'important'],
}
```

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

### Nuxt Color Mode Setup

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Configures the `@nuxtjs/color-mode` module to manage dark mode. The `colorMode.preference` can be set to 'light', 'dark', or 'system'. CSS classes are applied to the `<html>` element.

```typescript
colorMode: {
  classSuffix: ''
}
```

```typescript
const colorMode = useColorMode()
colorMode.preference = 'dark' // 'light', 'dark', or 'system'
```

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

### Modify Theme Colors

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/OVERVIEW.md

Example of how to modify theme colors by editing the `THEME_COLORS` array in `app/constants/themes.ts`.

```typescript
export const THEME_COLORS = [
  // Add or modify colors here
]
```

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

### Preview Production Build

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/README.md

Locally previews the production build to ensure it functions as expected before deployment.

```bash
pnpm run preview
```

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

### Build for Production

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/README.md

Compiles the project into an optimized build for deployment.

```bash
pnpm run build
```

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

### Mock Composable in Component Test

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/PATTERNS.md

Mock composables when testing components that use them. This example mocks `useKanban` for a component test.

```typescript
// Component that uses composable
<script setup>
const { board, addTask } = useKanban()
</script>

// Mock the composable for testing
vi.mock('~/composables/useKanban', () => ({
  useKanban: () => ({
    board: ref(mockBoard),
    addTask: vi.fn()
  })
}))
```

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

### Mail Message Type and Data

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/data-models.md

Defines the structure for individual mail messages and provides an example array of mail objects.

```typescript
export type Mail = (typeof mails)[number]

export const mails = [
  {
    id: '6c84fb90-12c4-11e1-840d-7b25c5ee775a',
    name: 'William Smith',
    email: 'williamsmith@example.com',
    subject: 'Meeting Tomorrow',
    text: 'Hi, let\'s have a meeting tomorrow...', 
    date: '2023-10-22T09:00:00',
    read: true,
    labels: ['meeting', 'work', 'important'],
  },
  // ... more mails
]
```

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

### Package JSON Configuration

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/entry-points.md

Defines the main entry point for Nuxt configuration and enables ES modules.

```json
{
  "name": "nuxt-shadcn-dashboard",
  "main": "./nuxt.config.ts",
  "type": "module"
}
```

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

### Test Composable Logic

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/PATTERNS.md

Test composable functions independently to ensure pure logic. This example shows testing the `useKanban` composable for adding a task.

```typescript
// ✅ Easy to test - pure logic, no DOM
test('useKanban adds task', () => {
  const { board, addTask } = useKanban()
  
  addTask('todo', { title: 'New task' })
  
  expect(board.value.columns[0].tasks).toHaveLength(1)
  expect(board.value.columns[0].tasks[0].title).toBe('New task')
})
```

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

### Nuxt Configuration with Modules

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/entry-points.md

Primary bootstrap configuration file for Nuxt, loading modules, setting up the build system, and configuring auto-imports.

```typescript
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    'shadcn-nuxt',
    '@vueuse/nuxt',
    '@nuxt/eslint',
    '@nuxt/icon',
    '@pinia/nuxt',
    '@nuxtjs/color-mode',
    '@nuxt/fonts',
    '@nuxthub/core'
  ],
  imports: {
    dirs: ['./lib']
  },
  // ... rest of config
})
```

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

### Build Commands for Nuxt Shadcn Dashboard

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/entry-points.md

Commands to build, preview, and generate the Nuxt Shadcn Dashboard project for production.

```bash
pnpm run build                 # Full build
pnpm run preview               # Preview production build locally
pnpm run generate              # Generate static site (optional)
```

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

### Accessing and Using Theme Colors

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/constants.md

Demonstrates how to import and utilize the THEME_COLORS constant to access all available theme colors or specific ones. It also shows how to integrate these colors into a UI component like a color picker.

```typescript
<script setup lang="ts">
import { THEME_COLORS } from '~/constants/themes'

// Access all theme colors
const colors = THEME_COLORS

// Get a specific color
const blueColor = THEME_COLORS.find(c => c.name === 'blue')

// Use colors in a color picker
const selectedColor = ref(THEME_COLORS[0].name)
</script>

<template>
  <div class="color-picker">
    <button
      v-for="color in THEME_COLORS"
      :key="color.name"
      :style="{ backgroundColor: color.value }"
      @click="selectedColor = color.name"
      :class="{ active: selectedColor === color.name }"
    >
      {{ color.name }}
    </button>
  </div>
</template>
```

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

### Format Code

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/README.md

Automatically formats the code according to project style guidelines.

```bash
pnpm run format
```

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

### Root Vue Component (app.vue)

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/entry-points.md

The root Vue component responsible for global theme setup, SEO metadata, keyboard shortcuts, and layout/notification initialization.

```typescript
<script setup lang="ts">
const colorMode = useColorMode()
const { theme } = useAppSettings()

useHead({
  meta: [ /* metadata */ ],
  link: [ /* favicon */ ],
  htmlAttrs: { lang: 'en' },
  bodyAttrs: {
    class: computed(() => `color-${theme.value?.color || 'default'} theme-${theme.value?.type || 'default'}`)
  },
})

defineShortcuts({
  'G-H': () => router.push('/'),
  'G-E': () => router.push('/email'),
})
</script>

<template>
  <Body class="overscroll-none antialiased bg-background text-foreground">
    <ConfigProvider :dir="dir">
      <div id="app" vaul-drawer-wrapper>
        <NuxtLayout>
          <NuxtPage />
        </NuxtLayout>
        <AppSettings />
      </div>
      <Toaster :theme="colorMode.preference" />
    </ConfigProvider>
  </Body>
</template>
```

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

### Generate Static Site

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/README.md

Generates a fully static version of the site, useful for static hosting platforms.

```bash
pnpm run generate
```

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

### File-Based Routing Structure

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/entry-points.md

Illustrates the directory structure for pages and how it maps to URL routes. Nested routes and grouped routes are shown.

```treeview
pages/
├── index.vue                    → /
├── email.vue                    → /email
├── kanban.vue                   → /kanban
├── tasks.vue                    → /tasks
├── (auth)/
│   ├── login.vue               → /login
│   ├── register.vue            → /register
│   ├── forgot-password.vue     → /forgot-password
│   ├── otp.vue                 → /otp
│   ├── otp-1.vue               → /otp-1
│   └── otp-2.vue               → /otp-2
├── (error)/
│   ├── 401.vue                 → /401
│   ├── 403.vue                 → /403
│   ├── 404.vue                 → /404
│   ├── 500.vue                 → /500
│   └── 503.vue                 → /503
├── settings/
│   ├── profile.vue             → /settings/profile
│   ├── account.vue             → /settings/account
│   ├── appearance.vue          → /settings/appearance
│   ├── notifications.vue       → /settings/notifications
│   └── display.vue             → /settings/display
└── components/
    ├── accordion.vue           → /components/accordion
    ├── ... 60+ components
    └── tooltip.vue             → /components/tooltip
```

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

### ThemeType Type Usage Example

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/constants.md

Demonstrates how to use the 'ThemeType' type alias in a Vue component to strongly type a variable that holds a selected theme type.

```typescript
<script setup lang="ts">
import type { ThemeType } from '~/constants/themes'

const selectedType: Ref<ThemeType> = ref('default')

const setType = (type: ThemeType) => {
  selectedType.value = type
}
</script>
```

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

### Set HTML Meta Tags with useHead

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Configure HTML meta tags, viewport settings, theme color, and favicon links using the `useHead` composable. This is useful for setting up basic HTML structure and SEO elements.

```typescript
useHead({
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { key: 'theme-color', name: 'theme-color', content: color },
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' },
  ],
  htmlAttrs: {
    lang: 'en',
  },
})
```

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

### ThemeColor Type Usage Example

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/constants.md

Illustrates how to use the 'ThemeColor' type alias in a Vue component to strongly type a variable that holds a selected theme color.

```typescript
<script setup lang="ts">
import type { ThemeColor } from '~/constants/themes'

const selectedColor: Ref<ThemeColor> = ref('default')

const setColor = (color: ThemeColor) => {
  selectedColor.value = color
}
</script>
```

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

### Project Package Manager Configuration

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Specifies the required Node.js and pnpm versions in package.json, along with the default package manager.

```json
{
  "engines": {
    "node": "22.x",
    "pnpm": ">=9"
  },
  "packageManager": "pnpm@10.10.0"
}
```

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

### Vee-Validate Form Setup and Template

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/PATTERNS.md

Sets up a Vue form component using Vee-Validate with the defined Zod schema and renders input fields with error handling.

```vue
<script setup lang="ts">
const { handleSubmit, values, errors } = useForm({
  validationSchema: loginSchema,
  initialValues: {
    email: '',
    password: '',
    remember: false,
  },
})

const onSubmit = handleSubmit((values) => {
  console.log('Valid form:', values)
})
</script>

<template>
  <form @submit="onSubmit">
    <input v-model="values.email" type="email" />
    <span v-if="errors.email">{{ errors.email }}</span>
    
    <input v-model="values.password" type="password" />
    <span v-if="errors.password">{{ errors.password }}</span>
    
    <button type="submit">Login</button>
  </form>
</template>
```

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

### Keyboard Shortcuts Management Flow

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/OVERVIEW.md

Details the architecture for handling keyboard shortcuts, involving global listeners, shortcut definition parsing, context information, and handler execution.

```text
┌──────────────────────────────────┐
│  Global keydown listener         │
└────────────┬─────────────────────┘
             │
             ▼
┌──────────────────────────────────┐
│  defineShortcuts()               │
│  - Parses config                 │
│  - Matches key combinations      │
│  - Checks conditions             │
└────────────┬─────────────────────┘
             │
             ▼
┌──────────────────────────────────┐
│  useShortcuts() context info     │
│  - macOS detection               │
│  - Active element (input check)  │
│  - Prevents shortcuts in inputs  │
└────────────┬─────────────────────┘
             │
             ▼
┌──────────────────────────────────┐
│  Handler execution               │
│  (route navigation, etc.)        │
└──────────────────────────────────┘
```

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

### Use useAppSettings Composable

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/composables.md

Demonstrates how to use the useAppSettings composable to manage application-wide settings like sidebar configuration and theme. It shows updating settings and accessing reactive values.

```typescript
<script setup lang="ts">
const { updateAppSettings, sidebar, theme } = useAppSettings()

const changeSidebarStyle = () => {
  updateAppSettings({
    sidebar: {
      collapsible: 'icon',
      side: 'left',
      variant: 'floating'
    }
  })
}

const changeTheme = () => {
  updateAppSettings({
    theme: {
      color: 'blue',
      type: 'mono'
    }
  })
}

const currentTheme = computed(() => theme.value.color) // e.g., 'default'
</script>

<template>
  <div>
    <div>Sidebar variant: {{ sidebar.variant }}</div>
    <div>Theme: {{ theme.color }}</div>
    <button @click="changeSidebarStyle">Update Sidebar</button>
    <button @click="changeTheme">Change Theme</button>
  </div>
</template>
```

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

### TanStack Vue Table Sorting State Update

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/utilities.md

Example of using valueUpdater within the onSortingChange callback of TanStack Vue Table. It demonstrates how the updater function handles both direct values and functions for state updates.

```typescript
onSortingChange: (updaterOrValue: Updater<SortingState>) => {
  valueUpdater(updaterOrValue, sorting)
}
```

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

### defineShortcuts Usage

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/composables.md

Demonstrates how to use the defineShortcuts composable to register various types of keyboard shortcuts, including simple, chained, and conditional shortcuts with input context awareness.

```APIDOC
## defineShortcuts

### Description
Defines a set of keyboard shortcuts for the application. This composable allows mapping key combinations to handler functions, with options for chaining keys, specifying input contexts, and defining conditional execution.

### Method
`defineShortcuts(shortcuts: object)`

### Parameters
#### Shortcuts Object
- **shortcuts** (object) - Required - An object where keys are shortcut combinations and values are either handler functions or configuration objects.
  - **shortcut_key** (string) - Required - The keyboard shortcut combination. Modifiers are represented by underscores (e.g., `ctrl_k`, `shift_alt_a`). Chained keys are represented by hyphens (e.g., `g-h`).
  - **handler** (function) - Required - The function to execute when the shortcut is triggered.
  - **usingInput** (string | boolean) - Optional - Specifies the input context for the shortcut. 
    - `false`: The shortcut will never trigger while typing in any input field.
    - `true`: The shortcut will always trigger, even while typing in input fields.
    - `'input_name'`: The shortcut will only trigger when typing in an input field with the specified `name` attribute.
  - **whenever** (array) - Optional - An array of conditions (e.g., computed refs) that must all be true for the shortcut to be active.

### Error Handling
Invalid shortcut key formats (e.g., using hyphens for modifiers or underscores for chained keys) will be logged to the console with a stack trace.

### Platform Behavior
- **macOS:** The Meta key is displayed as `⌘` and functions as expected. 
- **Windows/Linux:** The Meta key is automatically converted to `Ctrl`, and Meta shortcuts behave as Ctrl shortcuts.
- The Shift key behavior is specifically checked for alphabetical keys to prevent conflicts with shifted symbols.
```

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

### Mail Data Manipulation and Usage in Vue

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/data-models.md

Demonstrates common mail data operations in a Vue.js setup, including filtering, searching, sorting, and updating mail status. Requires importing mail, account, and contact data.

```typescript
<script setup lang=\"ts\">
import { mails, accounts, contacts } from '~/components/mail/data/mails'
import type { Mail, Account, Contact } from '~/components/mail/data/mails'

// Filter unread mails
const unreadMails = computed(() => mails.filter(m => !m.read))

// Get mails by label
const getMails = (label: string) => mails.filter(m => m.labels.includes(label))

// Search in mail content
const searchMails = (query: string) => {
  const q = query.toLowerCase()
  return mails.filter(m =>
    m.subject.toLowerCase().includes(q) ||
    m.text.toLowerCase().includes(q) ||
    m.name.toLowerCase().includes(q)
  )
}

// Get sender by email
const getSender = (email: string) => mails.find(m => m.email === email)

// Sort by date
const sortedMails = computed(() =>
  [...mails].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
)

// Get contact suggestions
const getContactSuggestions = (input: string) => {
  return contacts.filter(c =>
    c.name.toLowerCase().includes(input.toLowerCase()) ||
    c.email.toLowerCase().includes(input.toLowerCase())
  )
}

// Mark as read
const markAsRead = (mailId: string) => {
  const mail = mails.find(m => m.id === mailId)
  if (mail) {
    mail.read = true
  }
}

// Add label
const addLabel = (mailId: string, label: string) => {
  const mail = mails.find(m => m.id === mailId)
  if (mail && !mail.labels.includes(label)) {
    mail.labels.push(label)
  }
}
</script>

<template>
  <div>
    <div>Unread: {{ unreadMails.length }}</div>
    <div>Work emails: {{ getMails('work').length }}</div>
    <div v-for="mail in sortedMails" :key="mail.id" class="mail-item">
      <div :class="{ 'font-bold': !mail.read }">{{ mail.name }}</div>
      <div>{{ mail.subject }}</div>
      <div class="text-sm">{{ new Date(mail.date).toLocaleDateString() }}</div>
      <div class="labels">
        <span v-for="label in mail.labels" :key="label" class="badge">
          {{ label }}
        </span>
      </div>
    </div>
  </div>
</template>
```

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

### Run Linting and Formatting

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/OVERVIEW.md

Checks for code style violations and automatically fixes them. Use 'lint' to check and 'format' to auto-fix.

```bash
pnpm run lint              # Check violations
pnpm run format            # Auto-fix violations
```

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

### Add Keyboard Shortcuts

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/OVERVIEW.md

Shows how to define custom keyboard shortcuts by adding entries within the `defineShortcuts` function in `app/app.vue`.

```typescript
defineShortcuts({
  // Add shortcuts here
})
```

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

### useShortcuts

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/composables.md

Composable for detecting keyboard context and platform information. It provides details about the user's operating system, the currently active DOM element, and whether the user is currently interacting with an input field.

```APIDOC
## useShortcuts

Composable for detecting keyboard context and platform information.

### Source

`app/composables/useShortcuts.ts`

### Function Signature

```typescript
export const useShortcuts: ReturnType<typeof createSharedComposable<() => {
  macOS: ComputedRef<RegExpMatchArray | null>
  metaSymbol: Ref<string>
  activeElement: Ref<Element | null>
  usingInput: ComputedRef<string | boolean>
}>>
```

### Return Value

| Property | Type | Description |
|----------|------|-------------|
| macOS | `ComputedRef<RegExpMatchArray | null>` | Truthy if platform is macOS, falsy otherwise |
| metaSymbol | `Ref<string>` | Display symbol: `'⌘'` on Mac, `'Ctrl'` on others |
| activeElement | `Ref<Element | null>` | Currently focused DOM element |
| usingInput | `ComputedRef<string | boolean>` | False if not in input, input name/true if in editable element |

### Behavior

- Detects macOS by checking user agent for "Macintosh"
- Detects if user is typing in INPUT, TEXTAREA, or contentEditable elements
- Creates a shared composable (singleton) - same instance across all components
- Updates metaSymbol on mount after checking platform

### Example

```typescript
<script setup lang="ts">
import { useShortcuts } from '~/composables/useShortcuts'

const { macOS, metaSymbol, activeElement, usingInput } = useShortcuts()

const showKeyHint = computed(() => {
  return `Press ${metaSymbol.value}+K`
})

const canUseShortcuts = computed(() => {
  return !usingInput.value // Shortcuts disabled while typing
})
</script>

<template>
  <div>
    <div v-if="macOS">Running on macOS</div>
    <div>{{ showKeyHint }}</div>
    <div v-if="!canUseShortcuts">Shortcuts disabled while typing</div>
  </div>
</template>
```
```

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

### Module Graph Summary

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/entry-points.md

Visualizes the module dependencies and runtime flow of the Nuxt application. It shows how `nuxt.config.ts` bootstraps the application and its relationship with other core files and modules.

```text
nuxt.config.ts (bootstrap)
    │
    ├─→ app.config.ts (defaults)
    │
    ├─→ plugins/ssrWidth.ts (runtime)
    │
    ├─→ app.vue (root component)
    │   ├─→ layouts/* (wrappers)
    │   ├─→ pages/* (routes)
    │   └─→ components/* (UI)
    │       ├─→ composables/* (logic)
    │       │   ├─→ types/* (data)
    │       │   └─→ constants/* (config)
    │       └─→ lib/* (utilities)
    │
    └─→ 8 Nuxt modules (features)
        ├─→ shadcn-nuxt (components)
        ├─→ @vueuse/nuxt (composition)
        ├─→ @pinia/nuxt (state)
        ├─→ @nuxtjs/color-mode (themes)
        └─→ ... (6 more)
```

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

### Configure ssrWidth Plugin

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Integrate the ssrWidth plugin from VueUse to provide SSR-safe window width detection. This ensures consistent behavior of width-dependent features on both server and client.

```typescript
import { provideSSRWidth } from '@vueuse/core'

export default defineNuxtPlugin((nuxtApp) => {
  provideSSRWidth(1024, nuxtApp.vueApp)
})
```

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

### ShortcutsOptions Interface

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/types.md

Defines options for configuring the keyboard shortcut system. Use this to adjust settings like the delay for chained key presses.

```typescript
export interface ShortcutsOptions {
  chainDelay?: number
}
```

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

### Theme System with CSS Custom Properties

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/configuration.md

Demonstrates how color themes are applied using CSS custom properties via body classes. The `bodyAttrs` in `app.vue` dynamically set these classes based on the theme configuration.

```html
<body class="color-blue theme-scaled">

```

```typescript
bodyAttrs: {
  class: computed(() => `color-${theme.value?.color || 'default'} theme-${theme.value?.type || 'default'}`)
}
```

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

### Kanban Board State Management Flow

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/OVERVIEW.md

Illustrates the flow of data and state management for the Kanban board feature, from localStorage persistence to the useKanban composable and the KanbanBoard Vue component.

```text
┌──────────────────────────┐
│  localStorage            │ ◄─── Persistence
│  kanban.board.v1         │
│  kanban.task.counter     │
└────────────┬─────────────┘
             │
             ▼
┌──────────────────────────┐
│  useKanban() composable  │
│  - board (Ref)           │
│  - Methods:
│    - addColumn()
│    - addTask()
│    - updateTask()
│    - removeTask()
└────────────┬─────────────┘
             │
             ▼
┌──────────────────────────┐
│  KanbanBoard.vue         │
│  - Displays board        │
│  - Handles drag/drop     │
│  - Calls composable      │
└──────────────────────────┘
```

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

### Default Settings for useAppSettings

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/composables.md

Shows the default configuration for the useAppSettings composable when no cookie or app configuration is present.

```typescript
{
  sidebar: {
    collapsible: 'offcanvas',
    side: 'left',
    variant: 'sidebar',
  },
  theme: {
    color: 'default',
    type: 'default',
  },
}
```

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

### defineShortcuts

Source: https://github.com/dianprata/nuxt-shadcn-dashboard/blob/main/_autodocs/api-reference/composables.md

Composable for defining and handling keyboard shortcuts with support for chained keys. It registers a global keydown listener and manages shortcut registration and execution.

```APIDOC
## defineShortcuts

Composable for defining and handling keyboard shortcuts with support for chained keys.

### Source

`app/composables/defineShortcuts.ts`

### Function Signature

```typescript
export function defineShortcuts(
  config: ShortcutsConfig,
  options: ShortcutsOptions = {}
): void
```

### Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| config | `ShortcutsConfig` | Yes | — | Shortcut key mappings and handlers |
| options | `ShortcutsOptions` | No | `{}` | Configuration options |
| options.chainDelay | number | No | 800 | Milliseconds before clearing chained key buffer |

### Behavior

- Registers a global keydown listener
- Supports combined modifiers (Ctrl, Shift, Alt, Meta) using underscore: `ctrl_shift_s`
- Supports chained keys (press two keys in sequence) using hyphen: `g-h`
- Automatically converts Meta to Ctrl on non-macOS platforms
- Prevents default browser behavior when shortcut matches
- Clears chained input buffer after delay or successful match
- Respects input context based on ShortcutConfig.usingInput
- Validates shortcut key formats with regex

### Key Format

**Combined shortcuts (with modifiers):**
```
ctrl_s        # Ctrl+S
shift_a       # Shift+A
alt_shift_d   # Alt+Shift+D
meta_k        # Cmd+K on Mac, Ctrl+K on others
```

**Chained shortcuts (two keys in sequence):**
```
g-h           # Press G then H
g-e           # Press G then E
```
```