Framework Components

Vue

Integrate PichaFlow into your Vue and Nuxt applications.

The @pichaflow/vue package provides a reactive upload component.

Usage

<script setup>
import { PichaUpload } from '@pichaflow/vue';

const onUploadSuccess = (response) => {
  console.log('Uploaded:', response.url);
};
</script>

<template>
  <PichaUpload
    api-key="pk_live_..."
    :use-secure="true"
    signature-url="/api/media/v1/upload/sign"
    :tags="['hero', 'banner']"
    @success="onUploadSuccess"
  />
</template>

Props

Prop	Type	Default	Description
`apiKey`	`string`	Required	Your PichaFlow Public Key (`pk_live_...`). Use Secret Key only in trusted backend apps.
`useSecure`	`boolean`	`false`	Enable the HMAC-SHA256 handshake flow for secure browser uploads.
`signatureUrl`	`string`	`undefined`	The endpoint on your backend that signs the upload request (Required if `useSecure` is true).
`baseUrl`	`string`	`https://api.pichaflow.com`	Optional API base URL.
`tags`	`string[]`	`[]`	Tags to apply to the upload.

Events

Event	Payload	Description
`success`	`UploadResponse`	Fired when upload completes successfully.
`error`	`any`	Fired on network or server errors.
`progress`	`number`	Fired during upload progress updates.

Edit this pageorReport an issue

Svelte

Integrate PichaFlow into your Svelte and SvelteKit applications with ease.