The Complete Production SOP: How to Deploy and Run Naive UI TypeScript-First Vue 3 Component Library in Autonomous AI Agents

---
name: "naive-ui-typescript-components"
description: "Build beautiful, type-safe web applications with Naive UI complete theme customization."
metadata:
  author: "TuSimple"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "customize naive ui theme"
  - "use naive ui data table"
  - "naive ui message provider"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Naive UI TypeScript-First Vue 3 Component Library SOP

1. Always wrap the root application or view tree with <n-config-provider :theme-overrides="themeOverrides">
2. Encapsulate components using feedback APIs inside <n-message-provider>, <n-dialog-provider>, and <n-notification-provider>.
3. Type all data table columns strictly using DataTableColumns<T> from 'naive-ui'.
4. Never instantiate useMessage() in App.vue root setup without a wrapping provider component.

import type { GlobalThemeOverrides } from 'naive-ui';

export const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#2080f0',
    primaryColorHover: '#4098fc',
    primaryColorPressed: '#1060c9',
    primaryColorSuppl: '#4098fc',
    borderRadius: '6px'
  },
  DataTable: {
    headerFontWeight: '600'
  }
};

<script setup lang="ts">
import { h } from 'vue';
import { NDataTable, NButton, useMessage, type DataTableColumns } from 'naive-ui';

interface UserRecord {
  id: string;
  name: string;
  role: string;
  status: 'active' | 'suspended';
}

const message = useMessage();

const columns: DataTableColumns<UserRecord> = [
  { title: 'ID', key: 'id' },
  { title: 'Name', key: 'name' },
  { title: 'Role', key: 'role' },
  {
    title: 'Action',
    key: 'actions',
    render(row) {
      return h(
        NButton,
        {
          size: 'small',
          onClick: () => message.info(`Managing ${row.name}`)
        },
        { default: () => 'Edit' }
      );
    }
  }
];

const data: UserRecord[] = [
  { id: '1', name: 'Alice Smith', role: 'Admin', status: 'active' },
  { id: '2', name: 'Bob Jones', role: 'Developer', status: 'active' }
];
</script>

<template>
  <n-data-table :columns="columns" :data="data" :pagination="{ pageSize: 10 }" />
</template>