---
title: "Replace a page"
description: "Move a packaged page with backend.pages, replace it with an app page at the same path, or rebuild it from the composables."
canonical_url: "https://nuxt-backend.dev/docs/ui/customize/replace-pages"
---
# Replace a page

> Move a packaged page with backend.pages, replace it with an app page at the same path, or rebuild it from the composables.

Every packaged page is mounted. The [`pages` module option](https://nuxt-backend.dev/docs/reference/configuration/module-options) moves one; **an app page at a page's path replaces it** — the module detects it, skips its own, and logs the override, so you never fight the router:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['nuxt-backend'],
  backend: {
    pages: {
      pricing: '/plans',      // the packaged pricing page, at /plans
      login: '/auth/sign-in', // and the sign-in page; the `auth` middleware follows it
    },
  },
})
```

To bring your own profile page, add `app/pages/profile.vue`: it replaces the packaged one at `/profile`. The path you give `pages.login` is also where the `auth` middleware sends a signed-out visitor, whether the packaged sign-in page or your own serves it.

The path per page key is published to `runtimeConfig.public.backend.pages` — that is how the shipped components cross-link (settings → pricing, pricing → login), and how your own components can, too.

Each page's path also carries route rules: no page is prerendered, and a private page (settings, profile, security, the invitation and consent pages) is kept out of search indexes, sitemaps and caches, with `cache-control: private, no-store`. They follow the path, so a page of your own there gets them too; a rule you set for that exact path wins key by key. They hold at that exact path only, so keep an app-wide `swr`, `isr` or `cache` rule off the private pages: [Caches](https://nuxt-backend.dev/docs/ui/pages#caches) has why.

## Build from composables

For a fully custom page, drop the component and build on the same composables the packaged one uses — `useLoginFlow()`, `useBilling()`, `useCredits()`, `useGifts()`, `useOrganization()`, `usePasskeys()`, `useSessions()`. The playground's own [/login](https://nuxt-backend.dev/login) page is a worked example: full custom markup on `useLoginFlow`, shadowing the module's login page.


## Sitemap

See the full [sitemap](https://nuxt-backend.dev/sitemap.md) for all pages.