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/.
Similar Reads
NuxtJS Commands In this article, we are going to learn about NuxtJS Commands that are present in the NuxtJS framework. It comes with some useful commands for development and production. All the Nuxtjs commands are described with the output images. Create NuxtJS Application: Step 1: You can create a new NuxtJs proje
2 min read
Deployment Basics in MERN Deploying a MERN stack application involves hosting both the front end and back end on a live server, making it accessible to users over the internet. MERN stands for MongoDB, ExpressJS, ReactJS, and NodeJS, and each component needs to be properly configured for deployment. The process ensures that
7 min read
NuxtJS Nuxt.js is a famous open-source framework for building Vue.js applications. It is based on Vue.js, which is one of the greatest frameworks for JavaScript similar to React.js used for building user interfaces. It provides a wide variety of features to developers for quickly creating and deploying ser
3 min read
Deploying your Next.js App Deploying a Next.js app involves taking your application from your local development environment to a production-ready state where it can be accessed by users over the internet. Next.js is a popular React framework that enables server-side rendering, static site generation, and client-side rendering
3 min read
NuxtJS Directory Structure In this article, we are going to learn about the directory structure of NuxtJs. 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.Create NuxtJS Applicati
3 min read