DOCSEARCHbyAlgolia
Submit Docs

Vue CLI Documentation

website·Indexed 19 days ago

https://cli.vuejs.org/

Documentation for Vue CLI, including guides on installation, project creation, deployment, and working with Webpack, CSS, and environment variables. It features a comprehensive configuration reference and details on core plugins such as @vue/cli-plugin-babel, @vue/cli-plugin-typescript, and various E2E testing plugins. The site also provides developer guides for the Plugin, Generator, and UI APIs. Note: Vue CLI is in maintenance mode; create-vue is recommended for new projects.

Tokens
27.8K
Snippets
192
Records
251
Agent score
99%

What's inside Vue CLI

  1. Overview of @vue/cli-plugin-typescript

    @vue/cli-plugin-typescript provides TypeScript support for Vue CLI projects. It utilizes ts-loader for compilation and fork-ts-checker-webpack-plugin to perform type checking on a separate thread for improved performance. When used alongside @vue/cli-plugin-babel, the plugin outputs ES2015 and delegates polyfilling to Babel based on the specified browser targets.

  2. Overview of @vue/cli-plugin-pwa service worker behavior

    The @vue/cli-plugin-pwa plugin enables service workers only in production environments (e.g., after running npm run build or yarn build). In development mode, it includes noopServiceWorker.js, which resets any previously registered service workers for the same host:port to prevent cached assets from interfering with local changes. To test a service worker locally, build the application and serve the build directory using a simple HTTP server, preferably in an incognito window.

  3. Recommendation for new Vue projects

    Vue CLI is currently in Maintenance Mode. For new projects, it is recommended to use create-vue to scaffold Vite-based projects instead of the Vue CLI.

  4. Understand Vue CLI plugin architecture

    Vue CLI uses a plugin-based architecture where features are implemented as plugins (identifiable by dependencies starting with @vue/cli-plugin- in package.json). These plugins are capable of modifying the internal webpack configuration and injecting new commands into the vue-cli-service.

  5. Vue CLI Plugin Overview and Structure

    A Vue CLI plugin is an npm package used to add features to a Vue project, such as modifying Webpack configurations, adding new vue-cli-service commands, extending package.json, creating/modifying project files, or prompting users for options. A plugin must export a Service Plugin as its main export and may optionally include a Generator, a Prompts file, and a Vue UI integration.
    .
├── README.md
├── generator.js  # generator (optional)
├── index.js      # service plugin
├── package.json
├── prompts.js    # prompts file (optional)
└── ui.js         # Vue UI integration (optional)

  6. Recommended tooling for new Vue projects

    Vue CLI is currently in Maintenance Mode. For new projects, it is recommended to use create-vue to scaffold Vite-based projects instead of the Vue CLI.

  7. Understand the Vue CLI system architecture

    Vue CLI is a full system for rapid Vue.js development consisting of three main components:

    1. The CLI (@vue/cli): A globally installed npm package that provides the vue command for project scaffolding (vue create) and a graphical user interface (vue ui).
    2. The CLI Service (@vue/cli-service): A local development dependency installed in every project. It is built on webpack and webpack-dev-server, providing the vue-cli-service binary with serve, build, and inspect commands.
    3. CLI Plugins: Optional npm packages that add features like TypeScript, ESLint, or testing. Official plugins start with @vue/cli-plugin- and community plugins start with vue-cli-plugin-. These are automatically loaded by the CLI Service from the project's package.json.

  8. Migrate Vue CLI E2E Plugins from v4 to v5

    Updates for End-to-End (E2E) testing plugins:

    • Cypress: Updated from v3 to v8. Cypress is now required as a peer dependency.
    • WebDriverIO: Updated from v6 to v7.
    • Nightwatch: Updated from v1 to v2.

  9. Build asynchronous Web Components

    Use the --target wc-async option to produce a code-split bundle. This creates a small entry file that registers all custom elements upfront, but only fetches the actual component implementation on-demand when the element is used on the page.
    vue-cli-service build --target wc-async --name foo 'src/components/*.vue'

  10. Expose static files via ui-public folder

    To serve static assets (like icons) via the built-in HTTP server, place them in a ui-public folder at the root of the plugin package. These files are accessible via the /_plugin/:id/* route.
    Project Structure:
vue-cli-plugin-hello/
└── ui-public/
    └── my-logo.png

URL Access:
/_plugin/vue-cli-plugin-hello/my-logo.png

  11. Migrate Vue CLI TypeScript Plugin from v4 to v5

    The TypeScript plugin migration includes several breaking changes:

    • TSLint Support Dropped: TSLint is no longer supported. Users should migrate to ESLint (using tslint-to-eslint-config for automation).
    • ts-loader Upgrade: Upgraded from v6 to v9; now requires TypeScript >= 3.6.
    • fork-ts-checker-webpack-plugin Upgrade: Upgraded from v3.x to v6.x.

  12. Improve Dart Sass compilation performance with fibers

    In Dart Sass, synchronous compilation is typically twice as fast as asynchronous compilation. To reduce the overhead of asynchronous callbacks, install the fibers package as a project dependency. Note: As a native module, fibers may have OS-specific compatibility issues; if build errors occur, uninstall it.
    npm install -D fibers