How to Deploy a Vue App on Vercel

Introduction

So, you’ve built a Vue.js application and are ready to take it live? Great choice! Deploying your Vue app on Vercel is one of the fastest and easiest ways to make your project accessible to the world. With its seamless integration, automatic deployments, and global CDN, Vercel makes hosting modern web apps a breeze.

In this guide(How to deploy Vue app on Vercel), we’ll walk through the step-by-step process to deploy your Vue.js app on Vercel, ensuring a smooth deployment experience.

Step 1: Install Vercel CLI

Before deploying, make sure you have Node.js installed. Then, install the Vercel CLI globally by running the following command in your terminal:

npm install -g vercel

This will allow you to interact with Vercel directly from the command line.

Step 2: Set Up Your Vue Project

If you already have a Vue app, navigate to its project directory. If not, you can create a new Vue project using:

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

Once inside your project directory, ensure everything runs properly by starting the development server:

npm run dev

If your app works locally, you’re good to proceed with deployment.

Step 3: Initialize Vercel

Now, inside your Vue project folder, initialize Vercel with:

vercel

The CLI will prompt you to log in to your Vercel account. If you don’t have one, you can create it for free.

After logging in, follow the prompts:

1. It will ask if you want to link an existing project—select No to create a new one.
2. Choose the Vue.js framework when asked for a framework preset.
3. Set the build command to:

npm run build

1. Set the output directory to dist.
2. Confirm the deployment by pressing Enter.

Vercel will now build and deploy your Vue app automatically.

Step 4: Configure Your Deployment

By default, Vercel auto-detects Vue.js projects, but if you need custom settings, create a vercel.json file in your project’s root directory:

{
  "builds": [{ "src": "src/main.js", "use": "@vercel/static-build" }],
  "routes": [{ "src": "/(.*)", "dest": "/index.html" }]
}

This ensures proper routing for your Vue app.

Step 5: Preview and Go Live

Once deployment is complete, Vercel provides a preview URL where you can test your application. If everything looks good, deploy the final version using:

vercel --prod

Your Vue app is now live with a custom Vercel URL!

Step 6: Connect a Custom Domain (Optional)

If you want to use your own domain instead of Vercel’s default URL, you can:

1. Go to your Vercel dashboard.
2. Select your deployed project.
3. Navigate to Settings > Domains and add your custom domain.
4. Update your DNS records in your domain registrar to point to Vercel.

Once configured, your Vue app will be accessible through your own domain.

Deploying a Vue.js application on Vercel is incredibly simple and efficient. With automatic deployments, CDN-backed hosting, and seamless Git integration, Vercel is a fantastic choice for Vue developers. Whether you’re working on a personal project or a large-scale application, this platform ensures your app is fast, scalable, and always online.

For more expert insights on Vue.js development, web hosting, and modern tech solutions, check out CodeHunger—your go-to resource for coding knowledge and tutorials.