Pages & opt-outs
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.
Components
XBBillingGate plus the XB* container components (SubscriptionCard, PricingGrid, InvoiceHistory) of nuxt-x-billing — all driven by useBilling() state.
Backend requirements
The consumer backend contract for nuxt-x-billing — envelope, data types, read endpoints, Stripe session endpoints, webhook sync, tenancy, and entitlements.
