Deploy Your App

On this page, you'll learn how to deploy your Nuxt app.


Configure Your Nuxt.js Project

To get your project deployed make sure you have the following settings applied correctly.

Update Nuxt

Static deployment is available with Nuxt 2.14.0 and higher. If you need to upgrade Nuxt, run this command:

  • npm
  • Yarn
npm
Copy
npm upgrade nuxt
Yarn
Copy
yarn upgrade nuxt

Set rendering mode

In nuxt.config.js, ensure you have the setting target: 'static'. Nuxt will do this for you if you set your rendering mode to "universal" and your deployment target to "static" when you run create-nuxt-app.

ℹ️ Static vs. Server-side

Static site generation and server-side rendering are two popular methods for publishing websites. Server-side rendering (SSR) builds each web page when a user requests it, while static site generation (SSG) builds the entire website whenever there are changes. In general, SSG is faster (though not always). For this guide, we recommend SSG because it allows you to make multiple API calls without worrying about page speed.

Connect to GitHub

On GitHub, create a new repository for your project. Make sure you commit all of your local changes, then push your project to GitHub. (Learn more about GitHub repositories.)

What are Webhooks?

Webhooks tell Netlify to rebuild your site when there are changes. Learn more in our guide to webhooks.


Deploy with Vercel

Deploy Site

Make an account or log in.

Then, click Import Project. Then continue with Import git repository.

Enter the URL of your GitHub repository. If necessary, adjust your GitHub app settings to allow Vercel access to the repository.

Click Deploy. It will take a moment for your site to build.

Now your site is online!

Add Webhooks

However, if you included any statically generated pages in your project, you need to set up webhooks to update those pages when there are changes in your Prismic repository.

In your Vercel project, go to Settings, then Git Integration. Scroll down to Deploy Hooks. Create a hook for your main git branch (note: your main branch could also be called master or something else). This will create a URL. Copy the URL.

Go to your Prismic repository, visit Settings, and then click Webhooks. Create a new webhook by choosing a name and add the webhook URL you just copied from Vercel. You can leave the Secret empty.

Now, whenever you change your content in Prismic, the changes will be reflected on your site.


Deploy with Netlify

Deploy Site

Make an account or log in.

Then click New site from Git.

Under Continuous Deployment, click GitHub. If you haven't done so already, give Netlify access to your GitHub repositories. Then find your project repository and select it.

On the settings page, fill in the Basic build settings like so:

Build Command

nuxt generate

Publish Directory

dist

Then click Deploy Site. It will take a moment for your site to build.

Now your site is online!

Add Webhooks

However, right now, your website is entirely static. To make the content update when you make changes in Prismic, we need to set up webhooks.

In your Netlify dashboard, go to the Settings for your new site, then to Build & Deploy. Scroll down to Build Hooks. Create a hook for your master git branch (unless you use a different branch). This will create a URL. Copy the URL.

Go to your Prismic repository, visit Settings, and then click Webhooks.

Create a new webhook by choosing a name and pasting the webhook URL you just copied from Netlify. You can leave the Secret empty.

Now, whenever you change your content in Prismic, the changes will be reflected on your site.



Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.