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
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.
Avoid 404s for SPAs
If your project is a single page app (SPA) that uses the history pushState method to get clean URLs, you must add a rewrite rule to serve the index.html file no matter what URL the browser requests.
# 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
Did you find this doc useful?
Your feedback helps us improve our docs.