Plugin Management

/**
 * Install a plugin and invoke its generator in an already created project
 * @param plugin - Plugin name or package name
 * @param pluginOptions - Additional options passed to the plugin
 */
vue add <plugin> [pluginOptions]

Options:
  --registry <url>    Use specified npm registry when installing dependencies (only for npm)

# Add Vue Router
vue add @vue/router

# Add Vuex state management
vue add @vue/vuex

# Add TypeScript support
vue add @vue/typescript

# Add PWA features
vue add @vue/pwa

# Add testing framework
vue add @vue/unit-jest

# Add plugin with custom registry
vue add my-plugin --registry https://registry.example.com

# Add plugin with options (passed to plugin)
vue add my-plugin --mode production --feature advanced

/**
 * Invoke the generator of a plugin in an already created project
 * @param plugin - Plugin name or package name
 * @param pluginOptions - Additional options passed to the plugin
 */
vue invoke <plugin> [pluginOptions]

Options:
  --registry <url>    Use specified npm registry when installing dependencies (only for npm)

# Re-invoke router plugin (useful after updates)
vue invoke @vue/router

# Invoke plugin with specific options
vue invoke @vue/eslint --config airbnb

# Invoke plugin with multiple options
vue invoke my-plugin --feature a --feature b --config custom

/**
 * Add a plugin to an existing project programmatically
 * @param pluginToAdd - Plugin name with optional version (e.g., "router@^1.0.0")
 * @param options - Installation and configuration options
 * @param context - Project directory path
 */
async function add(
  pluginToAdd: string,
  options?: AddOptions,
  context?: string
): Promise<void>;

interface AddOptions {
  /** NPM registry URL for plugin installation */
  registry?: string;
  /** Additional options passed to plugin generator */
  [key: string]: any;
}

import { add } from "@vue/cli";

// Add router plugin
await add("@vue/router", {}, "/path/to/project");

// Add plugin with options
await add("@vue/typescript", {
  classComponent: false,
  useTsWithBabel: true
}, "/path/to/project");

// Add plugin from custom registry
await add("my-plugin", {
  registry: "https://registry.example.com"
}, "/path/to/project");

/**
 * Invoke a plugin generator programmatically
 * @param pluginName - Plugin name to invoke
 * @param options - Options passed to plugin generator
 * @param context - Project directory path
 */
async function invoke(
  pluginName: string,
  options?: InvokeOptions,
  context?: string
): Promise<void>;

interface InvokeOptions {
  /** NPM registry URL */
  registry?: string;
  /** Additional options passed to plugin generator */
  [key: string]: any;
}

import { invoke } from "@vue/cli";

// Invoke router plugin
await invoke("@vue/router", {}, "/path/to/project");

// Invoke with specific options
await invoke("@vue/eslint", {
  config: "airbnb",
  lintOn: ["save", "commit"]
}, "/path/to/project");

/**
 * Resolve plugin ID from short name
 * @param id - Short plugin name (e.g., "router", "@vue/router")
 * @returns Full plugin package name
 */
function resolvePluginId(id: string): string;

/**
 * Check if a plugin is an official Vue CLI plugin
 * @param id - Plugin ID or package name
 * @returns Whether the plugin is official
 */
function isOfficialPlugin(id: string): boolean;

/**
 * Plugin name patterns:
 * - "router" -> "@vue/cli-plugin-router"
 * - "@vue/router" -> "@vue/cli-plugin-router"
 * - "vue-cli-plugin-custom" -> "vue-cli-plugin-custom"
 * - "@scope/vue-cli-plugin-custom" -> "@scope/vue-cli-plugin-custom"
 */

import { resolvePluginId, isOfficialPlugin } from "@vue/cli-shared-utils";

// Resolve plugin names
console.log(resolvePluginId("router")); // "@vue/cli-plugin-router"
console.log(resolvePluginId("@vue/router")); // "@vue/cli-plugin-router"
console.log(resolvePluginId("my-plugin")); // "vue-cli-plugin-my-plugin"

// Check if official
console.log(isOfficialPlugin("@vue/cli-plugin-router")); // true
console.log(isOfficialPlugin("vue-cli-plugin-custom")); // false

/**
 * Generator Plugin - Modifies project files during installation/invocation
 */
type GeneratorPlugin = (
  api: GeneratorAPI,
  options: any,
  rootOptions: Preset,
  invoking: boolean
) => any;

/**
 * Service Plugin - Extends webpack config and adds CLI commands
 * Located in vue-cli-service, not @vue/cli, but managed through plugin system
 */
interface ServicePlugin {
  (api: ServicePluginAPI, options: any): void;
}

/**
 * Prompt Module - Adds interactive prompts during project creation
 */
type PromptModule = (api: PromptModuleAPI) => void;

/**
 * Plugin installation process:
 * 1. Resolve plugin name to full package name
 * 2. Install plugin package via npm/yarn/pnpm
 * 3. Load plugin's generator function
 * 4. Create GeneratorAPI instance
 * 5. Execute plugin generator with project context
 * 6. Apply file modifications and package.json updates
 * 7. Run post-install hooks and display completion messages
 */

/**
 * Plugin structure in package.json:
 */
interface PluginPackageJson {
  /** Plugin generator entry point */
  generator?: string;
  /** Plugin index file (for service plugins) */
  main?: string;
  /** Vue CLI plugin metadata */
  vuePlugins?: {
    service?: string;
    generator?: string;
    prompts?: string;
  };
}

/**
 * Official Vue CLI plugins:
 */
const officialPlugins = {
  /** Babel transpilation */
  "@vue/cli-plugin-babel": "JavaScript transpilation with Babel",
  /** ESLint linting */
  "@vue/cli-plugin-eslint": "Code linting with ESLint",
  /** Vue Router */
  "@vue/cli-plugin-router": "Single-page app routing",
  /** Vuex state management */
  "@vue/cli-plugin-vuex": "Centralized state management",
  /** TypeScript support */
  "@vue/cli-plugin-typescript": "TypeScript language support",
  /** Progressive Web App features */
  "@vue/cli-plugin-pwa": "PWA features and service worker",
  /** Jest unit testing */
  "@vue/cli-plugin-unit-jest": "Unit testing with Jest",
  /** Mocha unit testing */
  "@vue/cli-plugin-unit-mocha": "Unit testing with Mocha",
  /** Cypress end-to-end testing */
  "@vue/cli-plugin-e2e-cypress": "E2E testing with Cypress",
  /** Nightwatch end-to-end testing */
  "@vue/cli-plugin-e2e-nightwatch": "E2E testing with Nightwatch"
};

/**
 * Common plugin management errors:
 * 
 * - Plugin not found: Plugin package doesn't exist or name is incorrect
 * - Git dirty warning: Working directory has uncommitted changes
 * - Version conflicts: Plugin requires different Vue CLI version
 * - Network errors: Unable to download plugin from registry
 * - Generator errors: Plugin generator fails during execution
 * - Permission errors: Insufficient permissions to modify files
 */

/**
 * Error handling patterns:
 */
interface PluginError extends Error {
  code?: string;
  plugin?: string;
  details?: any;
}