I'm building a Nuxt 3 application using a feature-based architecture inspired by Domain-Driven Design.
Each feature is meant to be fully isolated, with its own components, state, API layer, and internal logic.
The general problem
Real-world applications often require one feature to react to actions performed in another.
However, if one feature directly imports, calls, or manipulates another feature, this creates tight coupling and breaks the idea of independent bounded contexts, which is a core DDD principle.
I’m trying to find a clean, maintainable way for features to communicate without referencing each other directly.
Project structure
├─ app/
├─ assets/
├─ components/
├─ composables/
├─ pages/
├─ server/
├─ plugins/
├─ features/
│ ├─ search-panel/
│ │ ├─ components/
│ │ ├─ composables/
│ │ ├─ store/
│ │ ├─ api/
│ │ └─ utils/
│ └─ map/
│ ├─ components/
│ ├─ composables/
│ ├─ store/
│ ├─ api/
│ └─ utils/
Example to illustrate the issue
In this setup:
search-panelallows users to filter and search for places.mapdisplays markers on a map.
Both are isolated features with their own components, composable, store API etc.
Now the challenge:
👉 When a user selects a place in search-panel, it needs to be highlighted in map.
But if search-panel calls map directly (or imports its store), this creates a cross-feature dependency — something I’m trying to avoid.
Question
What is the recommended way for independent features in a Nuxt (or modern front-end) application to communicate without creating coupling or breaking DDD boundaries?
Examples from real production projects or open-source repositories would be extremely helpful.
Thanks!