Jakub Andrzejewski

Posted on Sep 5, 2022 • Edited on Sep 11, 2023

Deploying Nuxt 3 app to Vercel 🚀

#nuxt #tutorial #javascript #beginners

When I started developing websites some time ago, there was no good free hosting providers. The only options available back then were the hostings that included several ads and promotions that were basically causing your website to not be viewable at all.

Thankfully, nowadays deploying web applications to free hosting is much better and you can choose from a variety of providers like Vercel, Netlify, Heroku, and many more!

In this article, I would like to guide you through the process of deploying your Nuxt 3 application to Vercel.

Code

First things first, we would need a Nuxt 3 application that will be then pushed to the Github repository. I suppose you already have it as you are reading this article and you are only interested in the instructions on how to deploy it to Vercel. Also, in this article I will show how to deploy the static website (SSG).

If you are interested in the process of building a simple web application clone that could be then deployed to Vercel, I highly recommend you to check out the following video:

The first thing we need to do is to import GitHub repository in Vercel

Later, let's define proper build command:

Build command should be yarn generate and output folder .output/public

If you like, below you can add some environment variables (i.e. access tokens)

If all went well with the configuration, you should see similar result as our demo https://nuxt-modules-clone.vercel.app/

Summary

Nicely done! You have just deployed a static Nuxt 3 application to Vercel hosting!

Top comments (16)

Huynh Thi Khanh Linh • Jan 30 '23

i tried changing OUTPUT DIRECTORY into .vercel/output/static instead .output/public and then success

Toni Engelhardt • Oct 27 '22

Doesn't seem to work for me with Nuxt 3.0.0-rc.13-27772354.a0a59e2 and ssr: false. Am I missing something?

Error: No Output Directory named "public" found after the Build completed. You can configure the Output Directory in your Project Settings.

Jakub Andrzejewski • Oct 28 '22

Hey, you are using an edge version of the release candidate that wasn't yet released (current stable one is -rc.12) so I would guess that this can be the issue.

Toni Engelhardt • Oct 28 '22

Ok, will wait for -rc.13. It's just strange bc if I build locally the .output/public folder is there.

Igor Trindade • Nov 3 '22

I just deployed a project using Nuxt3 and Vercel and it works with the config:

'build command' to nuxt generate the 'output directory' to the default *dist *...

Toni Engelhardt • Nov 3 '22

What do you mean with default dist?

Igor Trindade • Nov 3 '22

When we deploy a project to vercel, it scan's the project structure and try to offer some template settings based on the project, so the default "output directory" that Vercel's offer for a Nuxt project is the "dist" and it works well for static site generate as so for SSR...

Toni Engelhardt • Nov 3 '22

Thanks a lot, will give it another try 🙏🏽

Toni Engelhardt • Nov 3 '22

Not sure if that is working correctly. Getting way worse pagespeed performance with this setting compared to SSR...

Jakub Andrzejewski • Nov 4 '22

Maybe you can then try the routeRoules? Thanks to them you can decide what routes should be generated statically and what should be generated on SSR.

Toni Engelhardt • Nov 4 '22

That app only has one page... Theoretically the static generation should have perfect speed scores no?

Jakub Andrzejewski • Nov 4 '22

Yes, theoretically. For single page it should be faster that way but maybe there document itself is really big and heavy to process by the browser while it is easier to process on the server side. Just guessing.