Problem
Currently, @pinia/colada-nuxt only loads colada.options.ts from the consuming project's root directory:
// nuxt/src/module.ts
const coladaOptionsPath = resolve(nuxt.options.rootDir, 'colada.options')
This makes it impossible for Nuxt modules/layers to provide default Pinia Colada configurations (like global error handling) to consuming projects.
Use Case
I'm building a shared Nuxt module (nuxt-shared) that provides:
- Authentication
- Authorization
- GraphQL integration
- Global error handling for GraphQL errors
I want to provide default PiniaColadaQueryHooksPlugin configuration with onSuccess and onError hooks, but currently:
- ❌ Can't export colada options from my module
- ❌ Users must manually create
colada.options.ts in every project
- ❌ Can't share error handling logic across projects
Proposed Solution
Allow modules to register colada options via Nuxt module hooks:
Option 1: Module Hook
// In my nuxt-shared module
export default defineNuxtModule({
setup(options, nuxt) {
nuxt.hook('pinia-colada:options', (coladaOptions) => {
// Merge module's default options
coladaOptions.plugins = coladaOptions.plugins || []
coladaOptions.plugins.push(
PiniaColadaQueryHooksPlugin({
onError: (error) => { /* handle */ }
})
)
})
}
})
Option 2: Module Config
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@pinia/colada-nuxt'],
piniaColada: {
// Inline options (instead of colada.options.ts)
plugins: [/* ... */],
queryOptions: { /* ... */ }
}
})
Option 3: Multiple Config Files
// Load from multiple sources and merge
const configs = [
// From modules
...nuxt.options._layers.map(layer =>
resolve(layer.config.srcDir, 'colada.options')
),
// From project root (highest priority)
resolve(nuxt.options.rootDir, 'colada.options')
]
Benefits
- ✅ Reusable configurations - Share error handling across projects
- ✅ Better DX - Modules can provide sensible defaults
- ✅ No breaking changes - Project-level config still works
- ✅ Composable - Multiple modules can contribute options
Workaround (Current)
Currently, I'm forced to:
- Create a plugin in my module
- Manually call
app.use(PiniaColada, options)
- Hope it runs in the correct order
This bypasses @pinia/colada-nuxt's built-in setup and SSR handling.
References
- Similar pattern in
@nuxtjs/i18n: Supports both config file and inline options
- Nuxt layers: Other modules can extend from layers
- Code reference:
|
nuxt.options.vite.optimizeDeps.exclude.push('@pinia/colada') |
|
} |
|
|
|
// Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack` |
|
addPlugin(resolve('./runtime/plugin')) |
Would love to hear thoughts on this! Happy to contribute a PR if there's interest. 🙏
Problem
Currently,
@pinia/colada-nuxtonly loadscolada.options.tsfrom the consuming project's root directory:This makes it impossible for Nuxt modules/layers to provide default Pinia Colada configurations (like global error handling) to consuming projects.
Use Case
I'm building a shared Nuxt module (
nuxt-shared) that provides:I want to provide default
PiniaColadaQueryHooksPluginconfiguration withonSuccessandonErrorhooks, but currently:colada.options.tsin every projectProposed Solution
Allow modules to register colada options via Nuxt module hooks:
Option 1: Module Hook
Option 2: Module Config
Option 3: Multiple Config Files
Benefits
Workaround (Current)
Currently, I'm forced to:
app.use(PiniaColada, options)This bypasses
@pinia/colada-nuxt's built-in setup and SSR handling.References
@nuxtjs/i18n: Supports both config file and inline optionspinia-colada/nuxt/src/module.ts
Lines 24 to 28 in d063471
Would love to hear thoughts on this! Happy to contribute a PR if there's interest. 🙏