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.