Deploying

With Prismic and Nuxt, it's incredibly easy to deploy a blazing-fast, dynamic site. This guide will show you how to deploy a statically-generated Nuxt site for free on Vercel or Netlify in under ten minutes.

Update Nuxt

Static deployment is available with Nuxt 2.14.0 and higher, so you need to make sure your version of Nuxt is up-to-date:

npm upgrade nuxt

Set rendering mode

In nuxt.config.js, set 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.

Deploying with Vercel

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.

On the settings page, change the build command to nuxt generate.

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

🎉 Now your site is online!

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.

Set up webhooks with Vercel

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

In your Vercel project, go to "Settings," then "Git Integration." Scroll down to "Deploy 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 Vercel. You can leave the "Secret" empty.

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

Deploying With Netlify

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." For the "Build Command," enter nuxt generate, and for the "Publish Directory," enter dist.

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

🎉 Now your site is online!

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.

Set up webhooks with Netlify

Webhooks tell Netlify to rebuild your site when there are changes. Learn more in our guide to 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.

9 Rue de la Pierre Levée, 75011 Paris