How to Deploy Vue App on Netlify

Deploying a Vue.js application to Netlify is one of the most efficient, scalable, and developer-friendly ways to bring your modern web application live on the internet. Netlify, a leading platform for static site hosting and serverless functions, offers seamless integration with Git repositories, automatic builds, custom domains, SSL certificates, and global CDN delivery—all without requiring server management. For Vue developers, this means you can focus on building rich, interactive user interfaces while Netlify handles the infrastructure, performance, and reliability.

Vue.js, known for its simplicity and component-based architecture, produces static files during the build process—making it an ideal candidate for deployment on static hosting platforms like Netlify. Unlike traditional server-rendered applications, Vue apps built with Vue CLI or Vite generate HTML, CSS, and JavaScript bundles that can be served directly from a CDN. This results in faster load times, improved SEO, and reduced hosting costs.

In this comprehensive guide, we’ll walk you through every step required to deploy a Vue application on Netlify—from setting up your project to configuring environment variables, optimizing performance, and troubleshooting common issues. Whether you’re a beginner learning Vue or an experienced developer scaling production apps, this tutorial provides actionable insights and best practices to ensure a smooth, professional deployment.

Step-by-Step Guide

Prerequisites

Before deploying your Vue app to Netlify, ensure you have the following tools and accounts ready:

• A working Vue.js project (created with Vue CLI, Vite, or another scaffold tool)
• A Git version control system (Git installed locally and a repository on GitHub, GitLab, or Bitbucket)
• A Netlify account (free tier available at netlify.com/signup)

While not mandatory, familiarity with the command line and basic Git commands (like git add, git commit, and git push) will make the process smoother.

Step 1: Build Your Vue Application

Before deploying, you must generate the production-ready build of your Vue application. The build process compiles your source code into static files optimized for performance.

If you're using Vite (the default in Vue 3 projects), run the following command in your project directory:

npm run build

If you're using Vue CLI (common in Vue 2 projects), use:

npm run build

Both commands will generate a dist/ folder containing all static assets: HTML, CSS, JavaScript, images, and fonts. This folder is what Netlify will serve to visitors.

Verify the build succeeded by checking that the dist/ folder exists and contains files like index.html, assets/, and manifest.json (if applicable). Open dist/index.html in your browser to test the app locally before deploying.

Step 2: Initialize a Git Repository

Netlify integrates with Git platforms to automate deployments. If your Vue project isn’t already in a Git repository, initialize one:

git init
git add .
git commit -m "Initial commit"

Then, create a new repository on GitHub, GitLab, or Bitbucket. Push your code:

git remote add origin https://github.com/your-username/your-vue-app.git
git branch -M main
git push -u origin main

Ensure your dist/ folder is included in your repository. While some developers prefer to exclude build folders via .gitignore, Netlify requires access to the build output during deployment. If you’re using a CI/CD pipeline (recommended), you can configure Netlify to build the app from source instead—more on this later.

Step 3: Connect Your Repository to Netlify

Log in to your Netlify account at app.netlify.com. Click the “New site from Git” button on the dashboard.

Choose your Git provider (GitHub, GitLab, or Bitbucket) and authorize Netlify to access your repositories. Select the repository containing your Vue project.

Netlify will automatically detect that your project is a Vue app and suggest default build settings:

• Build command: npm run build (or yarn build if using Yarn)
• Build directory: dist/

Click “Deploy site.” Netlify will trigger a build process using its cloud infrastructure, compile your Vue app, and deploy the output to a unique temporary URL like your-site-name.netlify.app.

Step 4: Configure Build Settings (Optional but Recommended)

After deployment, you may want to fine-tune your build settings. Navigate to your site’s dashboard on Netlify, then click “Site settings” > “Build & deploy” > “Build settings.”

Ensure the following values are correctly set:

• Build command: npm run build
• Build directory: dist/
• Node.js version: Select the latest LTS version (e.g., 20.x)

If you’re using Yarn instead of npm, change the build command to yarn build and ensure the Node version supports Yarn.

Netlify also allows you to define environment variables under “Build & deploy” > “Environment.” Use this to inject configuration values like API endpoints, Firebase keys, or other secrets. For example:

• Key: VITE_API_URL
• Value: https://api.yourdomain.com

These variables are accessible in your Vue app using import.meta.env.VITE_API_URL (Vite) or process.env.VITE_API_URL (Vue CLI). Never commit sensitive data to your repository—always use Netlify’s environment variables.

Step 5: Set Up Custom Domain (Optional)

By default, Netlify assigns your site a subdomain like your-site.netlify.app. To use your own domain (e.g., yourapp.com), go to “Site settings” > “Domain management” > “Add domain.”

Enter your custom domain and click “Save.” Netlify will provide DNS records (typically CNAME or A records) that you must configure with your domain registrar (e.g., Namecheap, Google Domains, Cloudflare).

Once DNS propagates (usually within minutes to a few hours), Netlify will automatically provision an SSL certificate via Let’s Encrypt, ensuring your site loads securely over HTTPS.

Step 6: Enable Continuous Deployment

Netlify automatically watches your Git repository for changes. Every time you push code to your main branch (or configured branch), Netlify triggers a new build and redeployment.

To verify this is working, make a small change to your Vue app—like updating a heading in src/App.vue—then commit and push:

git add .
git commit -m "Update homepage heading"
git push origin main

Visit your Netlify site dashboard. You’ll see a new deployment in progress. Once complete, your changes will be live.

Step 7: Test and Validate Deployment

After deployment, thoroughly test your site:

• Check that all routes load correctly (e.g., /about, /contact)
• Verify images, fonts, and styles load without 404 errors
• Test forms or API calls if your app uses them
• Use browser developer tools to inspect network requests and console errors

Netlify also provides a “Deploy logs” section where you can review build output, warnings, and errors. Look for failed dependencies, missing files, or incorrect paths.

Step 8: Enable Netlify Functions (Advanced)

While Vue apps are static, many require backend functionality—like form submissions, authentication, or data fetching. Netlify Functions allow you to deploy serverless functions alongside your static site.

To use Netlify Functions:

1. Create a netlify/functions/ directory in your project root.
2. Add a JavaScript file, e.g., netlify/functions/contact.js:

exports.handler = async (event, context) => {
return {
statusCode: 200,
body: JSON.stringify({ message: "Form submitted successfully!" })
};
};

Then, in your Vue app, call the function using:

fetch('/.netlify/functions/contact')
.then(response => response.json())
.then(data => console.log(data));

Netlify automatically builds and deploys these functions with your site. They’re perfect for handling backend logic without managing a separate server.

Best Practices

Optimize Your Build for Performance

Netlify delivers your site via a global CDN, but performance starts with your build. Use the following optimizations:

• Code splitting: Use Vue’s lazy loading for routes and components: const About = () => import('./About.vue')
• Image optimization: Use vue-lazyload or convert images to WebP format for faster loading
• Minify assets: Vite and Vue CLI automatically minify JS/CSS, but verify with tools like Webpack Bundle Analyzer
• Remove console.log statements: Use a build plugin like vite-plugin-remove-console to strip debug logs in production

Configure Proper Routing

If you’re using Vue Router in history mode, your app relies on server-side routing to serve index.html for all routes. Netlify handles this automatically, but you can enforce it with a _redirects file in your dist/ folder:

/*    /index.html   200

Alternatively, create a netlify.toml file in your project root:

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

This ensures that deep links (like /products/123) work correctly and don’t return 404 errors.

Use Environment-Specific Configurations

Never hardcode API keys or URLs in your Vue code. Use environment variables:

• Create .env.local for local development
• Create .env.production for production
• Use Netlify’s UI to set production variables

Prefix all variables with VITE_ for Vite or PUBLIC_ for Vue CLI to expose them to the client.

Enable Compression and Caching

Netlify automatically enables Gzip and Brotli compression. To improve caching, add cache headers via netlify.toml:

[[headers]]
for = "/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
[[headers]]
for = "/index.html"
[headers.values]
Cache-Control = "public, max-age=0, no-cache"

This caches static assets (JS, CSS, images) for a year while ensuring index.html is always fresh.

Monitor Performance and Errors

Integrate Netlify’s built-in analytics or connect third-party tools like Google Analytics, Hotjar, or Sentry to monitor user behavior and catch JavaScript errors.

Netlify’s “Site health” dashboard provides insights into load times, build durations, and deployment success rates. Set up alerts for failed builds to maintain reliability.

Use Branch Previews for Collaboration

Netlify automatically creates preview deployments for every pull request or branch. This allows team members to review changes before merging. To enable:

• Ensure your Git provider is connected
• Go to “Site settings” > “Build & deploy” > “Deploy contexts”
• Enable “Deploy previews” for all branches

Preview URLs are automatically shared in your Git pull request, streamlining code reviews.

Tools and Resources

Essential Tools for Vue + Netlify Deployment

• Vite – The modern build tool for Vue 3, offering lightning-fast development and optimized production builds.
• Vue Router – For client-side routing. Always use history mode with proper redirect rules.
• ESLint + Prettier – Maintain code quality and consistency before deployment.
• Netlify CLI – Test deployments locally: npm install -g netlify-cli then netlify deploy.
• Vue DevTools – Browser extension to debug Vue components during testing.
• Webpack Bundle Analyzer – Analyze bundle sizes and identify large dependencies.
• Google PageSpeed Insights – Evaluate performance and receive optimization suggestions.

Netlify Plugins and Integrations

Netlify supports plugins that extend functionality:

• Netlify CMS – Add a headless CMS to manage content via a UI (great for blogs or marketing sites).
• Netlify Identity – Add user authentication without backend code.
• Netlify Forms – Handle form submissions without a server.

To install a plugin, add it to your netlify.toml:

[[plugins]]
package = "netlify-plugin-subfont"

Documentation and Learning Resources

• Netlify Documentation – Official guides for all features
• Vue.js Official Guide – Learn Vue fundamentals and best practices
• Vite Documentation – Optimize your build process
• Create Netlify App – Starter template for Vue + Netlify
• Netlify YouTube Channel – Tutorials and live demos

Real Examples

Example 1: Personal Portfolio Site

A developer builds a Vue 3 + Vite portfolio site with animated sections, project galleries, and contact forms. The project structure:

• src/ – Vue components and router
• public/ – Static assets (favicon, manifest)
• netlify.toml – Redirect rules and cache headers
• .env.production – API endpoint for form submissions

Deployed on Netlify with a custom domain johnsmith.dev. Netlify Functions handle form submissions via email. The site loads in under 1.2 seconds on mobile, scores 98/100 on Lighthouse, and receives 500+ monthly visitors.

Example 2: E-Commerce Product Catalog

An online store uses Vue to display products fetched from a headless CMS (Strapi). The app is built with Vite and deployed on Netlify. Key features:

• Lazy-loaded product images using vue-lazyload
• Dynamic routing for product pages: /products/:id
• Netlify Functions to process cart data and send order confirmations
• Custom domain: shop.example.com
• SSL enabled automatically

During peak traffic, Netlify’s CDN serves assets from edge locations worldwide, reducing latency by 60% compared to a traditional VPS host.

Example 3: Open Source Dashboard

A team builds a Vue dashboard for tracking GitHub contributions. The app uses:

• Vue 3 Composition API
• Chart.js for visualizations
• Netlify Deploy Previews for every PR
• Environment variables for GitHub API tokens

Deployed on Netlify with branch previews, enabling stakeholders to test changes before merging. The site is open-source, with documentation on how to deploy it themselves—driving adoption and community contributions.

FAQs

Can I deploy a Vue 2 app on Netlify?

Yes. Vue 2 apps built with Vue CLI deploy identically to Vue 3 apps. The build command and output directory (dist/) remain the same. Netlify supports all Vue versions as long as the build process generates static files.

Why is my Netlify site showing a blank page after deployment?

This usually occurs due to incorrect routing. If you’re using Vue Router in history mode, ensure you have a _redirects file or netlify.toml with the redirect rule: /* /index.html 200. Also, check that your build directory is set to dist/.

Do I need to commit the dist folder to Git?

No, it’s not required. Netlify can build your app from source using the build command. In fact, it’s recommended to exclude dist/ from your repository using .gitignore and let Netlify handle the build. This keeps your repo clean and reduces clone times.

How do I fix “Failed to load resource: net::ERR_FILE_NOT_FOUND” errors?

This error typically means your app is trying to load assets from the wrong path. Ensure all static assets (images, fonts) are placed in the public/ folder (for Vue CLI) or referenced correctly in src/. Use relative paths or import assets in JavaScript instead of hardcoding URLs.

Can I use Netlify with a monorepo?

Yes. If your Vue app is in a subdirectory (e.g., packages/web/), specify the build directory as packages/web/dist/ in Netlify’s settings. You can also use the cd command in the build command: cd packages/web && npm run build.

How do I rollback to a previous deployment?

Go to your site’s “Deploys” tab in Netlify. Click the three dots next to a previous successful deployment and select “Deploy this version.” Netlify will revert to that state and create a new deploy.

Is Netlify free for Vue apps?

Yes. Netlify’s free tier includes unlimited static sites, 100GB bandwidth/month, 300 build minutes/month, and custom domains with SSL. Most small to medium Vue apps fit comfortably within these limits.

What’s faster: Netlify or Vercel for Vue apps?

Both platforms are extremely fast and optimized for Vue. Netlify has a slight edge in ease of use for beginners and better form handling. Vercel offers deeper Next.js integration. For pure Vue apps, performance differences are negligible—choose based on preferred UI and feature set.

How do I add analytics to my Netlify Vue app?

Install Google Analytics or Plausible by adding the tracking script to your public/index.html file inside the <head> tag. Netlify does not interfere with client-side analytics. For privacy-focused alternatives, use Plausible.io, which integrates seamlessly and doesn’t require cookies.

Conclusion

Deploying a Vue application on Netlify is not just a technical task—it’s a strategic decision that enhances performance, scalability, and developer experience. With its automated builds, global CDN, seamless Git integration, and powerful features like serverless functions and deploy previews, Netlify eliminates the complexity traditionally associated with web hosting.

By following the steps outlined in this guide, you’ve learned how to build, configure, and deploy a Vue app with confidence. You now understand best practices for routing, performance optimization, environment management, and continuous deployment. Real-world examples demonstrate how businesses and developers leverage this combination to deliver fast, secure, and scalable applications.

As web development continues to shift toward static-first architectures, mastering Vue + Netlify positions you at the forefront of modern frontend engineering. Whether you’re launching a personal project, a startup MVP, or a corporate application, this stack provides the foundation for success.

Start small, iterate often, and let Netlify handle the infrastructure. Your users will thank you with faster load times, smoother interactions, and reliable access—every time they visit your site.