How to deploy with Vercel?

nuxt-now-builder

Vercel

To deploy with Vercel, the Nuxt.js team and contributors worked on an official @nuxtjs/now-builder package (‘Now’ is Vercel previous name).

All you have to do is to setup a now.json file:

  1. {
  2.   "version": 2,
  3.   "builds": [
  4.     {
  5.       "src": "nuxt.config.js",
  6.       "use": "@nuxtjs/now-builder",
  7.       "config": {}
  8.     }
  9.   ]
  10. }

Service Worker with Nuxt PWA Module

To avoid 404 for Service Workers, make sure to include sw to your routes settings.

  1. {
  2.   "version": 2,
  3.   "builds": [
  4.     {
  5.       "src": "nuxt.config.js",
  6.       "use": "@nuxtjs/now-builder",
  7.       "config": {
  8.         "serverFiles": ["package.json"]
  9.       }
  10.     }
  11.   ],
  12.   "routes": [
  13.     { "src": "/_nuxt/.+", "headers": { "Cache-Control": "max-age=31557600" } },
  14.     {
  15.       "src": "/sw.js",
  16.       "dest": "/_nuxt/static/sw.js",
  17.       "headers": {
  18.         "cache-control": "public, max-age=43200, immutable",
  19.         "Service-Worker-Allowed": "/"
  20.       }
  21.     },
  22.     { "src": "/(.*)", "dest": "/" }
  23.   ]
  24. }

You can learn more and see examples on https://github.com/nuxt/now-builder

Now V1 (legacy)

To deploy with Now V1 a package.json like follows is recommended:

  1. {
  2.   "name": "my-app",
  3.   "dependencies": {
  4.     "nuxt": "latest"
  5.   },
  6.   "scripts": {
  7.     "dev": "nuxt",
  8.     "build": "nuxt build",
  9.     "start": "nuxt start"
  10.   }
  11. }

Then run now and enjoy!

Note: we recommend putting .nuxt in .npmignore or .gitignore.