# Vue

> Tabler Payments for Vue offers payment provider logos as tree-shakable Vue 3 components, so you can use them the same way as any other Vue component.

Add Tabler payment provider logos to Vue apps with the official tree-shakable package. Render 100+ payment provider logos as components.

Source: https://docs.tabler.io/payments/libraries/vue

---

This is an alternative to the [CSS payments plugin](/payments/css) for Vue projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Vue component. This gives you type-checked props, no separate CSS file to load, and tree-shaking - a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.

This package is pre-1.0: the API may still change before a 1.0 release.

## Installation

```shell
npm install @tabler/payments-vue
yarn add @tabler/payments-vue
pnpm install @tabler/payments-vue
bun install @tabler/payments-vue
```

`vue` is a peer dependency - the package reuses the Vue 3 version already in your project instead of bundling its own.

## How to use

Every provider - Visa, Mastercard, PayPal, and so on - is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Vue component:

```vue
<script setup>
import { PaymentVisa } from '@tabler/payments-vue';
</script>

<template>
  <PaymentVisa variant="dark" :size="32" />
</template>
```

This works well when you know exactly which providers you want to show, and you write their names directly in your template - for example a fixed row of cards you accept.

### Rendering a provider by name at runtime

Sometimes the provider isn't known ahead of time in your template - for example, it's a string coming from an API response or a CMS field.

For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.

```vue
<script setup>
import { Payment } from '@tabler/payments-vue';
</script>

<template>
  <Payment provider="visa" variant="dark" :size="32" />
</template>
```

The slug is the component name without the `Payment` prefix, in kebab-case - for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.

If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing - useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).

## Props

Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and the dynamic `Payment` component accept the same set of props. Quick reference:

| name       | type                | default | required       |
| ---------- | ------------------- | ------- | -------------- |
| `variant`  | `'light' \| 'dark'` | `light` | no             |
| `size`     | `string \| number`  | `24`    | no             |
| `title`    | `string`            | -       | no             |
| `provider` | `string`            | -       | `Payment` only |

### `variant`

Every logo ships in two pre-baked color versions, `light` and `dark` - exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background - you choose explicitly:

```vue
<PaymentVisa variant="light" /> <!-- default, for light backgrounds -->
<PaymentVisa variant="dark" />  <!-- for dark backgrounds -->
```

### `size`

Sets the rendered SVG **height**, in pixels. The width is calculated for you from the provider's fixed 5:3 aspect ratio (`width = size * 1.66666`, rounded to 2 decimals), so a logo never looks stretched or squashed no matter what size you pick:

```vue
<PaymentVisa :size="24" /> <!-- 24px tall, 40px wide (the default) -->
<PaymentVisa :size="48" /> <!-- 48px tall, 80px wide -->
```

If you need a specific width instead - for example to fit a fixed-width column - pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:

```vue
<PaymentVisa :size="24" :width="64" /> <!-- 24px tall, but exactly 64px wide -->
```

### `title`

Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically - without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:

```vue
<PaymentVisa title="Visa" />
```

See the [Accessibility](/payments/css#accessibility) section on the CSS plugin page for concrete guidance on when a logo needs this and when it should stay `aria-hidden` instead.

### Everything else

Any other attribute you pass - `class`, `stroke-width`, `onClick`, and so on - is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element. This package keeps attributes **kebab-case** (`stroke-width`, not `strokeWidth`), matching how Vue and the DOM already write them:

```vue
<PaymentVisa class="rounded shadow-sm" @click="selectMethod('visa')" data-testid="visa-logo" />
```

### `provider` (dynamic `Payment` component only)

Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page - see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.

## Available providers

There are over 100 supported providers, each with a `Payment<ProviderName>` component. See the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list of provider names and slugs.