In this article, we are going to learn how we can deploy our NuxtJS app on Vercel. Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.
Nuxt gives you the ability to host your web application on vercel hosting. In vercel, you can deploy static nuxtjs applications without any configuration. Vercel will detect that you are using Nuxt and will enable the correct settings for your deployment.
Create NuxtJS Application:
Step 1: You can create a new NuxtJs project using the below command:
npx create-nuxt-app gfg
Step 2: Now navigate to your app using the following command:
cd gfg
Project Structure: It will look like this.
Step 3: Now change the content of the index.vue file inside pages directory with the below content.
index.vue
<template> <div> <h3>This is the GFG Page.</h3> </div> </template> |
Steps to run the application: Run the below command in the terminal to run the app.
npm run dev
Output:
Deploying in Vercel: You can easily deploy your NuxtJs project in vercel using the below steps.
Step 1: Deploy your NuxtJs project in Github. You can read this article on how to deploy apps in Github.
Step 2: Create a new account on Vercel. It’s completely free and doesn’t require credit card details.
Step 3: After log in you can see a “Create a new Project” button. Click on it to create a new project,
Step 4: After that, click on “import from GitHub” and you can see a list of your GitHub repository. Select your NuxtJs project and that’s it. Your App is deployed.
Output:
Adding Environment Variables: In vercel, you can easily add environment variables. Follow the below steps to add the environment variables.
Step 1: Go to the dashboard of your deployed project.
Step 2: Click on the settings button.
Step 3: Click on the environment variables on the left side.
Step 4: Now you can add your environment variables here.
Deployed App Link: https://gfg.vercel.app/.
