Scripts

Lemon Squeezy

Copy for LLMs

Lemon Squeezy is a popular payment gateway that allows you to accept payments online.

Nuxt Scripts provides a useScriptLemonSqueezy() composable and a headless Facade Component <ScriptLemonSqueezy> component to interact with lemon squeezy.

Lemon Squeezy

View source

Nuxt Config Setup

The simplest way to load Lemon Squeezy globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptLemonSqueezy composable. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      lemonSqueezy: true
    }
  }
})

useScriptLemonSqueezy()

The useScriptLemonSqueezy composable lets you have fine-grain control over when and how Lemon Squeezy is loaded on your site. 

const { proxy } = useScriptLemonSqueezy()

proxy.LemonSqueezy.Setup({ eventHandler })

Please follow the Registry Scripts guide to learn more about advanced usage.

First-Party Mode

This script supports First-Party Mode which is auto-enabled, routing all traffic through your domain for improved privacy and ad blocker bypass. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      lemonSqueezy: true
    }
  }
})

Example

Using Lemon Squeezy only in production while using the proxy to send events. 

<script setup lang="ts">
const { proxy } = useScriptLemonSqueezy()

// noop in development, ssr
// just works in production, client
function handleAction() {
  proxy.LemonSqueezy.Setup({ eventHandler })
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

<ScriptLemonSqueezy>

The <ScriptLemonSqueezy> component is headless Facade Component wrapping the useScriptLemonSqueezy() composable, providing a simple, performance optimized way to load Lemon Squeezy in your Nuxt app.

<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.

Demo

Lemon Squeezy is not loaded
It loads in when the DOM element is within the viewport.

Component API

See the Facade Component 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.

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()

The useScriptLemonSqueezy() 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.

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

Please follow the Registry Scripts guide to learn more about advanced usage.

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 }

Example

Using the Lemon Squeezy SDK with a payment link.

<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>
Edit this page
Markdown For LLMs

Intercom

Use Intercom in your Nuxt app.

Matomo Analytics

Use Matomo Analytics in your Nuxt app.