@indiegateway/vue

@indiegateway/vue

Vue 3 paywall for IndieGateway (native-crypto). Uses @indiegateway/client — talks only to your billing BFF.

Merchant guide: Getting Started · Frontend

<script setup lang="ts">
import { ref } from 'vue';
import { IndiePaywall } from '@indiegateway/vue';
import '@indiegateway/vue/style.css';
import { indieGatewayClient } from '@indiegateway/client';

const api = indieGatewayClient.createBillingApi({
  request: async ({ method, path, body }) =>
    fetch(`${import.meta.env.VITE_API_URL}${path}`, {
      method,
      credentials: 'include',
      headers: {
        Accept: 'application/json',
        ...(body !== undefined ? { 'Content-Type': 'application/json' } : {}),
      },
      body: body !== undefined ? JSON.stringify(body) : undefined,
    }),
});

const open = ref(false);
</script>

<template>
  <IndiePaywall
    :api="api"
    :get-user-id="() => userId"
    :open="open"
    :overlay="true"
    :theme="{ accent: '#ea580c' }"
    :get-benefits="(plan) => [`Plan ${plan.name}`]"
    @paid="refreshMe"
    @claimed="refreshMe"
    @close="open = false"
  />
</template>

Trial UI: return trial from GET …/billing/payment-status (evaluateUserTrialStatus). Gift length comes from public-config.trial_policy (and plan name from gift_plan_key). Claim defaults to api.claimTrial(); @claimed fires after it succeeds. Optional :reason overrides checkout reason.

Built-in modal shell is always on. :overlay="true" (default) adds dim + blur; :overlay="false" keeps the modal without backdrop. Use :embedded="true" when you wrap the panel in your own modal.

Customize

Product-specific UX (usage-limit copy, upgrade-block reasons) stays in your app via props/slots.