Home / Tutorials / How to deploy Nuxt Js static site to Vercel
How to deploy Nuxt Js static site to Vercel cover

How to deploy Nuxt Js static site to Vercel

6 mins


3 years ago



Nuxt.js has 2 different rendering modes and one of them is to generate a static website. In this post, you'll learn how to create and deploy the Nuxt.js example app with Vercel.

Set up Nuxt.js Example Project

First thing first, let's generates a new Nuxt.js app by running any of the commands below.
# if you are using yarn
yarn create nuxt-app example-app

# if you are using npm
npm init nuxt-app example-app

# if you are using npx
npx create-nuxt-app example-app
During the options/installation wizard, If you are asked which rendering mode to use, select Single Page App. Once it's generated, "cd" into the project directory and make an initial commit to push it to your online repository (Github, Bitbucket, or any that you use).
cd example-app
Create New Nuxt.js Project

Deploy Nuxt.js Project to Vercel

Now with the newly created Nuxt.js example project, it's time to create a new Vercel Account and import the repository to Vercel. The setup is painless and just follow along with the instructions that they have provide.
Import Git repository to Vercel

After the example project has been imported, any branch that is available in the repository will generate Preview Deployment and any changes commonly the "main" (master) branch will be the production deployment. Each branch will have its own dedicated links but what's shown to the user is the main branch.
Build and Deployment Settings

Make sure to update the build and deployment settings as follow. By now Vercel will provide you with the URL that is publicly accessible and if you need to customize it just visit the "Domains" section of the project settings page.

Have fun and give it a try! The next tutorial will be on how to add Deployment Hooks and Environment variables so do give that a read to supercharge your Nuxt.js website.
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Related Tutorials

Code Snippets

Collection of Laravel, AlpineJS, VueJS, Tailwind CSS, Flutter snippets and more. New snippets added every day.
View Snippets

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this