---
title: "Change copy and labels"
description: "Set the plan catalog copy, the brand and every label the packaged components render through appConfig.backend."
canonical_url: "https://nuxt-backend.dev/docs/ui/customize/labels"
---
# Change copy and labels

> Set the plan catalog copy, the brand and every label the packaged components render through appConfig.backend.

Module options own *wiring* (paths, the page set, css, scaffold); `appConfig.backend` owns *content* — the plan catalog, copy, and brand. It is reactive, HMR-friendly, and typed (`AppConfigInput.backend`). Components resolve `props ?? appConfig.backend.* ?? built-in default`.

```ts [app.config.ts]
export default defineAppConfig({
  backend: {
    billing: {
      // `key` matches a key of your billing catalog / products map — names and
      // prices always resolve live from billing, so the catalog can't drift.
      plans: [
        { key: 'starter', credits: 50, blurb: 'For trying things out.' },
        { key: 'pro', credits: 200, blurb: 'For products finding their feet.', features: ['premium'], highlight: true },
      ],
      packs: [
        { key: 'credits100', credits: 100 },
        { key: 'credits500', credits: 500 },
      ],
    },
    brand: { name: 'Acme', logo: '/logo.svg' },
    labels: {
      auth: { title: 'Sign in to Acme' },
      pricing: { subscribe: 'Get started', topUp: 'Add credits' },
      settings: { viewPlans: 'Compare plans' },
    },
  },
})
```

The full shape:

<field-group>
<field name="billing.plans" type="PricingPlan[]">

Plan cards for `<PricingTable>`: `key` (required), `credits` (display only), `blurb`, `features` (display only — grants come from billing), `highlight`.

</field>

<field name="billing.packs" type="CreditPack[]">

One-time credit packs for `<PricingTable>` and `<WorkspaceSettings>`: `key`, `credits`, `blurb`.

</field>

<field name="billing.lowCreditsThreshold" type="number" default="10">

The balance under which `<CreditsLowBanner>` appears — one number for the whole app; the component's `threshold` prop overrides it per placement.

</field>

<field name="brand.name" type="string">

Product name in shipped copy: the sign-in heading becomes "Sign in to {name}" unless `labels.auth.title` sets it outright.

</field>

<field name="brand.logo" type="string">

Logo URL. `<AuthForm>` renders it above its heading (`[data-auth='logo']`).

</field>

<field name="labels.auth" type="{ title? }">

The sign-in heading, also the login page's document title.

</field>

<field name="labels.pricing" type="{ title?, subscribe?, switch?, upgrade?, downgrade?, cancel?, uncancel?, trial?, current?, signIn?, topUp? }">

`<PricingTable>` copy. `title` is also the shipped pricing page's heading and document title; `trial` is a template (`{count}`, `{interval}`).

</field>

<field name="labels.settings" type="{ title?, create?, switch?, viewPlans?, cancel? }">

`<WorkspaceSettings>` copy; `title` is the shipped settings page's heading and document title.

</field>

<field name="labels.profile" type="{ title?, save?, changeEmail? }">

`<ProfileSettings>` copy; `title` is the shipped profile page's heading and document title.

</field>

<field name="labels.security" type="{ title?, addPasskey?, revoke?, revokeOthers?, deleteAccount?, signOut? }">

`<SecuritySettings>` copy; `title` is the shipped security page's heading and document title.

</field>

<field name="labels.history" type="{ title?, invoice?, empty?, loading?, newer?, older? }">

`<BillingHistory>` — past charges and their invoice links.

</field>

<field name="labels.usage" type="{ title?, units?, empty?, loading?, newer?, older? }">

`<UsageHistory>` — metered consumption. `units` is a template (`{units}`).

</field>

<field name="labels.credits" type="{ low?, topUp?, dismiss? }">

`<CreditsLowBanner>`. `low` is a template (`{balance}`).

</field>
</field-group>

The three templates' defaults: `pricing.trial` is `'{count}-{interval} free trial'`, `usage.units` is `'{units} credits'`, and `credits.low` is `'{balance} credits left.'`.

Read it from your own components with the auto-imported `useBackendConfig()`.


## Sitemap

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