How to Deploy Your Nuxt Apps For Free on Vercel Using "Now CLI"

nowetnuxt.png

One too many times, we are get stuck with deciding the best platforms to deploy our apps to during testing and production. Few of the many factors that affects this decision is "Seemless deployment experience", "trusted and secured platform", and most times, "Cost".

Vercel.com provides you facilities to deploy, preview and ship your web apps with zero configuration, automatic SSL, and global CDN at an absolute free cost. Now, before you scream "awesome", wait for it.

Vercel offers you:

  1. HTTPS-enabled Custom Domains

  2. Continuous Deployment with Git

  3. High-performance Edge Network

  4. Unlimited Websites & APIs

  5. Serverless Functions in Node.js, Go, and more

All for free 🚀🚀🚀

Back to business, how to host you Nuxt Apps on Vercel.

First, let's create out Nuxt App.*

Assumption: You have NPM or Yarn Installed.

Now, go to your terminal and navigate to where you want to have your project created.

Then, using NPM, run:

$ npx create-nuxt-app <project-name>

Using Yarn, run:

$ yarn create nuxt-app <project-name>

Then, you get prompted to fill in few details about your project and choose dependencies you want to include in your project and your project will be scaffolded for you.

DEPLOYMENT

Now that we have successfully created our Nuxt App, let's deploy it using to Vercel's now-cli.

Firstly, you have to create an account on Vercel.com. So, go over to Vercel.com and signup using either your Github, Gitlab, or Bitbucket accounts.

Secondly, install now in your project.

Open your terminal and navigate (cd) to your project root directory. For example, let's say your created "FoodApp" in your Desktop folder, run:

$ cd Desktop/FoodApp

Then, install now using NPM or Yarn

For NPM, run:

$ npm install now -g

For Yarn, run:

$ yarn add now

Anytime you are ready or want to deploy, just navigate to your project root directory using your terminal and run:

$ now

OR $ now --prod to push to production.

This will prompt you on few details on about your project, and automatically build and deploy your project seemlessly. You will also be provided a URL for previewing your project, which of course you can change in your project settings from your Vercel account dashboard.

PROBLEM WITH NUXT

Unlike other project setups like Vue where you can just deploy straight up, Nuxt doesn't really have an output directory. So, most likely, you will run into an error while deploying.

FIX:

Create a now.json file inside your project root directory and paste the following configuration code inside it.

{ "version": 2, "builds": [ { "src": "nuxt.config.js", "use": "@nuxtjs/now-builder", "config": {} } ] }

now will automatically detect this file while deploying and set as your default config. Problem solved.

. . .

ADDING CONTINUOUS DEPLOYMENT WITH GIT INTEGRATION

Imagine your project gets automatically deployed whenever you push changes changes to your repository. Yeah, that's possible with now.

To do that, login to your account on Vercel.com, navigate to projects.

For each project card on your dashboard, click on continously deploy with Git Integration. You will to install Vercel for Github, Gitlab or Bitbucket. Then, connect your project to your project repository.

Simple as A,B,C . .

ADDING AND USING CUSTOM DOMAINS

Normally, your project URL gets suffixed with .now.sh extension, but you most likely don't want to have that in production. You can buy Domain Names from Vercel at cheap rates or transfer an existing domain from wherever you brought it from.

Go to your Vercel dashboard, Navigate to Domains.

Click on Add, then chose the project you want to add a custom domain to and continue.

You will be prompted to type in the name of the new domain. Fill it in and click Add.

If you didn't buy your domain from Vercel, you will need to change your name server from what ever domain name registrar you brought it from to:

a.zeit-world.net

b.zeit-world.co.uk

e.zeit-world.org

f.zeit-world.com

Then, you refresh and everything will be all set.

Isn't that finesse?

Let me know what you think in the comment section below and don't forget to share.

Comments (3)

Asad Awadia's photo

What is the difference between vercel and netlify?

Adams Abdulhakeem's photo

Few of the unique features of Vercel are Easy, production-ready deployment with one command, Simple scaling, including auto-scaling, No-Ops, Less expensive and no Bandwidth limitations

Adams Abdulhakeem's photo

Also, Vercel is proven to be more performant than Netlify. nuweba.com/blog/why-we-decided-to-move-our-..