---
title: "Lemon Squeezy"
description: "Use Lemon Squeezy in your Nuxt app."
canonical_url: "https://scripts.nuxt.com/scripts/lemon-squeezy"
last_updated: "2026-05-03T02:50:04.023Z"
---

[Lemon Squeezy](https://www.lemonsqueezy.com/) is a popular payment gateway that allows you to accept payments online.

Nuxt Scripts provides a [`useScriptLemonSqueezy()`](#usescriptlemonsqueezy) composable and a headless Facade Component [`<ScriptLemonSqueezy>`](#scriptlemonsqueezy) component to interact with lemon squeezy.

<script-stats>



</script-stats>

<script-docs>



</script-docs>

## [`<ScriptLemonSqueezy>`](/scripts/lemon-squeezy)

The [`<ScriptLemonSqueezy>`](/scripts/lemon-squeezy) component is headless [Facade Component](/docs/guides/facade-components) wrapping the [`useScriptLemonSqueezy()`](/scripts/lemon-squeezy) composable, providing a simple, performance optimized way to load Lemon Squeezy in your Nuxt app.

```vue
<template>
  <ScriptLemonSqueezy>
    <NuxtLink href="https://harlantest.lemonsqueezy.com/buy/52a40427-36d2-4450-a514-ae80d9e1a333?embed=1">
      Buy me - $9.99
    </NuxtLink>
  </ScriptLemonSqueezy>
</template>
```

It works by injecting a `.lemonsqueezy-button` class onto any `a` tags within the component then loading in
the Lemon Squeezy script with the `visibility` [Element Event Trigger](/docs/guides/script-triggers#element-event-triggers).

### Demo

<code-group>
<lemon-squeezy-demo label="Output">



</lemon-squeezy-demo>

```vue [Input]
<script lang="ts" setup>
const ready = ref(false)
const events = ref([])
</script>

<template>
  <div class="not-prose w-full">
    <div class="flex items-center justify-center p-5">
      <ScriptLemonSqueezy @lemon-squeezy-event="e => events.push(e)" @ready="ready = true">
        <UButton to="https://harlantest.lemonsqueezy.com/buy/52a40427-36d2-4450-a514-ae80d9e1a333?embed=1" class="block mb-3">
          Buy me - $9.99
        </UButton>
        <UButton to="https://harlantest.lemonsqueezy.com/buy/76bbfa74-a81a-4111-8449-4f5ad564ed76?embed=1" class="block">
          Buy me - pay what you want
        </UButton>
      </ScriptLemonSqueezy>
    </div>
    <div>
      <UAlert v-if="!ready" class="mb-5" size="sm" color="blue" variant="soft" title="Lemon Squeezy is not loaded" description="It loads in when the DOM element is within the viewport." />
      <UAlert v-else color="green" variant="soft" title="Lemon Squeezy is loaded">
        <template #description>
          <div class="mb-2">
            Buttons are live and will open the modal, tracking events:
          </div>
          <div v-for="(event, index) in events" :key="index" class="text-xs">
            {{ event.event }}
          </div>
        </template>
      </UAlert>
    </div>
  </div>
</template>
```

</code-group>

### Component API

See the [Facade Component API](/docs/guides/facade-components#facade-components-api) for full props, events, and slots.

### Events

*lemon-squeezy-event*

Events emitted by the Lemon.js script are forwarded through this event. The payload is an object with an `event` key and a `data` key.

```ts
export type LemonSqueezyEventPayload = { event: 'Checkout.Success', data: Record<string, any> }
  & { event: 'Checkout.ViewCart', data: Record<string, any> }
  & { event: 'GA.ViewCart', data: Record<string, any> }
  & { event: 'PaymentMethodUpdate.Mounted' }
  & { event: 'PaymentMethodUpdate.Closed' }
  & { event: 'PaymentMethodUpdate.Updated' }
  & { event: string }
```

## [`useScriptLemonSqueezy()`](/scripts/lemon-squeezy)

The [`useScriptLemonSqueezy()`](/scripts/lemon-squeezy) composable lets you have fine-grain control over the Lemon Squeezy SDK. It provides a way to load the Lemon Squeezy SDK and interact with it programmatically.

```ts
export function useScriptLemonSqueezy<T extends LemonSqueezyApi>(_options?: LemonSqueezyInput) {}
```

Please follow the [Registry Scripts](/docs/guides/registry-scripts) guide to learn more about advanced usage.

<script-types>



</script-types>

## Example

Using the Lemon Squeezy SDK with a payment link.

```vue
<script setup lang="ts">
const { proxy } = useScriptLemonSqueezy()
onMounted(() => {
  proxy.Setup()
})
</script>

<template>
  <a href="https://harlantest.lemonsqueezy.com/buy/52a40427-36d2-4450-a514-ae80d9e1a333?embed=1" class="lemonsqueezy-button">Buy now</a>
</template>
```