Deploy your VueJS application with Vercel

Deploy your Vue.js application with Vercel.com

Let’s start a journey to deploy your Vue.js application. In this guide, we’ll navigate the seamless process of deploying a Vue.js app using the amazing, powerful and user-friendly platform, Vercel.com. Let’s turn your code into a live accessible link in just a few simple steps.

Steps:

1. Download and install latest version of Node JS.
2. Lets scaffold project with Vite and Vue.js 3

Run the following commands on the command line to scaffold the Vue.js application.

> npm create vue@latest

Scaffolding Vue JS project with Vite

create vue@latest command will install the Vue.js on your system, it will be going to ask many options during installation. like Typescript support, Testing etc.

Goto your folder where we install project, then run

> npm install
> npm run dev

Open the browser and run the project https:localhost:5173

3. Add you newly created Vue.js project to Github

• Login to Github account
• Create a new repo, make it as public and click on create.

Create a new repository for project in Github

• In same page, copy the provided commands, open CMD in your project folder, and paste the commands
• Commit and push your changes

4. Setup a Vercel account

Vercel.com Dashboard

• Visit to Vercel dashboard then click on Add New

Vercel.com Deployment: Add Github account

• In the next step your will require to authorize your Github account to Vercel account

Vercel.com deployment: Selecting repository from Github

• In the next popup, here you can allow access to all repository or choose specific one, hit Save

Vercel.com Deployment: Adding Github account

• Click on Import

Vercel.com Deployment: Project configuration

• Leave a default configuration as it is and click on Deploy

Vercel.com Deployment: Deployment process log

Now you get the live project link : https://awesome-project-seven.vercel.app/

Conclusion:
Now here is our project live link: https://awesome-project-seven.vercel.app/

The deployment of your code from the GitHub repository is underway. You can monitor the live update log on the same page, and after a few minutes, you’ll receive a link to access the live version.

As your Vue.js application perfectly takes center stage on the internet, consider this deployment journey not just as a technical triumph but as a testament to your ability to share and showcase your creations effortlessly.

Cheers to your live and accessible Vue.js application!
Happy coding and deploying! 😎