Vue CLI

Vue CLI is a set of tools for rapid development of Vue.js applications. It includes a command line interface for prototyping and building projects and a graphical user interface for creating and managing applications.

# Key features

These features provide important benefits for Vue CLI projects, including ones built and deployed with Netlify.

  • Default setup. Vue CLI provides a standard baseline for project setup with common features like hot module reloading and common defaults for build tools.
  • Ready for development. Built-in support for Babel, TypeScript, ESLint, PostCSS, Progressive web apps (PWAs), unit testing, and end-to-end testing unlocks your productivity.
  • Optional configuration. Vue CLI allows for full configuration of tooling without needing to eject.

# Netlify integration

When you link a repository for a project, Netlify tries to detect the framework your site is using. If your site is built with Vue CLI, Netlify provides a suggested build command and publish directory: vue-cli-service build and dist. If you’re using the Netlify CLI to run Netlify Dev for a local development environment, Netlify also suggests a dev command and port: vue-cli-service serve and 8080. You can override suggested values or set them in a configuration file instead, but automatic framework detection may help simplify the process of setting up a Vue CLI project on Netlify.

For manual configuration, check out the typical build settings for Vue CLI.

Vue-specific environment variables

Any environment variables prefixed with VUE_APP_ are processed by Vue CLI and made available in the browser for client-side JavaScript access. Visit the Vue CLI docs about environment variables for more information.

# More resources