nuxt-prepare

Nuxt Prepare

Nuxt module to run async initialization steps at build-time.

• ✨  Release Notes
• 📖  Read the documentation

Features

• 🦦 Zero-Config
• 🦎 Run sync or async operations when Nuxt builds your app
• ✂️ Conditionally overwrite runtime config or app config values
• 🍡 Run scripts in series or parallel
• 🥢 Ready for Nitro server routes
• 🦾 Better DX with defineNuxtPrepareHandler

Setup

npx nuxt module add prepare

Basic Usage

Add Nuxt Prepare to your Nuxt configuration:

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-prepare']
})

By default, Nuxt Prepare will look for a server.prepare.ts file in your project root. To run synchronous or asynchronous code when Nuxt builds your app, define a handler in your project root and export a default function:

// `server.prepare.ts`
import { defineNuxtPrepareHandler } from 'nuxt-prepare/config'

export default defineNuxtPrepareHandler(async () => {
  // Do some async magic here, e.g. fetch data from an API

  return {
    // Overwrite the runtime config variable `foo`
    runtimeConfig: {
      public: {
        foo: 'Overwritten by "server.prepare" script'
      }
    },

    // Pass custom state to Nuxt and import it
    // anywhere from `#nuxt-prepare`
    state: {
      foo: 'bar'
    }
  }
})

[!TIP] You can run as many prepare scripts as you want – add them to the prepare.scripts module configuration.

The documentation covers the handler API, prepare state and every module option.

💻 Development

1. Clone this repository
2. Enable Corepack using corepack enable
3. Install dependencies using pnpm install
4. Run pnpm run dev:prepare
5. Start development server using pnpm run dev

Credits

• Konkon for his logo pixel art.
• McPizza0 for his inspirational nuxt-server-init module.

License

MIT License © 2023-PRESENT Johann Schopplich