---
title: "Nuxt demo"
description: "Explore a Nuxt storefront built with the Inttegro TypeScript SDK."
canonical: "https://studio.inttegro.com/demos/nuxt"
format: inttegro-machine-docs/v1
language: "cURL"
reader_profile: optional
reader_manifest: "https://studio.inttegro.com/machine/curl/readers/index.json"
reader_identification: "Optional: declare your client only if known and your current-session capabilities; use reader_manifest for supplemental recommendations."
preamble_estimated_tokens: 366
model_token_report: "https://studio.inttegro.com/machine/token-report.json"
preamble_questions: 5
preamble_source: "general"
recommended_mcp_tools: []
estimated_tokens: 1142
token_estimate_method: "utf8_bytes_divided_by_4"
---

## Machine preamble

**Summary:** Explore a Nuxt storefront built with the Inttegro TypeScript SDK. This cURL representation preserves HTTP paths and JSON wire names.

### Five questions

#### Q1. When should the reader use Nuxt demo?

Use this demo guide to inspect a complete working integration and compare it with the application being built.

#### Q2. What is authoritative on this page?

The demo proves one working composition, not the only supported architecture. Follow its linked SDK and API pages for current contracts.

#### Q3. What page-specific constraint matters most?

Do not copy demo credentials, identifiers, or deployment assumptions. Recreate configuration through supported public setup paths.

#### Q4. Can Inttegro MCP materially help with this task?

No catalog ability is sufficiently specific to recommend for this page. Use the documentation directly; consult the MCP catalog only if the task later requires governed live account context or a supported operation.

#### Q5. How should the reader verify the answer and continue?

Open the hosted experience, trace the corresponding source, and verify that its SDK and API usage still matches the current linked documentation. Continue with [Read the Orders API](https://studio.inttegro.com/machine/curl/api/orders.md) and [Accept payment with Inttegro Checkout](https://studio.inttegro.com/machine/curl/guides/accept-payment-with-inttegro-checkout.md) when those concerns enter scope.

## Document content

# Nuxt demo

Build a Nuxt storefront with embedded, modal, and hosted Checkout. A Nitro
route creates the order and keeps the API key private.

> Demo Release is interactive content. Use the canonical page to view it.

## What you’ll build

- A [Nuxt 4](https://nuxt.com/docs/4.x/getting-started/installation) storefront
  with a [Nitro](https://nitro.build/guide) server route
- Typed order creation with the [Inttegro TypeScript SDK](https://studio.inttegro.com/machine/curl/sdks/typescript.md)
- Vue integration through [`@inttegro/vue`](https://studio.inttegro.com/machine/curl/web/vue.md)
- Server-only configuration and safe errors

## See the flow

The gallery shows one server-created order in each Checkout presentation. The
API key stays in private Nitro configuration.

> Demo Presentation Gallery is interactive content. Use the canonical page to view it.

## Run the demo

Install a supported [Node.js release](https://nodejs.org/en/about/previous-releases),
set the private environment values, and start Nuxt. The
[released README](https://github.com/inttegro/inttegro-demos/blob/nuxt-v1.8.3/nuxt/README.md)
has the exact commands.

## Key files

1. [`server/utils/checkout.ts`](https://github.com/inttegro/inttegro-demos/blob/nuxt-v1.8.3/nuxt/server/utils/checkout.ts)
   creates the order and maps safe errors.
2. [`server/routes/checkout.post.ts`](https://github.com/inttegro/inttegro-demos/blob/nuxt-v1.8.3/nuxt/server/routes/checkout.post.ts)
   validates the request and returns JSON or a `303` redirect.
3. [`plugins/inttegro-checkout.client.ts`](https://github.com/inttegro/inttegro-demos/blob/nuxt-v1.8.3/nuxt/plugins/inttegro-checkout.client.ts)
   manages the Vue Checkout surface.
4. [`public/checkout-presentations.js`](https://github.com/inttegro/inttegro-demos/blob/nuxt-v1.8.3/nuxt/public/checkout-presentations.js)
   coordinates the three Checkout modes.

## Before you ship

Keep the API key out of public Nuxt configuration. Store a durable order
mapping and verify payment before fulfillment.

## Next

- [Browse the released source](https://github.com/inttegro/inttegro-demos/tree/nuxt-v1.8.3/nuxt)
- [Accept payment with Inttegro Checkout](https://studio.inttegro.com/machine/curl/guides/accept-payment-with-inttegro-checkout.md)
- [Read the Orders API](https://studio.inttegro.com/machine/curl/api/orders.md)