[Experiment] Template Customization Using Nuxt Layers Experiment

[patzick]

Create a modular template system using Nuxt Layers that allows easy customisation of design tokens and component overrides while maintaining a clean separation of concerns.

Background

Currently, templates are monolithic structures. By leveraging Nuxt Layers, we can create a more modular and maintainable approach that allows for easier customisation and component overrides. This can be especially useful for multi-frontend shops, where only small parts of the template are different.

Resources

• Nuxt Layers
• UnoCSS
• Figma Design

Styling and Token Customization

• UnoCSS should be used for styling
• All design tokens should be customizable through the project's unocss.config.ts using theme config

Example:

// unocss.config.ts
export default defineConfig({
  theme: {
    colors: {
      primary: {
        50: "#...",
        // ...
      },
    },
    typography: {
      // ...
    },
  },
});

Component Override System

• Implement a "detach" mechanism that allows copying components from layers to the main project, maybe as command, maybe as Nuxt devtools option

Acceptance Criteria

Token Customisation

• [ ] All design tokens (colors, typography, spacing) are configurable through unocss.config.ts
• [ ] Changes to tokens automatically reflect across all components
• [ ] Token inheritance works properly across layers

Component Override System

• [ ] Components can be detached from layers to main project
• [ ] Detached components maintain all functionality
• [ ] Original component references are automatically updated to use detached version
• [ ] Clear documentation on detachment process

Layer Management

• [ ] Layers can be added/removed without breaking the application
• [ ] Clear layer dependency management
• [ ] Proper type support across layers

Technical Implementation Notes

Layer Configuration

export default defineNuxtConfig({
  extends: ["layer-name", "other-layer-name"],
  // Layer-specific configurations
});

Documentation Requirements

• [ ] Setup guide for implementing layers
• [ ] Token customisation documentation
• [ ] Component detachment workflow
• [ ] Best practices for layer management

Future Considerations

• Performance impact of layer implementation
• Version control strategy for detached components