Deploy Nuxt on Heroku

How to deploy Nuxt on Heroku?

We recommend you read the Heroku documentation for Node.js .

You can set up and configure your app via the Heroku dashboard or the Heroku CLI .

First, we create our app. Then we add the Node.js buildpack and configure the app to listen on the host 0.0.0.0:

heroku create myapp
heroku buildpacks:set heroku/nodejs
heroku config:set HOST=0.0.0.0

Your app's Settings section on the Heroku dashboard should contain this:

Second, configure your app's package.json for the Heroku build process by adding a heroku-postbuild object to the scripts section to run the appropriate nuxt command for your app's nuxt.config.js target . For server apps use:

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "heroku-postbuild": "npm run build"
  },

or for static apps:

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "heroku-postbuild": "npm run generate"
  },

Finally, we can push the app on Heroku with:

git push heroku master

To deploy a non-master branch to Heroku use:

git push heroku develop:master

where develop is the name of your branch.

You can optionally configure automatic deploys from a selected branch of your app's GitHub repository in the Deploy section of your app in the Heroku dashboard.

Voilà! Your Nuxt application is now hosted on Heroku!