Deploying a Vue.js App with ZEIT Now

Create your Vue.js app and deploy it with ZEIT Now.

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 ZEIT Now.

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 ZEIT Now

There are two ways to deploy with ZEIT Now. We recommend using a ZEIT Now for Git Integration for ease-of-use. Alternatively, Now CLI can be used to generate a manual Preview Deployment.

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


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

Import the project into ZEIT Now using your Git Integration of choice:

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

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.



Written By
Written by unicodeveloperunicodeveloper