or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration-management.mddevelopment-tools.mdgraphical-interface.mdindex.mdplugin-management.mdprogrammatic-api.mdproject-creation.mdproject-maintenance.md
tile.json

tessl/npm-vue--cli

Command line interface for rapid Vue.js development

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/cli@5.0.x

To install, run

npx @tessl/cli install tessl/npm-vue--cli@5.0.0

index.mddocs/

Vue CLI

Vue CLI is a comprehensive command-line tool for Vue.js development that provides project scaffolding, plugin management, build tools, and a complete development workflow. It offers an interactive project creation experience with customizable presets, extensive configuration options, and a rich plugin ecosystem.

Package Information

  • Package Name: @vue/cli
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install -g @vue/cli

Core Imports

For programmatic usage (plugin development):

import { Creator, Generator, GeneratorAPI, PromptModuleAPI } from "@vue/cli";

For CommonJS:

const { Creator, Generator, GeneratorAPI, PromptModuleAPI } = require("@vue/cli");

Basic Usage

# Create a new Vue project
vue create my-project

# Add a plugin to existing project
vue add @vue/router

# Start development server
vue serve

# Build for production
vue build

# Open Vue CLI UI
vue ui

Architecture

Vue CLI is built around several key components:

  • CLI Interface: 14 commands accessible via vue <command> for project lifecycle management
  • Creator System: Project creation orchestrator with interactive prompts and preset handling
  • Plugin Architecture: Extensible generator system with hooks for file generation and configuration
  • Generator API: Comprehensive API for plugin developers to modify projects and extend functionality
  • Preset System: Reusable project configurations with support for local and remote presets
  • Configuration Management: Unified config handling for build tools, linting, testing, and development servers

Capabilities

Project Creation

Interactive project scaffolding with customizable presets, feature selection, and package manager choice.

vue create <app-name> [options]

Options:
  -p, --preset <presetName>      Skip prompts and use saved or remote preset
  -d, --default                  Skip prompts and use default preset
  -i, --inlinePreset <json>      Skip prompts and use inline JSON string as preset
  -m, --packageManager <command> Use specified npm client when installing dependencies
  -r, --registry <url>           Use specified npm registry when installing dependencies (only for npm)
  -g, --git [message]            Force git initialization with initial commit message
  -n, --no-git                   Skip git initialization
  -f, --force                    Overwrite target directory if it exists
  --merge                        Merge target directory if it exists
  -c, --clone                    Use git clone when fetching remote preset
  -x, --proxy <proxyUrl>         Use specified proxy when creating project
  -b, --bare                     Scaffold project without beginner instructions
  --skipGetStarted               Skip displaying "Get started" instructions

vue init <template> <app-name>       # (legacy) generate a project from a remote template (requires @vue/cli-init)

Project Creation

Plugin Management

Install, invoke, and manage Vue CLI plugins in existing projects.

vue add <plugin> [pluginOptions]
vue invoke <plugin> [pluginOptions]

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

Plugin Management

Development Tools

Development server, build tools, and configuration inspection.

vue serve                        # alias of "npm run serve" in the current project
vue build                        # alias of "npm run build" in the current project
vue inspect [paths...]           # inspect the webpack config in a project

Inspect Options:
  --mode <mode>                  Specify mode
  --rule <ruleName>              Inspect a specific module rule
  --plugin <pluginName>          Inspect a specific plugin
  --rules                        List all module rule names
  --plugins                      List all plugin names
  -v --verbose                   Show full function definitions in output

Development Tools

Configuration Management

CLI configuration, preset management, and project settings.

vue config [value]               # inspect and modify the config

Config Options:
  -g, --get <path>               Get value from option
  -s, --set <path> <value>       Set option value
  -d, --delete <path>            Delete option from config
  -e, --edit                     Open config with default editor
  --json                         Outputs JSON result only

Configuration Management

Project Maintenance

Update checking, upgrade utilities, and migration tools.

vue outdated                     # (experimental) check for outdated vue cli service / plugins
vue upgrade [plugin-name]        # (experimental) upgrade vue cli service / plugins
vue migrate [plugin-name]        # (experimental) run migrator for an already-installed cli plugin

Maintenance Options:
  --next                         Also check for alpha / beta / rc versions when upgrading
  -t, --to <version>             Upgrade <package-name> to a version that is not latest
  -f, --from <version>           Skip probing installed plugin, assuming it is upgraded from the designated version
  -r, --registry <url>           Use specified npm registry when installing dependencies
  --all                          Upgrade all plugins

Project Maintenance

Graphical Interface

Web-based project management interface.

vue ui                           # start and open the vue-cli ui

UI Options:
  -H, --host <host>              Host used for the UI server (default: localhost)
  -p, --port <port>              Port used for the UI server (by default search for available port)
  -D, --dev                      Run in dev mode
  --quiet                        Don't output starting messages
  --headless                     Don't open browser on start and output port

Graphical Interface

Programmatic API

APIs for plugin development and programmatic project creation.

class Creator extends EventEmitter {
  constructor(name: string, context: string, promptModules: PromptModule[]);
  create(cliOptions?: CreateOptions, preset?: Preset): Promise<void>;
  promptAndResolvePreset(answers?: Answers): Promise<Preset>;
  resolvePreset(name: string, clone?: boolean): Promise<Preset>;
}

class GeneratorAPI {
  constructor(id: string, generator: Generator, options: any, rootOptions: Preset);
  
  resolve(...paths: string[]): string;
  hasPlugin(id: string, versionRange?: string): boolean;
  extendPackage(fields: object | ((pkg: object) => object), options?: ExtendPackageOptions): void;
  render(source: string | object | FileMiddleware, additionalData?: object, ejsOptions?: object): void;
  postProcessFiles(cb: PostProcessFilesCallback): void;
  onCreateComplete(cb: (...args: any[]) => any): void;
  
  readonly cliVersion: string;
  readonly cliServiceVersion: string;
  readonly entryFile: 'src/main.ts' | 'src/main.js';
  readonly invoking: boolean;
}

class PromptModuleAPI {
  constructor(creator: Creator);
  
  injectFeature(feature: CheckboxChoiceOptions): void;
  injectPrompt(prompt: DistinctQuestion): void;
  injectOptionForPrompt(name: string, option: ChoiceOptions): void;
  onPromptComplete(cb: OnPromptCompleteCb): void;
}

Programmatic API

Types

interface Preset {
  bare?: boolean;
  projectName?: string;
  useConfigFiles?: boolean;
  plugins?: Record<string, any>;
  configs?: Record<string, any>;
  cssPreprocessor?: 'sass' | 'dart-sass' | 'less' | 'stylus';
  [props: string]: any;
}

interface ExtendPackageOptions {
  prune?: boolean;
  merge?: boolean;
  warnIncompatibleVersions?: boolean;
  forceOverwrite?: boolean;
}

interface CreateOptions {
  cwd?: string;
  proxy?: string;
  packageManager?: string;
  registry?: string;
  git?: boolean | string;
  force?: boolean;
  merge?: boolean;
  clone?: boolean;
  bare?: boolean;
  skipGetStarted?: boolean;
}

type GeneratorPlugin = (
  api: GeneratorAPI,
  options: any,
  rootOptions: Preset,
  invoking: boolean
) => any;

type FileMiddleware = (files: RenderFile, render: typeof ejs.render) => void;
type PostProcessFilesCallback = (files: RenderFile) => void;
type OnPromptCompleteCb<T = any> = (
  answers: T,
  options: { useConfigFiles: boolean; plugins: Record<string, any> }
) => void;

interface RenderFile {
  [path: string]: string | Buffer;
}