@wetransform/vue

Vue 3 wrapper around @wetransform/core with a composable API and a component.

Installation

npm install @wetransform/vue

Component usage

<script setup lang="ts">
import { ref } from 'vue'
import { WeTransformSdk, type WeTransformConfig, type SupportedLocales } from '@wetransform/vue'

const isSdkOpen = ref(false)
const locale = ref<SupportedLocales>('en')

const config: WeTransformConfig = {
  organizationHandle: 'acme',
  authentication: {
    customerId: 'customer-id',
    signature: 'signed-token',
  },
}

const onSuccessSubmit = ({ redirectUrl }: { redirectUrl: string }) => {
  window.location.href = redirectUrl
}
</script>

<template>
  <button type="button" @click="isSdkOpen = true">Open Sender</button>
  <button type="button" @click="locale = locale === 'en' ? 'fr' : 'en'">Toggle locale</button>

  <WeTransformSdk
    :config="config"
    v-model:open="isSdkOpen"
    :locale="locale"
    :autoOpen="false"
    @successSubmit="onSuccessSubmit"
  />
</template>

WeTransformSdk is renderless except for its internal mount container and does not expose slots.

Props:

• config (required): SDK configuration (excludes locale; use the locale prop instead)
• open (optional): controlled open state (for v-model:open)
• autoOpen (optional, default false): opens on mount
• locale (optional): active locale ('en' | 'fr'); reactive — changing this prop calls setLocale on the SDK

Emits:

• update:open
• open
• close
• destroy
• onReady
• successSubmit
• error

Composable usage

import { useWeTransform } from '@wetransform/vue'

const { open, close, destroy, setLocale, isOpen, weTransformInstance, on } = useWeTransform({
  organizationHandle: 'acme',
  authentication: {
    customerId: 'customer-id',
    signature: 'signed-token',
  },
})

on('successSubmit', ({ redirectUrl }) => {
  window.location.href = redirectUrl
})

await open()
await setLocale('fr')
await close()
await destroy()

console.log(isOpen.value)
console.log(weTransformInstance.value)

useWeTransform(config) returns:

• weTransformInstance: readonly Ref<WeTransformInstance | null>
• isOpen: readonly Ref<boolean>
• open(): opens the SDK
• close(): closes the SDK
• destroy(): destroys the SDK instance (idempotent)
• setLocale(locale): switches the locale ('en' | 'fr')
• on(event, handler): subscribes to SDK events and returns an unsubscribe function

Re-exports

@wetransform/vue also re-exports these symbols from @wetransform/core:

• createWeTransform
• WeTransformConfig
• WeTransformEventMap
• WeTransformInstance
• SupportedLocales

Notes

• Wrapper lifecycle behavior forwards to core and does not modify core semantics.
• config is used at instantiation time. For structural config changes, remount with a Vue :key.
• The component forces the SDK mountElement internally; do not pass mountElement in config.
• The locale prop (component) and setLocale (composable) can be called at any time, including before or while the SDK is open.