How to Deploy Vue App on Netlify

Deploying a Vue.js application to Netlify is one of the most efficient and developer-friendly ways to bring your modern web application live on the internet. Netlify, a leading cloud platform for static sites and serverless functions, offers seamless integration with Git repositories, automatic builds, continuous deployment, global CDN delivery, and built-in SSL all without requiring complex server configuration. For Vue developers, this means you can focus on writing clean, reactive code while Netlify handles the infrastructure, performance, and scalability.

Vue.js, known for its simplicity and flexibility, has become one of the most popular JavaScript frameworks for building user interfaces. Whether you're developing a personal portfolio, an e-commerce landing page, or a full-featured single-page application (SPA), deploying it correctly ensures optimal load times, SEO performance, and user experience. Netlifys automated build system recognizes Vue projects out of the box, making deployment as simple as pushing code to a Git repository.

This guide provides a comprehensive, step-by-step walkthrough of how to deploy a Vue app on Netlify from setting up your project to troubleshooting common issues. Youll also learn best practices for optimizing performance, leveraging Netlifys advanced features, and scaling your application for production. By the end of this tutorial, youll have a fully functional, live Vue application hosted on Netlify with HTTPS, custom domains, and automatic deployments.

Step-by-Step Guide

Prerequisites

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

• A working Vue.js project (created via Vue CLI, Vite, or another scaffold)
• A Git version control system installed (Git CLI or GUI like GitHub Desktop)
• A GitHub, GitLab, or Bitbucket account
• A Netlify account (free tier available at netlify.com/signup)

If you dont already have a Vue project, create one using Vite the recommended build tool for modern Vue development:

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

Follow the prompts to select your preferences (TypeScript, ESLint, etc.). Once your project is created, verify it runs locally by opening your browser to http://localhost:5173.

Step 1: Build Your Vue Application

Netlify requires a static build output to serve your application. Vue projects built with Vite or Vue CLI generate this output in a dist/ folder after running the build command.

In your project root directory, run:

npm run build

This command triggers Vites production build process, which:

• Minifies JavaScript and CSS files
• Optimizes images and assets
• Generates a dist/ directory with all static files needed for deployment

After the build completes, inspect the dist/ folder. You should see files like:

• index.html
• assets/ (containing bundled JS and CSS)
• favicon.ico

If you're using Vue CLI instead of Vite, the build output will also be in dist/, so the process remains identical.

Step 2: Initialize a Git Repository

Netlify connects to your code via Git. If your project isnt already under version control, initialize a Git repository:

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

Next, create a remote repository on GitHub, GitLab, or Bitbucket. Do not use a private repository unless youre on a paid Netlify plan public repositories work seamlessly with the free tier.

Push your local code to the remote repository:

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

Replace your-username and your-vue-app with your actual GitHub username and repository name.

Step 3: Connect Your Repository to Netlify

Log in to your Netlify account at app.netlify.com. Once logged in:

1. Click the New site from Git button on the dashboard.
2. Select your Git provider (GitHub, GitLab, or Bitbucket).
3. Authorize Netlify to access your repositories.
4. Search for your Vue project repository and select it.

Netlify will automatically detect that this is a Vue project. It looks for a package.json file and checks for build scripts like build or npm run build.

Step 4: Configure Build Settings

After selecting your repository, Netlify will display a configuration screen with default settings. Verify or update the following fields:

• Build command: npm run build (or pnpm build if using pnpm)
• Build directory: dist (this is where your built files are located)
• Deploy context: Leave as Production unless youre setting up preview deployments for pull requests

Netlify uses these settings to automatically run your build process whenever you push new code to your repository. If your build command or directory is incorrect, the deployment will fail.

Click Deploy site. Netlify will now:

• Clone your repository
• Install dependencies using npm (or your package manager)
• Run the build command
• Deploy the contents of the dist/ folder to its global CDN

Youll see a live deployment URL generated automatically something like https://your-vue-app.netlify.app. Click the link to view your live application.

Step 5: Set Up a Custom Domain (Optional)

Netlify allows you to connect a custom domain for free. This is ideal for branding your application (e.g., myportfolio.com instead of my-vue-app.netlify.app).

To set up a custom domain:

1. In your Netlify dashboard, navigate to the site you just deployed.
2. Click on Site settings > Domain management > Add domain.
3. Enter your custom domain (e.g., www.yourdomain.com).
4. Netlify will provide you with DNS records (typically CNAME or A records).
5. Log in to your domain registrar (e.g., Namecheap, Google Domains, Cloudflare) and update the DNS settings accordingly.
6. Back in Netlify, click Verify to confirm the domain is properly configured.

Netlify automatically provisions an SSL certificate via Lets Encrypt, so your custom domain will be served over HTTPS without additional steps.

Step 6: Enable Continuous Deployment

Netlifys core strength is continuous deployment. Every time you push a commit to your main branch (or a specified branch), Netlify automatically triggers a new build and deployment.

To test this:

1. Make a small change to your Vue app for example, update the title in src/App.vue.
2. Commit and push the change: git commit -am "Update app title" && git push
3. Go to your Netlify dashboard and watch the deployment queue.
4. Within seconds, a new deployment will appear with a unique preview URL.
5. Once complete, the main site will automatically update with your new changes.

This eliminates the need for manual uploads or server SSH access. Your deployment pipeline is now fully automated.

Step 7: Configure Redirects and Rewrites (For SPA Routing)

Vue Router in history mode uses client-side routing, which can cause 404 errors when users directly access nested routes (e.g., /about or /user/profile). Netlify solves this with a _redirects file.

Create a file named _redirects in your public/ folder (not src/):

/*    /index.html   200

This rule tells Netlify to serve index.html for any route, allowing Vue Router to handle navigation on the client side.

Alternatively, you can use a netlify.toml file in your project root for more advanced configuration:

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

Commit and push this file. Netlify will automatically apply the redirect rules on the next deployment. This is essential for clean URLs in Vue SPAs.

Best Practices

Optimize Your Build Output

Before deploying, always ensure your build is optimized. Vite and Vue CLI include built-in optimizations, but you can enhance them further:

• Use npm run build --report to generate a bundle analysis report. This helps identify large dependencies.
• Lazy-load components using defineAsyncComponent or dynamic imports: const About = () => import('./views/About.vue').
• Compress images using tools like sharp, imagemin, or online services like TinyPNG before including them in your project.
• Remove unused third-party libraries. For example, if youre only using one function from Lodash, import just that function: import debounce from 'lodash/debounce'.

Use Environment Variables Wisely

Netlify supports environment variables for different deployment contexts. Create a .env.production file in your project root for production-specific values:

VITE_API_URL=https://api.yourdomain.com
VITE_APP_NAME=My Vue App

Access these in your Vue code using import.meta.env.VITE_API_URL (Vite) or process.env.VITE_API_URL (Vue CLI).

In Netlify, you can also define environment variables via the dashboard: Site settings > Build & deploy > Environment. This is useful for secrets you dont want in your Git repo (e.g., API keys).

Enable Compression and Caching

Netlify automatically enables Gzip and Brotli compression for all static assets. However, you can fine-tune caching headers using 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, must-revalidate"

This configuration caches JavaScript and CSS files for one year (immutable) and ensures index.html is always revalidated critical for SPA updates.

Use Netlify Functions for Backend Logic

While Vue is a frontend framework, you may need server-side logic (e.g., form submissions, API proxies). Netlify Functions allow you to deploy serverless functions alongside your static site.

Create a netlify/functions/ directory. Inside, add a file like contact.js:

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

Deploy this with your site. You can now call it from your Vue app via /.netlify/functions/contact.

Monitor Performance with Netlify Analytics

Netlify provides built-in analytics for all sites. Go to your sites dashboard and click Analytics to view:

• Page views and unique visitors
• Referral sources
• Geographic distribution
• Load times and performance metrics

Use this data to identify slow pages or high bounce rates and optimize accordingly.

Enable Deploy Previews for Pull Requests

Netlify automatically generates a unique preview URL for every pull request (PR) opened on your repository. This allows your team to review changes before merging.

To ensure this works:

• Make sure your repository is connected to Netlify via Git.
• Enable Deploy previews in Site settings > Build & deploy > Deploy contexts.

Team members can then comment on PRs with a direct link to the live preview eliminating the need for local testing or screenshots.

Tools and Resources

Essential Tools for Vue + Netlify Development

• Vite The fastest build tool for Vue 3. Offers instant HMR and optimized production builds.
• Vue Router Official routing library for Vue. Essential for SPAs.
• Pinia Modern state management library for Vue 3, replacing Vuex.
• ESLint + Prettier Code quality and formatting tools. Integrate with your editor for real-time feedback.
• Netlify CLI Local development tool for testing Netlify functions and redirects before deployment. Install with: npm install -g netlify-cli. Run netlify dev to simulate your production environment locally.
• BundleAnalyzer Visualize your bundle size. Add to your build script: npm run build --report.
• Google Lighthouse Audit your deployed site for performance, accessibility, and SEO. Run via Chrome DevTools or lighthouse <url> in CLI.

Netlify Integrations

Netlify integrates with dozens of third-party tools:

• Contentful, Sanity, Strapi Headless CMS for managing dynamic content without a backend.
• Formspree, Netlify Forms Handle contact forms without server code.
• Google Analytics, Plausible Track user behavior.
• GitHub Actions Automate testing or deployment triggers alongside Netlify.
• Netlify Identity Add user authentication (login, signup) without external services.

Learning Resources

• Vue.js Official Documentation
• Vite Documentation
• Netlify Documentation
• Netlify YouTube Channel Tutorials on deployments, functions, and edge networks
• Vue 3 GitHub Repository Explore source code and examples

Real Examples

Example 1: Personal Portfolio with Vue 3 and Vite

A developer creates a portfolio site using Vue 3, Vite, and Tailwind CSS. The project includes:

• Home, About, Projects, and Contact pages using Vue Router
• Dynamic project cards loaded from a JSON file
• A contact form handled by Netlify Forms

Steps taken:

1. Created project with npm create vue@latest
2. Configured Vue Router in history mode
3. Added _redirects file to handle SPA routing
4. Pushed to GitHub
5. Connected to Netlify automatic build and deploy
6. Added custom domain: johnsmith.dev
7. Enabled form handling via Netlify Forms by adding netlify attribute to form tag

Result: The site loads in under 800ms globally, ranks well on Google for John Smith developer portfolio, and receives form submissions without a backend server.

Example 2: E-Commerce Landing Page with Dynamic Content

A small business owner wants to launch a product landing page with real-time pricing and testimonials.

Solution:

• Vue 3 + Vite for the frontend
• Sanity.io as headless CMS for product data and testimonials
• Netlify Functions to proxy API requests to Sanity (avoiding CORS issues)
• Netlify Identity for admin login to update content
• Custom domain: myproduct.com

Benefits:

• Zero server maintenance
• Content editors can update the site without developer help
• Site hosted securely with HTTPS and global CDN
• Build time under 20 seconds

Example 3: Open-Source Dashboard with CI/CD

An open-source project uses Vue 3 to build a metrics dashboard. The team uses:

• GitHub Actions to run tests on every PR
• Netlify for deployment and preview links
• Netlify Analytics to monitor usage
• Netlify Edge Functions to cache API responses

Every time a contributor opens a PR, Netlify deploys a live preview. Maintainers review the UI, functionality, and performance before merging. The main branch deploys automatically to production.

FAQs

Why is my Vue app showing a blank page on Netlify?

This usually happens because the build directory is misconfigured or the build command failed. Check your Netlify build settings: ensure the build command is npm run build and the publish directory is dist. Also, verify that your package.json has a valid build script.

Do I need a backend to deploy a Vue app on Netlify?

No. Vue apps are static by default. Netlify serves HTML, CSS, and JavaScript files directly from its CDN. You only need a backend if youre handling server-side logic like authentication, databases, or form processing which Netlify Functions can handle without a traditional server.

How do I fix 404 errors on refresh in my Vue app?

Ensure you have a _redirects file in your public/ folder with the line: /* /index.html 200. This tells Netlify to serve index.html for all routes, allowing Vue Router to handle navigation.

Can I use Netlify with Vue CLI instead of Vite?

Yes. Vue CLI projects also output to a dist/ folder. Netlify detects the build command in package.json and deploys it the same way. The only difference is the build command might be vue-cli-service build instead of npm run build.

How long does a Netlify deployment take?

Typically 2060 seconds for small to medium projects. Build time depends on your project size, dependencies, and network speed. Vite builds are usually faster than Vue CLI. You can monitor real-time logs in the Netlify dashboard.

Is Netlify free for Vue apps?

Yes. Netlifys free tier includes unlimited static site deployments, 100GB bandwidth/month, 300 build minutes/month, and custom domains. For most personal and small business Vue apps, the free plan is more than sufficient.

Can I deploy multiple Vue apps on one Netlify account?

Yes. You can connect multiple repositories to the same Netlify account. Each will get its own unique URL and settings. Theres no limit to the number of sites you can host on the free plan.

How do I rollback a deployment if something goes wrong?

Netlify keeps a full deployment history. In your site dashboard, go to Deploys, find the previous successful deployment, and click Deploy this version. This instantly reverts your site to that state.

Conclusion

Deploying a Vue application on Netlify is not just a technical task its a strategic advantage for modern web developers. By combining Vues reactive, component-based architecture with Netlifys automated, global infrastructure, you gain speed, reliability, and scalability without the overhead of managing servers, SSL certificates, or CI/CD pipelines.

This guide walked you through every critical step: from initializing your Vue project and configuring the build process to setting up custom domains, handling SPA routing, and leveraging Netlifys advanced features like functions, forms, and analytics. Youve seen real-world examples of how developers and businesses use this stack to deliver high-performance web applications with minimal effort.

As web applications continue to evolve toward static-first architectures, tools like Vue and Netlify are becoming the de facto standard. Whether youre building a personal project, a startup MVP, or an enterprise-grade dashboard, deploying on Netlify ensures your app reaches users faster, ranks better in search engines, and scales effortlessly.

Now that youve mastered the deployment process, the next step is to experiment. Try integrating a headless CMS, adding serverless functions, or optimizing your bundle size further. The possibilities are endless and with Netlify, youre just a git push away from launching your next great idea.