johannschopplich/nuxt-prepare

🦎 Build actions for Nuxt

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 variables
• 🦾 Better DX with defineNuxtPrepareHandler

Setup

Tip

📖 Read the documentation

npx nuxi@latest module add prepare

Basic Usage

Tip

📖 Read the documentation

Add the nuxt-prepare module to your nuxt.config.ts:

// `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.

💻 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

• Maronbeere for his Chameleon pixel art.
• McPizza0 for his inspirational nuxt-server-init module.

License

MIT License © 2023-PRESENT Johann Schopplich

nuxt-prepare's Issues

Nuxt prepare scripts for specific route

Describe the feature

i could to ask if its possible to specific prepare handler for specific route like
prepare for foo route
prepare for bar route

than calling all api on single handler

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Can I set runtime config with the result of a prepare script?

Describe the feature

Not really a feature but didn't find a 'Question' button 😅

We were reading a runtime config key from env variable and now we fetch it from an API using the module at build time.
Is there a way we can set that runtime config key with the result we get from the API? Currently we store it in a useState and it works well but saving it to runtime config would be more clean. Thanks!

I think this is similar to nuxt/nuxt#15366

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Clarify what the modules actually does in the docs

Describe the feature

I would like to clearly understand from the docs what this module can help me with. I think it might be useful for an issue I'm facing, but I'm honestly not sure if I'm just projecting my needs onto this module. A simple paragraph explaining the limitations of Nuxt and what issue this module aims to solve would help me better grasp whether I should use this module or not.

Cheers!

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Latest version crashes when running `prepare` script ('ERROR File './.nuxt/tsconfig.json' not found.')

Environment

Stackblitz (Working)

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools
• Runtime Modules: [email protected]
• Build Modules: -

Windows (Not Working)

• Operating System: Windows_NT
• Node Version: v20.13.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools
• Runtime Modules: [email protected]
• Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-jd354j

Describe the bug

I was bumping to v2 when the prepare command started failing with the following error.

ℹ Running prepare script server.prepare                                                                                                                   nuxt-prepare 11:25:29 pm

 ERROR  File './.nuxt/tsconfig.json' not found.                                                                                                                         11:25:29 pm

  at je (/C:/Users/Muhammad/Desktop/New%20folder/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:6212)
  at ie (/C:/Users/Muhammad/Desktop/New%20folder/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:7162)
  at le (/C:/Users/Muhammad/Desktop/New%20folder/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:7877)
  at $e (/C:/Users/Muhammad/Desktop/New%20folder/node_modules/.pnpm/[email protected]/node_modules/get-tsconfig/dist/index.mjs:7:7982)
  at /C:/Users/Muhammad/Desktop/New%20folder/node_modules/.pnpm/[email protected]/node_modules/tsx/dist/esm/index.mjs?1716236729306:2:899
  at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
  at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
  at async Hooks.register (node:internal/modules/esm/hooks:165:26)
  at async MessagePort.handleMessage (node:internal/modules/esm/worker:196:18)

Additional context

Steps to reproduce:

• Open the Stackblitz link and run pnpm run postinstall which runs the prepare command. Everything works fine
• Download the project (There's an icon above the sidebar) on a Windows machine and run pnpm run postinstall, it fails with the above error
• The error shows up in the CI too which is using Linux (same as Stackblitz) which is weird to me.

This is a screenshot of the error from my local machine

Logs

No response

Looking for help with an i18n strategy

Describe the feature

Sorry not a feature request.

For sites with i18n in nuxt2 we would pass a global object to each route in the generate script. The global payload needs to match the locale of each page so we would get every locale, loop through them to get the correct global payloads and then pass them in:

return {
      route: path,
      globals: globals[locale],
    }

With nuxt-prepare, whats the best strategy for this scenario?
Following the pinia example, and imagining the todos api had i18n - would you get all of the todos in every locale at this stage and then pass them all to the store?

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Autodetect pinia

Describe the feature

Hey,
If pinia is installed, it would be nice to call a nuxtServerInit and nuxtClientInit pinia action like Nuxt 2 did with VueX.

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Docs error: incorrect import from `nuxt-prepare/config`

Environment

• Operating System: Darwin
• Node Version: v20.2.0
• Nuxt Version: 3.6.5
• Nitro Version: 2.5.2
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

Install nuxt-prepare dependancy
add to nuxt.config.ts modules
create server.prepare.ts
add line import { defineNuxtPrepareHandler } from 'nuxt-prepare/config';

Describe the bug

Importing from 'nuxt-prepare/config' fails as /config is not a module in itself.
defineNuxtPrepareHandler is already re-exported by module.ts and thus the import can be directly from the package:

import { defineNuxtPrepareHandler } from 'nuxt-prepare'

Additional context

No response

Logs

No response

[Docs Request] Add example for how to use the module to fill the store

Describe the feature

Hello,

Thanks for the great module. I've been looking for something like NuxtServerInit in Nuxt 2 to fill up my Pinia store on first run.

My use case is I scrape some data using playwright on the server and I need to run that at build time and fill that data into the store to then use it in the frontend (I'm serving the site as a SSG).

Afer searching and trying workarounds in this discussion I managed to get it to work. But this package seems a much more cleaner way to do it. Can an example of usage with pinia be provided? I'm willing to help but I think I don't got the enough understanding for it sorry for that.

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Conditional payload when `?preview=true`

Describe the feature

Hi @johannschopplich,
I love and regularly use nuxt-prepare. But sometimes it'd be handy to have the chance to update data in preview mode (preview=true). Is there any chance to implement this myself? Or could this be an upcoming feature?

Thanks for your thoughts on this topic!
Tobi

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

Ability to rerun prepare steps during runtime

Describe the feature

This might be completely out of scope for the project but ever since I saw your module, the idea of refreshing all or only certain prepare steps during runtime was quite enticing to me.

If your prepare step is done against a CMS or API, content might change and update during the apps runtime. With that I think it would be quite a lot faster and more intuitive to rerun the steps instead of rebuilding the entire app. Instead of restarting the entire build pipeline on CMS updates it simply calls a nitro webhook style which triggers prepare again.

Again, might be completely out of scope and I'm not even sure how doable it is to emit new js chunks during runtime and hook things up properly, so feel completely free to close the issue. Just wanted to get the idea out there😊

Thanks!

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.