Deploy Nuxt on Netlify
How to deploy Nuxt on Netlify?
Deploying to Netlify is a low friction option for getting a statically generated Nuxt site online quickly.
The core of the process leverages the nuxt generate
(<= v2.12) command during deployment to build a static version of your Nuxt app into a dist
directory. The contents of this directory are then deployed to a production URL.
Getting Started
Press the "New site from Git" button on the Netlify dashboard. Authenticate with your repository host, select a repository to deploy, and continue. You should land on step 3: "Build options, and deploy!"
Configure:
For a statically generated site
Make sure you have target: 'static'
in your nuxt.config
.
-
Branch to deploy:
main
, or which-ever branch you prefer -
Build command:
npm run generate
-
Publish directory:
dist
For client side rendering only
Make sure you have target: 'static'
and ssr: false
in your nuxt.config
.
-
Branch to deploy:
main
, or which-ever branch you prefer -
Build command:
npm run generate
-
Publish directory:
dist
For client side rendering there is a problem with refresh as by default on Netlify the site redirects to "404 not found". For any pages that are not generated they will fallback to SPA mode and then if you refresh or share that link you will get Netlify's 404 page. This is because the pages that are not generated don't actually exist as they are actually a single page application so if you refresh this page you will get a 404 because the url for that page doesn't actually exist. By redirecting to the 404.html Nuxt will reload your page correctly in SPA fallback.
The easiest way to fix this is by adding a generate property in your nuxt.config
and setting fallback: true
. Then it will fallback to the generated 404.html when in SPA mode instead of Netlify's 404 page.
export default {
generate: {
fallback: true
}
}
If however you want to automatically apply headers and redirects of the application then there is a module for that, this is especially useful for when you have custom headers/redirects (in a _headers
or _redirects
file):
For more information on Netlify redirects see the Netlify docs .
For simple reference on Netlify redirects read blog post by Divya Sasidharan
Optionally, you can add additional ENV variables via the "Advanced" button. These can be helpful for swapping in alternative API credentials and so on. Netlify also provides a default ENV variables which can be read by your Nuxt application at build time.
Click "Deploy site" to immediately trigger a deploy. Your Netlify site will be assigned a random URL and deployed using the nuxt generate
command.
Voilà! Your Nuxt application is now hosted on Netlify!
![Clément Ollivier](/_nuxt/image/77339c.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/9209bd.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Xanzhu](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian LEFEBVRE](/_nuxt/image/e3705e.png)
![Lucas](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)
![Hugo](/_nuxt/image/952ed3.png)
![Sylvain Marroufin](/_nuxt/image/c9abac.png)
![Spencer Cooley](/_nuxt/image/b3bb68.png)
![Piotr Zatorski](/_nuxt/image/66bdcf.png)
![Vladimir Semenov](/_nuxt/image/e6616e.png)
![Harry Allen](/_nuxt/image/d12665.png)
![kazuya kawaguchi](/_nuxt/image/d6247a.png)
![Unai Mengual](/_nuxt/image/0340f1.png)
![Hyunseung Lee](/_nuxt/image/a79a1d.png)
![Alexandre Chopin](/_nuxt/image/2c01a3.png)
![pooya parsa](/_nuxt/image/368a8d.png)
![Nick Medrano](/_nuxt/image/7486d8.png)
![Mosaab Emam](/_nuxt/image/eeb249.png)
![Iljs Путлер Капут](/_nuxt/image/97788f.png)
![Heitor Ramon Ribeiro](/_nuxt/image/372791.png)
![Nero](/_nuxt/image/0ed25e.png)
![Yoon Han](/_nuxt/image/866eec.png)
![Ikko Ashimine](/_nuxt/image/0a4949.png)
![FamCodings](/_nuxt/image/879caa.png)
![Ayouli](/_nuxt/image/a827f5.png)
![F. Hinkelmann](/_nuxt/image/26e625.png)
![felipesuri](/_nuxt/image/a2c3fe.png)
![Christophe Carvalho Vilas-Boas](/_nuxt/image/be1aa1.png)
![Leoš Literák](/_nuxt/image/496416.png)
![Trizotti](/_nuxt/image/ff04b5.png)
![Marcello Bachechi](/_nuxt/image/48fe7a.png)
![Rodolphe](/_nuxt/image/f00d82.png)
![Thomas Underwood](/_nuxt/image/0a82d8.png)
![Shek Evgeniy](/_nuxt/image/0bf9bc.png)
![Lukasz Formela](/_nuxt/image/61a24f.png)
![Hugo Torzuoli](/_nuxt/image/0de44d.png)