Frontend Layers

The frontend uses Nuxt layers to separate generic framework UI from reflectometry-specific behavior.

Layer order

The root Nuxt configuration extends the layers in this order:

  1. ./layers/reflectometry

  2. ./layers/base

Because the reflectometry layer is listed first in vipr-frontend/nuxt.config.ts, it has higher priority for route, component, and auto-import resolution. The base layer acts as the generic fallback.

Base layer

The base layer provides the reusable application shell:

  • shared pipeline configuration stores

  • generic inference and results state

  • file upload handlers

  • streaming and plugin management UI

  • shared composables such as configuration import, validation, downloads, and progress tracking

Representative entry points:

  • vipr-frontend/layers/base/app/composables/useConfigImporter.ts

  • vipr-frontend/layers/base/app/stores/inferenceStore.ts

  • vipr-frontend/layers/base/app/stores/pipelineConfigurationStore.ts

The base layer registers its stores and composables for Nuxt auto-imports in vipr-frontend/layers/base/nuxt.config.ts.

Reflectometry layer

The reflectometry layer adds domain-specific behavior on top of the base layer:

  • model adapters for reflectorch, panpe, and flow-model handlers

  • reflectometry-specific configuration stores

  • reflectometry charts and result views

  • use-case-specific pipeline step overrides

Representative entry points:

  • vipr-frontend/layers/reflectometry/app/composables/useModelAdapter.ts

  • vipr-frontend/layers/reflectometry/app/composables/useModelHandler.ts

  • vipr-frontend/layers/reflectometry/app/stores/reflectometryConfigStore.ts

The reflectometry layer also registers its stores and composables via vipr-frontend/layers/reflectometry/nuxt.config.ts.

Documentation strategy

The layer boundary is the key architectural concept, so the frontend docs treat it as a first-class topic.

This is also why the planned generated TypeScript reference focuses on:

  • app/composables

  • app/stores

  • app/types

Pages and Vue SFCs remain important, but they are mostly orchestration surfaces. Their responsibilities are documented separately on the routes page instead of treating them as the primary API reference.