Nuxt UI Dashboard Template

You can scaffold a new project using this dashboard template by running the Nuxt creation command with the specific template flag. This will set up a Vite + Vue dashboard featuring multiple pages, a collapsible sidebar, keyboard shortcuts, light/dark mode, and a command palette, all powered by Nuxt UI.

npm create nuxt@latest -- --no-modules -t ui-vue/dashboard

Start the local development server to view and interact with your dashboard. By default, it runs on http://localhost:5173.

pnpm dev

After cloning the repository, install the necessary dependencies using pnpm.

pnpm install

To prepare the application for deployment, build the production assets. You can then preview the production build locally to ensure everything works correctly before deploying.

pnpm build

pnpm preview

The project uses eslint-plugin-better-tailwindcss to enforce Tailwind CSS best practices. You can customize the plugin's behavior via the settings['better-tailwindcss'] object in your ESLint configuration.

Key configuration options:

• entryPoint: The path to your main CSS file where Tailwind directives are defined.
• attributes: An array of Tailwind-related attributes to validate. You can use getDefaultAttributes() to include standard Tailwind attributes and append custom patterns.

Example of adding a custom attribute pattern for v-bind:ui to match objectValues:

settings: {
  'better-tailwindcss': {
    entryPoint: 'src/assets/css/main.css',
    attributes: [
      ...getDefaultAttributes(),
      ['^v-bind:ui$', [{ match: 'objectValues' }]]
    ]
  }
}

The project uses a flat configuration combining typescript-eslint and eslint-plugin-vue. To maintain compatibility with the dashboard template's component structure, the following rule overrides are applied:

• vue/multi-word-component-names: Set to 'off' to allow single-word component names.
• vue/max-attributes-per-line: Set to an error with a limit of 3 attributes on a single line.
• no-undef: Set to 'off' (typically to avoid conflicts with TypeScript's own type checking).

Vue files are parsed using @typescript-eslint/parser to ensure proper type handling within <script> blocks.

{
  files: ['*.vue', '**/*.vue'],
  languageOptions: {
    parserOptions: {
      parser: '@typescript-eslint/parser'
    }
  },
  rules: {
    'vue/multi-word-component-names': 'off',
    'vue/max-attributes-per-line': ['error', { singleline: 3 }],
    'no-undef': 'off'
  }
}

Communication and time-based filtering are handled by Mail, Notification, and Period types. Mail and Notification both track unread status and include timestamps and sender/user information.

export interface Mail {
  id: number
  unread?: boolean
  from: User
  subject: string
  body: string
  date: string
}

export interface Notification {
  id: number
  unread?: boolean
  sender: User
  body: string
  date: string
}

export type Period = 'daily' | 'weekly' | 'monthly'

The template uses specific interfaces for user-related data. A User includes identity details and a UserStatus, while a Member represents a user within a specific context (like an organization) with a defined role. Note that avatar properties use the AvatarProps type from @nuxt/ui.

export type UserStatus = 'subscribed' | 'unsubscribed' | 'bounced'

export interface User {
  id: number
  name: string
  email: string
  avatar?: AvatarProps
  status: UserStatus
  location: string
}

export interface Member {
  name: string
  username: string
  role: 'member' | 'owner'
  avatar: AvatarProps
}

For financial or dashboard metrics, use the Sale and Stat interfaces. Sale tracks transaction status via SaleStatus, and Stat provides a structure for dashboard cards, including an optional formatter function to customize how numeric values are displayed.

export type SaleStatus = 'paid' | 'failed' | 'refunded'

export interface Sale {
  id: string
  date: string
  status: SaleStatus
  email: string
  amount: number
}

export interface Stat {
  title: string
  icon: string
  value: number | string
  variation: number
  formatter?: (value: number) => string
}