How to deploy Vue app to Netlify
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Netlify provides instant deployment for Vue applications with automatic builds, continuous deployment from Git, and global CDN distribution. As the creator of CoreUI with 12 years of Vue development experience, I’ve deployed hundreds of Vue applications to Netlify with zero-downtime deployments and automatic SSL for production sites serving millions of users.
The fastest approach uses Netlify’s Git integration for automatic deployments on every push.
Connect Git Repository
- Push your Vue project to GitHub, GitLab, or Bitbucket
- Go to netlify.com and sign up
- Click “Add new site” → “Import an existing project”
- Choose your Git provider and authorize Netlify
- Select your repository
Configure Build Settings
In Netlify dashboard:
Build command: npm run build
Publish directory: dist
For Vite projects:
Build command: npm run build
Publish directory: dist
Click “Deploy site” - Netlify will build and deploy automatically.
Create netlify.toml
Add netlify.toml to project root:
[build]
command = "npm run build"
publish = "dist"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
[build.environment]
NODE_VERSION = "18"
This ensures SPA routing works correctly.
Environment Variables
In Netlify dashboard → Site settings → Environment variables:
VITE_API_URL=https://api.example.com
VITE_GA_ID=UA-XXXXXXXXX-X
Access in Vue:
const apiUrl = import.meta.env.VITE_API_URL
Deploy from CLI
Install Netlify CLI:
npm install -g netlify-cli
Deploy:
# Login
netlify login
# Deploy (draft)
netlify deploy
# Deploy to production
netlify deploy --prod
Automatic Deployments
Every push to your main branch triggers automatic deployment:
git add .
git commit -m "Update homepage"
git push origin main
Netlify builds and deploys automatically. View progress in dashboard.
Custom Domain
In Netlify dashboard → Domain settings:
- Click “Add custom domain”
- Enter your domain (e.g.,
example.com) - Follow DNS configuration instructions
- Netlify provides free SSL automatically
Update DNS records:
Type: A
Name: @
Value: 75.2.60.5
Type: CNAME
Name: www
Value: your-site.netlify.app
Preview Deploys
Create pull request - Netlify automatically deploys preview:
git checkout -b feature-new-layout
git add .
git commit -m "Add new layout"
git push origin feature-new-layout
Open PR on GitHub - Netlify comments with preview URL.
Build Plugins
Add Netlify plugins in netlify.toml:
[[plugins]]
package = "@netlify/plugin-lighthouse"
[[plugins]]
package = "netlify-plugin-submit-sitemap"
[plugins.inputs]
baseUrl = "https://example.com"
sitemapPath = "/sitemap.xml"
Forms Handling
Add Netlify Forms to Vue:
<template>
<form name="contact" method="POST" data-netlify="true">
<input type="hidden" name="form-name" value="contact" />
<div>
<label>Name:</label>
<input type="text" name="name" required />
</div>
<div>
<label>Email:</label>
<input type="email" name="email" required />
</div>
<div>
<label>Message:</label>
<textarea name="message" required></textarea>
</div>
<button type="submit">Send</button>
</form>
</template>
Netlify handles form submissions automatically.
Redirects and Rewrites
Configure in netlify.toml:
[[redirects]]
from = "/api/*"
to = "https://api.example.com/:splat"
status = 200
force = true
[[redirects]]
from = "/old-page"
to = "/new-page"
status = 301
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Split Testing
Test two versions:
[[redirects]]
from = "/*"
to = "/version-a/:splat"
status = 200
conditions = {Cookie = ["netlify-split=a"]}
[[redirects]]
from = "/*"
to = "/version-b/:splat"
status = 200
conditions = {Cookie = ["netlify-split=b"]}
Best Practice Note
This is the deployment strategy we use for CoreUI Vue demos and documentation sites on Netlify. Netlify provides instant deployments, automatic SSL, and global CDN with zero configuration. Always configure SPA redirects in netlify.toml, use environment variables for API URLs, and enable preview deploys for testing before production. Netlify’s automatic builds ensure your site is always up to date with your Git repository.
For production applications, consider using CoreUI’s Vue Admin Template which includes pre-configured build settings optimized for Netlify deployment.
Related Articles
For other deployment options, check out how to deploy Vue app to Vercel and how to deploy Vue app to Firebase.
