How to Deploy Your Nuxt Apps For Free on Vercel Using "Now CLI"
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:
HTTPS-enabled Custom Domains
Continuous Deployment with Git
High-performance Edge Network
Unlimited Websites & APIs
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.
Now that we have successfully created our Nuxt App, let's deploy it using to Vercel's now-cli.
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 --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.
Create a now.json file inside your project root directory and paste the following configuration code inside it.
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:
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.
What is the difference between vercel and netlify?