Deploying a Vue.js App with Vercel

Vue.js is an open source JavaScript framework for building user interfaces. It is popularly known for its gentle learning curve and is adopted by a lot of developers for crafting single-page apps (SPAs) globally.

In this guide, we will cover how to deploy a Vue.js app with Vercel.

Step 1: Set Up Your Vue.js Project

First, set up a Vue.js project using the official Vue CLI to quickly scaffold a batteries-included Vue.js SPA.

If you don't have the Vue CLI installed globally, use the following command to install it globally:

npm i -g @vue/cli

Installing Vue CLI global to the system user with npm.

After a successful installation, create a new project and cd into the project folder. Use the following command in your terminal to do so:

vue create vue-project && cd vue-project

Creating a bootstrapped Vue.js project and moving into the directory within a terminal.

An option to choose a preset will be presented to you after running the command above.

After choosing an option, Vue CLI installs all the required dependencies and provisions a new project for you.

Next, to extend the project with client-side routing; install the official Vue.js router by running the following command in your terminal:

vue add router

Installing the Vue.js router with Vue CLI.

Vue CLI adds the router to the project and automatically updates the project files with basic routing functionality.

Step 2: Deploying Your Vue.js Project with Vercel

To deploy your Vue.js app with a Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following: https://vue.now-examples.now.sh

Set up a Vue.js app with a few clicks using the Deploy button, and create a Git repository for it in the process for automatic deployments for your updates.