Nuxt•2mo ago

How can I include additional files to the build?

I have prisma folder that needs to be included to the build so I can run migrations etc. How can I include it to my built nuxt app?

16 Replies

kapa.ai•2mo ago

Hi @zigglearner1235. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To include additional files (like your prisma folder) in your built Nuxt app, you can leverage Nuxt's module system and hooks to copy or expose those files during the build process. Option 1: Use a Build Hook to Copy Files You can use the build:done hook in your nuxt.config.ts to copy the prisma folder into the build output directory. Here’s an example:

import fs from 'node:fs'
import path from 'node:path'

export default defineNuxtConfig({
  hooks: {
    build: {
      done(builder) {
        const src = path.resolve('prisma')
        const dest = path.join(builder.nuxt.options.buildDir, '../prisma')
        fs.cpSync(src, dest, { recursive: true })
      }
    }
  }
})

import fs from 'node:fs'
import path from 'node:path'

export default defineNuxtConfig({
  hooks: {
    build: {
      done(builder) {
        const src = path.resolve('prisma')
        const dest = path.join(builder.nuxt.options.buildDir, '../prisma')
        fs.cpSync(src, dest, { recursive: true })
      }
    }
  }
})

This will copy your prisma folder to the output directory after the build is complete. Adjust the destination as needed for your deployment setup.
See example of using build hooks Option 2: Expose Files as Public Assets (for server access) If you need the files to be accessible at runtime (for example, for migrations or runtime access), you can expose them using Nitro’s publicAssets option in a module:

import { defineNuxtModule, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    nuxt.hook('nitro:config', (nitroConfig) => {
      nitroConfig.publicAssets ||= []
      nitroConfig.publicAssets.push({
        dir: resolver.resolve('./prisma'),
        maxAge: 0 // or set as needed
      })
    })
  }
})

import { defineNuxtModule, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    nuxt.hook('nitro:config', (nitroConfig) => {
      nitroConfig.publicAssets ||= []
      nitroConfig.publicAssets.push({
        dir: resolver.resolve('./prisma'),
        maxAge: 0 // or set as needed
      })
    })
  }
})

See example of exposing assets with Nitro --- Note:
- If you only need the files for server-side operations (like migrations), copying them to the output directory is usually sufficient. - If you need them to be publicly accessible, use the Nitro public assets approach. If you need more advanced control, you can combine both approaches or adjust as needed for your deployment environment. If you need further details or a different setup, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1290550861109657600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

zigglearner1235OP•2mo ago

😄 @kapa.ai is it mentioned in the official nuxt docs?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The official Nuxt documentation does not specifically mention how to include a custom folder like prisma in the build output for use with tools such as Prisma migrations. However, the docs do provide examples of how to use build hooks to add extra files to the build output, as well as how to expose additional assets using Nitro's publicAssets option in a module. These approaches can be adapted to include your prisma folder in the build output, but there is no explicit mention of Prisma or a prisma folder in the official documentation Nuxt Config: hooks Injecting Other Assets. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1290550861109657600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

zigglearner1235OP•2mo ago

@kapa.ai Object literal may only specify known properties, and 'build' does not exist in type '{ 'kit:compatibility'?: ((compatibility: NuxtCompatibility, issues: NuxtCompatibilityIssues) => HookResult) | undefined; ... 71 more ...; 'scripts:registry'?: ((registry: RegistryScripts) => void | Promise<...>) | undefined; }'.ts(2353) index.d.ts(1825, 5): The expected type comes from property 'hooks' which is declared here on type 'InputConfig<NuxtConfig, ConfigLayerMeta>'

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error you are seeing:

Object literal may only specify known properties, and 'build' does not exist in type '{ ... }'

happens because, in Nuxt 3/4, the hooks property in nuxt.config.ts expects a flat object with colon-separated hook names (e.g., 'build:done'), not a nested object structure like build: { done() {} }. Correct usage:

import fs from 'node:fs'
import path from 'node:path'

export default defineNuxtConfig({
  hooks: {
    'build:done': (builder) => {
      const extraFilePath = path.join(
        builder.nuxt.options.buildDir,
        'extra-file'
      )
      fs.writeFileSync(extraFilePath, 'Something extra')
    }
  }
})

import fs from 'node:fs'
import path from 'node:path'

export default defineNuxtConfig({
  hooks: {
    'build:done': (builder) => {
      const extraFilePath = path.join(
        builder.nuxt.options.buildDir,
        'extra-file'
      )
      fs.writeFileSync(extraFilePath, 'Something extra')
    }
  }
})

This flat structure is documented in the official Nuxt docs, which show that hooks should be defined using the colon-separated string as the key, not as nested objects Nuxt Config: hooks. Summary:
Replace build: { done() {} } with 'build:done': () => {} in your hooks object to resolve the type error. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1290550861109657600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

zigglearner1235OP•2mo ago

@kapa.ai For what nuxt version the build: { done() {} } is

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The build: { done() {} } nested object syntax for hooks is shown in the Nuxt 4.x documentation as an example of how you can structure hooks in your nuxt.config file. The docs state that, for ease of configuration, you can also structure hooks as a hierarchical object in nuxt.config, not just as flat colon-separated keys. Here is the example from the official docs:

export default {
  hooks: {
    build: {
      done(builder) {
        // your code here
      }
    }
  }
}

export default {
  hooks: {
    build: {
      done(builder) {
        // your code here
      }
    }
  }
}

This example is specifically documented for Nuxt 4.x Nuxt Config: hooks. If you are seeing a type error with this syntax, it may be due to stricter type definitions in your project setup or a mismatch between your Nuxt version and the documentation. But according to the official Nuxt 4.x docs, this nested object syntax is valid. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1290550861109657600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the official Nuxt documentation, when using the build:done hook in your nuxt.config, the example shows that the done function receives a builder parameter:

export default {
  hooks: {
    build: {
      done(builder) {
        // your code here
      }
    }
  }
}

export default {
  hooks: {
    build: {
      done(builder) {
        // your code here
      }
    }
  }
}

However, the documentation does not specify the exact type or guarantee the presence of the builder parameter. If you are finding that builder is undefined, it may be due to changes in the internal API or stricter type definitions in your Nuxt version. The docs do not provide further details about the builder parameter or its usage in Nuxt 3/4.x, nor do they clarify how to reliably access the build directory or other builder properties from this hook Nuxt Config: hooks. If you need to access the build directory, you can use this.nuxt.options.buildDir inside the hook, as shown in the example, but the documentation does not explicitly confirm this for all versions. If builder is undefined, you may need to rely on the Nuxt instance or other available context, but the knowledge sources do not provide a definitive answer for this scenario. In summary:
The knowledge sources show the usage of the builder parameter in the build:done hook example, but do not guarantee its presence or provide further details. If builder is undefined, the documentation does not offer a solution or explanation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1290550861109657600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

zigglearner1235OP•2mo ago

@kapa.ai I used this approach export default defineNuxtConfig({ hooks: { 'build:done': (builder) => { const extraFilePath = path.join( builder.nuxt.options.buildDir, 'extra-file' ) fs.writeFileSync(extraFilePath, 'Something extra') } } }) builder param is undefined

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The official Nuxt documentation provides an example of using the build:done hook in nuxt.config with a builder parameter in a nested object syntax:

export default {
  hooks: {
    build: {
      done(builder) {
        const extraFilePath = path.join(
          builder.nuxt.options.buildDir,
          'extra-file'
        )
        fs.writeFileSync(extraFilePath, 'Something extra')
      }
    }
  }
}

export default {
  hooks: {
    build: {
      done(builder) {
        const extraFilePath = path.join(
          builder.nuxt.options.buildDir,
          'extra-file'
        )
        fs.writeFileSync(extraFilePath, 'Something extra')
      }
    }
  }
}

However, the documentation does not clarify the exact type or guarantee the presence of the builder parameter when using the flat 'build:done' syntax or even in the nested syntax for Nuxt 3/4.x. If you are using the flat syntax:

export default defineNuxtConfig({
  hooks: {
    'build:done': (builder) => {
      // ...
    }
  }
})

export default defineNuxtConfig({
  hooks: {
    'build:done': (builder) => {
      // ...
    }
  }
})

and builder is undefined, the knowledge sources do not provide an explanation or workaround for this issue. The documentation does not specify what arguments are passed to the build:done hook in this context, nor does it provide a reliable way to access the build directory or builder instance from this hook in Nuxt 3/4.x Nuxt Config: hooks. In summary:
The knowledge sources show the usage of the builder parameter in the build:done hook example, but do not guarantee its presence or provide further details for the flat syntax. If builder is undefined, the documentation does not offer a solution or explanation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1290550861109657600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How can I include additional files to the build?

Did you find this page helpful?