Deployment and Rebuilding

On this page, you'll learn how to deploy your Nuxt app and rebuild your site when you update your content.


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
Copy
npm upgrade nuxt
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. Simply put, 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 repo for your project. Make sure all of your local changes are committed, then push your project to GitHub. (Here's more info on what GitHub is and how to create a repo.)

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 repo. If necessary, adjust your GitHub app settings to allow Vercel access to the repo.

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 repo.

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 pasting in 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 repos. Then find your project repo 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 completely 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 are using 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 in 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.


Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.