X Enterprises
nuxt-x-billing

Pages & opt-outs

The default /billing and /billing/pricing pages shipped by nuxt-x-billing, and how to disable or replace them.

Pages & opt-outs

nuxt-x-billing ships two batteries-included default pages. Both run against your backend contract immediately — zero consumer code beyond the endpoints.

/billing

The account billing page: current subscription (XBSubscriptionCard), saved payment methods, and invoice history (XBInvoiceHistory). This is where checkout.successUrl and portal.returnUrl point by default, so the Stripe round-trips land back on a working page.

/billing/pricing

The plan grid (XBPricingGrid) with monthly/yearly toggle. Selecting a plan calls checkout() and redirects to the Stripe-hosted checkout session; checkout.cancelUrl defaults back here.

Opting out

Disable a default page via xBilling.pages.* — the route then renders a 404:

// app/app.config.ts
export default defineAppConfig({
  xBilling: {
    pages: {
      billing: true,
      pricing: false, // /billing/pricing → 404
    },
  },
})

To replace a page instead of disabling it, use Nuxt's standard page overriding: your own file at the same path (app/pages/billing/index.vue, app/pages/billing/pricing.vue) wins over the layer's.


AI Context

guide: pages-and-opt-outs
package: "@xenterprises/nuxt-x-billing"
use-when: >
  Customizing the billing routes. Defaults: /billing (subscription +
  payment methods + invoices) and /billing/pricing (plan grid →
  checkout). xBilling.pages.{billing,pricing}: false 404s the route;
  a consumer file at the same path replaces the layer's page.
Copyright © 2026