Nuxt•4w ago

How to share configs in DDD Nuxt App?

I have flat structure

.
├── app/
│   ├── .playground/
│   │   └── .nuxt.config.ts
│   ├── nuxt.config.ts
│   ├── stores
│   ├── constants
│   └── services
├── auth/
│   ├── .playground/
│   │   └── .nuxt.config.ts
│   └── nuxt.config.ts.
├── nuxt.config.ts
├── package.json
└── .gitignore

.
├── app/
│   ├── .playground/
│   │   └── .nuxt.config.ts
│   ├── nuxt.config.ts
│   ├── stores
│   ├── constants
│   └── services
├── auth/
│   ├── .playground/
│   │   └── .nuxt.config.ts
│   └── nuxt.config.ts.
├── nuxt.config.ts
├── package.json
└── .gitignore

I decided that all my auto-import rools will be in root nuxt.config

import { useLayers } from 'nuxt-layers-utils'

const layers = useLayers(__dirname, {
  app: 'app',
  auth: 'auth',
})

export default defineNuxtConfig({
  extends: layers.extends(),
  alias: layers.alias('#'),
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },

  imports: {
    dirs: [
      '**/stores',
      '**/constants',
      '**/services',
      'packages',
    ],
  },

  modules: ['@nuxt/eslint'],
})

import { useLayers } from 'nuxt-layers-utils'

const layers = useLayers(__dirname, {
  app: 'app',
  auth: 'auth',
})

export default defineNuxtConfig({
  extends: layers.extends(),
  alias: layers.alias('#'),
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },

  imports: {
    dirs: [
      '**/stores',
      '**/constants',
      '**/services',
      'packages',
    ],
  },

  modules: ['@nuxt/eslint'],
})

When I try to pnpm dev in auth/.playground I get error, that myStore is not defined in auth default layout. I thought that root nuxt.config is shared between layers, but turns out its not. How do I have to manage configs, to be able to test them in .playground?

2 Replies

kapa.ai•4w ago

Hi @Incognitus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have enough specific details to fully address your question about sharing configs in a DDD Nuxt app with the structure you've described. However, I can provide some general insights about Nuxt layers and configuration that might be helpful: 1. Nuxt supports a layered architecture, where you can extend configurations from multiple sources. This is done using the extends key in the nuxt.config.ts file Docs > Examples > Advanced > Layers (https://nuxt.com/docs/examples/advanced/config-extends). 2. Nuxt has introduced an experimental feature called localLayerAliases which allows resolving aliases like ~, ~~, @, and @@ within layers with respect to their layer source and root directories Docs > Guide > Going-further > Experimental Features > localLayerAliases (https://nuxt.com/docs/guide/going-further/experimental-features#locallayeraliases). 3. For sharing configurations across layers, you might want to look into the appConfig option in the Nuxt configuration. This allows you to provide additional app configuration programmatically, which will be merged with the app.config file Docs > Api > Nuxt Configuration > appConfig (https://nuxt.com/docs/api/nuxt-config#appconfig). 4. Nuxt uses a custom merging strategy for the AppConfig within layers of your application. This strategy is implemented using a Function Merger, which allows defining a custom merging strategy for every key in app.config that has an array as value Docs > Guide > Directory-structure > app.config.ts > Merging Strategy (https://nuxt.com/docs/guide/directory-structure/app-config#merging-strategy). 5. For your specific case of auto-importing from directories, you might need to ensure that these import rules are also defined in the nuxt.config.ts files of your individual layers (like auth and app), not just in the root config. To address the error you're encountering when running pnpm dev in auth/.playground, you might need to ensure that the auth layer's nuxt.config.ts is properly extending the root configuration and including the necessary import rules. Unfortunately, without more specific information about how your layers are set up and how nuxt-layers-utils works (which isn't part of the official Nuxt documentation provided), I can't provide a more detailed solution. You might need to adjust your layer configuration or how you're extending configs between layers. If you continue to face issues, you might want to consult the Nuxt documentation on layers and configuration extending, or reach out to the Nuxt community for more specific guidance on your setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Gaming

Programming

How to share configs in DDD Nuxt App?