Deploy Nuxt JS on Github Pages

To deploy or push a Nuxt JS application to Github Pages, you need to change the base url of the project, the privacy of your repository to public, and install some dependencies to speed up the process.

Nuxt Configuration

First, we need to change the base url of our routes in the nuxt.config.js.

export default {
  router: {
    base: '/repository-name'
  },
  ...
}

Url Base Configuration

Push-Dir Package

Now, we need to install the push-dir package, which will help us to deploy our dist folder into a github branch (gh-pages).

npm install push-dir

NPM Command to Install Push-Dir

Additionally, we need to create a command in the package.json to execute the deploy.

{
  ...
  "scripts": {
    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
  },
}

NPM Command to Deploy a Branch on Github

If you want to know more about this package, I recommend you follow this link.

Images

If your project is using images stored in the static folder of the application root, you will need to update the path to these images in the src of your html tag.

<img :src="'/repository-name/images/icon.png'" alt="">

Image Route for Github Pages

To make it easier, you could save the route in the publicRuntimeConfig inside the nuxt.config.js configuration file and use this value from the global variable configuration $config.

export default {
  ...
  publicRuntimeConfig: {
    BASE_URL: '/repository-name',
  }
}

Setting publicRuntimeConfig in nuxt.config.js

Global Variable in HTML Tags

Deploy

Finally, we need to generate the static files of the application and deploy the dist folder to github pages using the following commands.

npm run generate

Command to Generate Nuxt Static Files

npm run deploy

Command Created to Deploy Dist Folder in Github Pages

Github Configuration

Once you have finished the previous steps, in your github repository we are going to open the configuration and in the pages menu, we are going to select the gh-pages branch and save the configuration.

Finally, we are going to wait several minutes until the repository has been deployed.