Customize and brand the portal

Reusable packages deliberately contain no customer brand or public marketing site. Your Nuxt host owns app.vue, layouts, headers, navigation, footer, error page, global CSS, public pages, and assets.

Start from the neutral fallback

@nuxt-customer-portal/ui provides a complete neutral fallback layout, dashboard aggregation, menus, notifications, and shell primitives. The preset therefore works before you create a custom shell. Override a Nuxt layout or component in the host when you are ready; feature packages continue to contribute through the registry.

The repository demonstrates two independent compositions:

• apps/demo-apex: fixed header, collapsible sidebar, and restrained SaaS styling;
• apps/demo-brutal: high-contrast editorial grid, module command bar, and two-pane responsive navigation.

They enable the same preset, Service Requests, and Timesheets packages but do not share demo-only shell components.

Keep the host boundary clear

Place these in the application, not a reusable package:

app/app.vue
app/layouts/
app/components/<your-shell>/
app/assets/css/
app/error.vue
public/

Use PortalFeatureDefinition navigation and dashboard registrations instead of importing an optional feature's Vue files. Render additional context panels through PortalSurfaceContribution; for example, Timesheets contributes to administration.organization.detail without Administration importing Timesheets.

Brand runtime email

Set the email subject brand in host runtime configuration and replace or wrap the neutral HTML template if your deployment needs a branded email frame:

export default defineNuxtConfig({
  runtimeConfig: {
    portalEmail: {
      brandName: 'Example Company'
    }
  }
})

Exercise verification, sign-in, recovery, invitation, deletion, and invoice delivery against a controlled mailbox before deployment.

Validate distinct shells

Test authentication, organization switching, administration, enabled business features, keyboard navigation, contrast, and responsive behavior. A custom shell may change structure and presentation, but must preserve route authorization and active-organization semantics supplied by core.