Nuxt 3: Read Contents of /public at Build Time

Question

Inside the /public/images directory of my Nuxt 3 project, I have a number of images, which are spread out into multiple sub-directories. For a gallery page, I want to read all file paths so that I can render an img tag for each one and don't have to hard-code them. Currently, I do this inside an API endpoint. The code for that looks like this:

import { readdir, stat } from "node:fs";
import { join } from "node:path";

async function read(path, callback) {
  let images = [];

  readdir(path, (err, files) => {
    if (err) {
      throw err;
    }

    let i = 0;

    (function next() {
      if (i === files.length) {
        return callback(images);
      }

      const file = join(path, files[i++]);

      stat(file, (err, stats) => {
        if (err) {
          throw err;
        }

        if (stats.isDirectory()) {
          read(file, (value) => {
            images = images.concat(value);

            next();
          });
        } else {
          images.push(file);

          next();
        }
      });
    })();
  });
}

export default defineEventHandler(async (_event) => {
  return await new Promise((resolve, reject) => {
    try {
      read("./public/images/blog", (value) => {
        resolve(value.map((value) => value.substring(6)));
      });
    } catch (error) {
      reject(error);
    }
  });
});

What I would like to do instead is create this array containing all image paths at build time. From my understanding, this could be achieved using lifecycle hooks. However, I don't understand the documentation for this part of the framework. Can somebody point me in the right direction?

Answer 1

You can define a module and use the 'build:before' lifecycle hook to execute code at build time.

Read more about lifecycle hooks here: https://nuxt.com/docs/guide/going-further/hooks

See also: https://nuxt.com/docs/guide/going-further/modules

Although after you have obtained your array of images I'm not sure how you can reference that array from other parts of the code, but I hope this is enough to help you in the right direction.

modules/yourModule.ts

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    nuxt.hook('build:before', async ()=>{
        // read contents of public and get images
        let images = [];
        // do something with images
    })
  }
})

nuxt.config.ts

import { getProjects } from "./data"
import yourModule from "./modules/yourModule"

export default defineNuxtConfig({
    modules: [
        yourModule 
    ]
})