In this guide, we will cover how to deploy a Vue.js app with Vercel.
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
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
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
Vue CLI adds the router to the project and automatically updates the project files with basic routing functionality.
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.vercel.app
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.