The Complete Production SOP: How to Deploy and Run unplugin-vue-components & Auto-Import Architecture in Autonomous AI Agents

Autonomous agent runtimes inspect workspace or global agent directories (such as ~/.claude/skills, .cursor/rules, or ~/.agents/skills) to register tool capabilities and domain SOPs. By mounting this SKILL.md file, you inform the agent's trigger parser that requests matching 'setup unplugin-vue-components' or 'generate components.d.ts' must adhere strictly to the unplugin architecture standard rather than ad-hoc script patching.

---
name: "unplugin-vue-components-auto"
description: "Automatically import UI components and composables on-demand with zero explicit import lines."
metadata:
  author: "Unplugin"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "setup unplugin-vue-components"
  - "auto import vue components vite"
  - "generate components.d.ts"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

The agent executes dependency resolution for 'unplugin-vue-components' and 'unplugin-auto-import'. It then injects both plugins into 'vite.config.ts', specifying component directories, explicit UI resolvers (e.g., ElementPlusResolver or NaiveUiResolver if installed), and custom output paths for 'components.d.ts' and 'auto-imports.d.ts'. Crucially, the agent must inspect 'tsconfig.app.json' or 'tsconfig.json' to ensure both declaration targets are explicitly appended to the 'include' array.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
      dts: 'src/auto-imports.d.ts',
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
      },
    }),
    Components({
      dirs: ['src/components'],
      extensions: ['vue'],
      deep: true,
      dts: 'src/components.d.ts',
    }),
  ],
});

Trigger the agent using natural phrasing configured in the manifest. The runtime matches input against triggers like 'setup unplugin-vue-components' and executes the multi-file setup SOP. The agent strips explicit imports from existing SFCs and creates test components in 'src/components/' to verify dynamic registration without manual import syntax.

Because 'unplugin-vue-components' and 'unplugin-auto-import' emit '.d.ts' files during the Vite development server startup or build phase, the agent must run a dry-run Vite build or trigger 'vue-tsc --noEmit' to ensure declaration files are persisted to disk and verified against TypeScript standards.

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "src/auto-imports.d.ts",
    "src/components.d.ts"
  ]
}