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.

Use the configurable SaaS portal

apps/saas-portal is the ready-to-run option for an organization that does not want to build its own host first. Its @nuxt-customer-portal/saas-configuration layer provides guided onboarding and an administrator settings page for:

• portal name, tagline, support details, logos, and marks;
• Apex or Brutal presentation, color-mode policy, and primary colors;
• Timesheets, Invoices, the invoice-timesheets bridge, and the optional Service Requests example;
• English and Dutch homepage, feature, support, terms, and privacy content.

The settings are stored for the portal and applied at runtime. To try this path without setting up the repository and PostgreSQL locally, request a hosted evaluation version at PortalNuxt.

Own selected pages in the host

During interactive setup, choose Customize website pages to copy the homepage, privacy page, and terms page into the new host's app/pages/ directory. Onboarding, portal settings, authentication, and the other portal routes continue to come from their packages. Leave the choice disabled to keep every page package-provided.

You can copy one page into an existing generated host at any time:

pnpm portal page copy login

The available names are home, privacy, terms, and login. The command also adds direct dependencies required by the copied page. It checks every destination first and does not change anything when a local file would be overwritten.

Nuxt gives the host page precedence over the same route supplied by a layer, so the local file is the version to edit and no duplicate route is created. A copied page is now your code: package upgrades do not apply upstream changes to it automatically. Review relevant package release notes and merge changes manually when you want them.

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.
• apps/saas-portal: configurable branding, content, appearance, and modules for one organization.

They enable the same platform and business packages, including the Service Requests example, but do not share demo-only shell components. Your own portal can select only the modules it needs.

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.