Nerd For Tech
Published in

Nerd For Tech

How To Deploy a Nuxt App on Vercel From Github

Today, I will show you the easiest way to get your Nuxt application online. Vercel is an open serverless platform that will allow you to host your Nuxt app for free. There are paid plans but for this tutorial, I’m going to show you how to set up your application from your Github repo in as little time as possible.

Let’s begin.

Setup

You may get an error during the deployment phase showing that there is a missing public or ./dist . This issue can be solved quite easily by using nuxt generate in the build script. Nuxt generate will create the directories needed for Vercel.

"build": "nuxt generate --output public",

Login to Vercel

If you don’t have an account, you can create a free one by visiting their website. After doing so, login into your account to access the dashboard. You should see something like this.

Next what you will want to do is create a new project by clicking the black button by the search bar.

Importing the Git Repo

I will be using a recent app I am building as a demonstration of how this will work. Find the repo that you’d like to use and click the import button.

Creating a team is optional and you get a free trial but we will skip this step for now.

Configuration is where we will add our options and environmental variables for the app. If you don't have any, you are free to go with the default settings. If you do, simply copy the key and the variable name into environment variables settings as shown below.

After that’s complete, click the deploy button wait until the build process is complete.

Here is the final product. You can now view it online from any device or use a custom domain to point to this server. Hope this helps!

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Makefile and Dotenv

How Much does an AWS Consultant Charge on Hourly Basis in India

What are HashMaps/Hashtables ?

How to Build a Software Engineer Career Ladder (Example)

Composing a scene in Unity for cutscenes.

Adventures in Amazon Connect

5 Ways Writing Can Help Your Coding

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christopher Clemmons

Christopher Clemmons

Software Engineer | Technical Writer | Flight Simmer

More from Medium

How to Get Started With GraphQL

How to Get Started With GraphQL

Introducing the image resizer service

Image Resizing

WebAuthn Components

Cover image created by stories (https://www.freepik.com/stories)

Understanding Local State with React Hooks