> ## Documentation Index
> Fetch the complete documentation index at: https://commet.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrar con Nuxt

> Agrega cobros y pagos a tu aplicación de Nuxt.

Instala la Commet Skill para que tu agente integre el SDK actual y valide su trabajo contra el contrato vivo de la API.

```bash theme={null}
npx skills add commet-labs/skills --skill commet
```

<Steps>
  <Step title="Instalar">
    <Tabs>
      <Tab title="pnpm">
        ```bash theme={null}
        pnpm add @commet/node
        ```
      </Tab>

      <Tab title="npm">
        ```bash theme={null}
        npm install @commet/node
        ```
      </Tab>

      <Tab title="yarn">
        ```bash theme={null}
        yarn add @commet/node
        ```
      </Tab>

      <Tab title="bun">
        ```bash theme={null}
        bun add @commet/node
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configurar">
    ```bash title=".env" theme={null}
    COMMET_API_KEY=ck_sandbox_xxx
    ```

    ```typescript title="nuxt.config.ts" theme={null}
    export default defineNuxtConfig({
      runtimeConfig: {
        commetApiKey: process.env.COMMET_API_KEY,
      },
    })
    ```

    Nuxt importa automáticamente desde `server/utils/`, por lo que el cliente está disponible en todas las rutas del servidor.

    ```typescript title="server/utils/commet.ts" theme={null}
    import { Commet } from '@commet/node'

    const config = useRuntimeConfig()

    export const commet = new Commet({
      apiKey: config.commetApiKey,
    })
    ```
  </Step>

  <Step title="Suscribir">
    `customers.create` es idempotente — si ya existe un cliente con el mismo `id`, retorna el registro existente.

    ```typescript title="server/api/billing/subscribe.post.ts" theme={null}
    export default defineEventHandler(async (event) => {
      const { customerId, email } = await readBody(event)

      await commet.customers.create({ email, id: customerId })

      const subscription = await commet.subscriptions.create({
        customerId,
        planCode: 'pro',
      })

      return { checkoutUrl: subscription.checkoutUrl ?? null }
    })
    ```
  </Step>

  <Step title="Verificar Acceso">
    ```typescript title="server/api/billing/access/[customerId].get.ts" theme={null}
    export default defineEventHandler(async (event) => {
      const customerId = getRouterParam(event, 'customerId')!

      const subscription = await commet.subscriptions.getActive({ customerId })

      if (!subscription) {
        throw createError({ statusCode: 404, statusMessage: 'No active subscription' })
      }

      const feature = await commet.featureAccess.get({
        code: 'api_calls',
        customerId,
      })

      return {
        status: subscription.status,
        allowed: feature.allowed,
      }
    })
    ```
  </Step>

  <Step title="Trackear Uso">
    ```typescript title="server/api/billing/usage.post.ts" theme={null}
    export default defineEventHandler(async (event) => {
      const { customerId } = await readBody(event)

      await commet.usage.track({
        customerId,
        featureCode: 'api_calls',
        value: 1,
      })

      return { tracked: true }
    })
    ```

    El uso se agrega y se cobra al final del período.
  </Step>

  <Step title="Portal del Cliente">
    ```typescript title="server/api/billing/portal.get.ts" theme={null}
    export default defineEventHandler(async (event) => {
      const customerId = 'user_123'

      const portal = await commet.portal.getUrl({ customerId })

      return sendRedirect(event, portal.portalUrl)
    })
    ```
  </Step>
</Steps>

## Relacionado

* [Suscripciones](/docs/es/manage-subscriptions)
* [Trackear Uso](/docs/es/track-usage)
* [Portal del Cliente](/docs/es/customer-portal)
* [Referencia del SDK](/docs/es/sdk-reference)


## Related topics

- [Integrar con Flask](/docs/es/integrate-with-flask.md)
- [Integrar con Java](/docs/es/integrate-with-java.md)
- [Integrar con Django](/docs/es/integrate-with-django.md)
- [Integrar con Encore](/docs/es/integrate-with-encore.md)
- [Integrar con Laravel](/docs/es/integrate-with-laravel.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.