Overview:

This article provides a guide on how to deploy a Nuxt 3 project on GitHub Pages. It provides step-by-step instructions that include installing necessary dependencies, modifying configuration files, and generating and deploying the project. The article also mentions an alternative method using GitHub Actions for deploying on GitHub Pages.

Features:

• Dependency for GitHub Pages: The article suggests installing the “gh-pages” dev dependency to facilitate the deployment of the Nuxt 3 project on GitHub Pages.
• Script for Deployment: The article recommends adding a script called “deploy” in the package.json file, which uses the “gh-pages” dependency to deploy the project. The script copies the project’s “dist” content to a specific “gh-pages” branch.
• Configuration Modifications: The article advises specifying the app baseURL and buildAssetsDir in the nuxt.config.ts file. It suggests setting the buildAssetsDir to a directory name that doesn’t start with an underscore.
• Router Configuration: The article provides an example of router configuration, which demonstrates the expected behavior of the deployment on GitHub Pages.

Installation:

To deploy a Nuxt 3 project on GitHub Pages, follow these steps:

1. Install the dev dependency “gh-pages”:

npm install --save-dev gh-pages

2. Add the following script to the “scripts” section in the package.json file:

"deploy": "gh-pages -d dist"

3. Specify the app baseURL in the nuxt.config.ts file:

export default {
  // other configurations...
  vue: {
    config: {
      baseURL: process.env.NODE_ENV === "production" ? "/<repository>/" : "/"
    }
  }
}

4. Specify the buildAssetsDir in the nuxt.config.ts file:

export default {
  // other configurations...
  build: {
    buildAssetsDir: "assets"
  }
}

5. Create an empty file named “.nojekyll” at the root of your project.

6. Generate the project using the following command:

npm run generate

7. Deploy the project to GitHub Pages:

npm run deploy

It is important to note that the “depoy” and “generate” scripts should be run from the project’s root directory.

Summary:

This article provides a comprehensive guide on how to deploy a Nuxt 3 project on GitHub Pages. It covers the installation of the “gh-pages” dependency, modification of the nuxt.config.ts file, and the generation and deployment of the project. The article also mentions an alternative method using GitHub Actions for deployment. By following the provided instructions, users will be able to successfully deploy their Nuxt 3 projects on GitHub Pages.