Vue CLI

A Vue CLI plugin is an npm package that extends the capabilities of a Vue CLI project. Plugins can:

• Modify Webpack configuration (e.g., adding resolve rules).
• Add new vue-cli-service commands.
• Extend package.json (adding dependencies or scripts).
• Create or modify project files.
• Prompt users for configuration options during installation.

A typical plugin structure includes:

.
├── README.md
├── generator.js  # generator (optional)
├── index.js      # service plugin (required)
├── package.json
├── prompts.js    # prompts file (optional)
└── ui.js         # Vue UI integration (optional)

The @vue/cli-ui-addon-webpack package provides dashboard and analyzer components for the @vue/cli-ui. These components allow you to visualize and analyze your Webpack configuration and build process directly within the Vue CLI UI.

To see the dashboard in action, run your project using the standard development or build commands, which will trigger the CLI UI if configured.

yarn serve
yarn build

@vue/babel-preset-app is the default Babel preset used in all Vue CLI projects. It is designed exclusively for projects created via Vue CLI and is not intended for external use cases.

It bundles several features to provide a seamless development experience:

• @babel/preset-env: Automatically determines transforms and polyfills based on your browser targets.
• Stage 3 or Below Support: Includes Dynamic Import Syntax, Proposal Class Properties, and legacy Proposal Decorators.
• Vue JSX Support: Provides support for JSX via @babel/plugin-syntax-jsx and @vue/babel-preset-jsx.
• @babel/plugin-transform-runtime: Enabled for helpers to avoid inlining them in every file.
• Polyfills: Includes Promise polyfill by default for non-transpiled dependencies.

⚠️ Vue CLI is in Maintenance Mode.

For new projects, it is recommended to use create-vue to scaffold Vite-based projects instead of Vue CLI. For the latest tooling recommendations, refer to the Vue 3 Tooling Guide.

Vue CLI automatically generates resource hints:

• Preload: For resources needed immediately after page load. Injected via config.plugin('preload').
• Prefetch: For resources needed in the near future (async chunks). Injected via config.plugin('prefetch').

In a multi-page setup, the plugin name for prefetch changes to prefetch-{pagename} (e.g., prefetch-app).

You can modify or delete these via chainWebpack in vue.config.js.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // remove the prefetch plugin
    config.plugins.delete('prefetch')

    // or: modify its options
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

Cypress does not load .env files for test files in the same way Vue CLI loads them for application code. To define environment variables for your E2E tests, the easiest method is to use a JSON file: cypress.json or cypress.env.json.

Important: These variables are accessed via the Cypress.env() function, not the standard process.env object.

Plugins add optional features to your project. You can identify them by their naming convention:

• Official plugins: Start with @vue/cli-plugin- (e.g., @vue/cli-plugin-babel).
• Community plugins: Start with vue-cli-plugin-.

Plugins are automatically resolved and loaded by the @vue/cli-service when you run your development or build commands, provided they are listed in your project's package.json.

When the plugin is installed, it creates a tests/e2e/ directory with a specific organization that Nightwatch uses to automatically load extensions:

• specs/: The main location for test files. You can use the --group argument to target sub-folders.
• custom-assertions/: Files here are automatically loaded into the .assert and .verify API namespaces to extend built-in assertions.
• custom-commands/: Files here are automatically loaded onto the main browser API object to extend built-in commands.
• page-objects/: Files here are automatically loaded onto the .page API namespace. The filename determines the page object name.
• globals.js: An external globals file for holding global properties or hooks.

tests/e2e/
  ├── custom-assertions/
  ├── custom-commands/
  ├── page-objects/
  ├── specs/
  └── globals.js

The vue-cli-version-marker package is a utility designed to bypass a limitation in the npm registry where scoped packages (like @vue/cli) do not expose /latest endpoints.

Fetching full metadata for a scoped package is approximately 300ms slower than fetching the latest version of an unscoped package. This package acts as an unscoped marker that allows tools to quickly discover the latest published version of @vue/cli without the metadata overhead.