Nuxt•11mo ago

How do you add a directory of files to publicAssets at build time?

I'm trying to add a directory of files (wasm and tflite models) to my publicAssets directory at build time so that my application can access these files by url during runtime. It seems that the way to do this would be via the Nuxt config:

export default defineNuxtConfig({
// ...
nitro: {
  publicAssets: [
    {
      baseURL: 'my_assets',
      dir: 'node_modules/path/to/the/assets
    }
  ]
}
})

export default defineNuxtConfig({
// ...
nitro: {
  publicAssets: [
    {
      baseURL: 'my_assets',
      dir: 'node_modules/path/to/the/assets
    }
  ]
}
})

However, with this config I don't see the assets in my .output/public dir after building either dev or production. Is this a bug, or is there a different way to acheive this?

9 Replies

Maloooo•9mo ago

Hey! Were you able to solve this problem ? 😄

Mark BrouchOP•9mo ago

unfortunately no

ManUtopiK•7mo ago

I do this in a nuxt module :

nuxt.hook('nitro:config', (nitroConfig) => {
      nitroConfig.publicAssets ||= []
      nitroConfig.publicAssets.push({
        dir: 'path/to/folder',
        baseURL: ROUTE_CLIENT,
        maxAge: 60 * 60 * 24 * 365, // 1 year
      })
    })

nuxt.hook('nitro:config', (nitroConfig) => {
      nitroConfig.publicAssets ||= []
      nitroConfig.publicAssets.push({
        dir: 'path/to/folder',
        baseURL: ROUTE_CLIENT,
        maxAge: 60 * 60 * 24 * 365, // 1 year
      })
    })

handshake•7mo ago

doesn't anything within the "public" folder get generated? Or are you looking for something different?

ManUtopiK•7mo ago

Sorry, I don't understand what you mean. I use this alongside with nuxt-content and push the files of the content directory in the public directory, so every files (.md, .yaml...) are available at runtime. With this, I can fetch the files at runtime, or access it just by adding extension to the route. Let's say I have this content : /content my-file.md So, I can navigate to the route https://example.com/my-file to display the page, or get the raw markdown content with https://example.com/my-file.md It also works for sub path and any kind of files : .yaml, .json ...

handshake•7mo ago

@ManUtopiK you're question is vague, you're asking "how to add a directory to public assets"... You don't mention what type of directory or where that directory lives. So I'm suggesting if you add a new directory within the "public" directory, you'll have those assets after building...

ManUtopiK•7mo ago

Yep, that's the point. Cool, isn't it ? I asked nothing, it was @Mark Brouch . I'm proposing a solution.

Mark BrouchOP•7mo ago

hmm @ManUtopiK I tried that, adding in a nuxt module with:

nuxt.hook('nitro:config', nitroConfig => {
  nitroConfig.publicAssets ||= [];
  nitroConfig.publicAssets.push({
    dir: 'node_modules/path/to/dir',
    baseURL: '/my-node-module-assets',
    maxAge: 60 * 60 * 24 * 365, // 1 year
  });
});

nuxt.hook('nitro:config', nitroConfig => {
  nitroConfig.publicAssets ||= [];
  nitroConfig.publicAssets.push({
    dir: 'node_modules/path/to/dir',
    baseURL: '/my-node-module-assets',
    maxAge: 60 * 60 * 24 * 365, // 1 year
  });
});

However, I still am not seeing these assets in the nuxt dev server. @handshake manually copying these assets to my public dir is what I'm currently doing, however I'd rather have a solution that mounts a specific node_modules dir so I don't have to copy over the files every time that particular package is updated. ah figured it out! just needed to create a resolver to get the correct path. All is working now the way I wanted it, thanks @ManUtopiK! in case someone in the future comes across this, my solution was:

nuxt.hook('nitro:config', nitroConfig => {
  nitroConfig.publicAssets ||= [];
  nitroConfig.publicAssets.push({
    dir: resolvePath('node_modules/path/to/dir'),
    baseURL: '/my-node-module-assets',
    maxAge: 60 * 60 * 24 * 365, // 1 year
  });
});

nuxt.hook('nitro:config', nitroConfig => {
  nitroConfig.publicAssets ||= [];
  nitroConfig.publicAssets.push({
    dir: resolvePath('node_modules/path/to/dir'),
    baseURL: '/my-node-module-assets',
    maxAge: 60 * 60 * 24 * 365, // 1 year
  });
});

handshake•7mo ago

oh geez, sorry dude wrong handle... my bad

Gaming

Programming

How do you add a directory of files to publicAssets at build time?

Did you find this page helpful?