Skip to content
Netlify Docs

Vue CLI on Netlify

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

Section titled “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

Section titled “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

Section titled “Vue-specific environment variables”

Environment variables prefixed with VUE_APP_ are processed by the Vue CLI and made available in the browser for client-side JavaScript access. For more information on how to use environment variables in Vue, check out the Environment variables and frameworks doc.

More resources

Section titled “More resources”