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
    :use-secure="true"
    signature-url="/api/media/v1/upload/sign"
    :tags="['hero', 'banner']"
    @success="onUploadSuccess"
  />
</template>

Props

Prop	Type	Default	Description
`apiKey`	`string`	`undefined`	Optional if using `signatureUrl` or `customUploadEndpoint`. Your PichaFlow Secret Key (`sk_live_...`). Note: Exposing your secret key on the frontend is insecure; use `signatureUrl` instead.
`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). Must return a JSON object with `signature`, `timestamp`, `tenantId`, `directory`, `maxSize`, and `allowedTypes`.
`customUploadEndpoint`	`string`	`undefined`	A complete URL to a proxy endpoint for upload bypassing PichaFlow Edge Engine completely.
`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.

!CAUTIONAuthentication Check Required: You must secure your backend signatureUrl endpoint with appropriate session or token authentication middleware. If this route is left public and unauthenticated, any user or bot can request valid signatures to upload files directly to your account, risking billing spikes or bucket abuse.

!NOTESignature Response Contract: Your signatureUrl endpoint must return a JSON body with the following fields. The component uses all of them to construct the five X-Picha-* headers sent to the Edge Engine:
{
  "signature":    "<hmac-sha256-hex>",
  "timestamp":    1234567890000,
  "tenantId":     "pf_prj_...",
  "directory":    "products/summer/",
  "maxSize":      "5242880",
  "allowedTypes": "image/webp,image/jpeg"
}
See HTTP API → Client-Side Upload Signatures for the full HMAC construction guide.

Nuxt Image Integration

The @pichaflow/nuxt module automatically registers the pichaflow provider for Nuxt's official image module (@nuxt/image). This allows you to render optimized images with zero configuration.

Setup

Make sure @nuxt/image is added to your nuxt.config.ts modules:

export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
    '@pichaflow/nuxt'
  ],
  pichaflow: {
    baseURL: 'https://cdn.pichaflow.com' // Optional: Custom CDN base URL
  }
})

Usage

Render images using the <NuxtImg> component with provider="pichaflow":

<template>
  <!-- Basic optimization -->
  <NuxtImg
    provider="pichaflow"
    src="/user/avatar.png"
    width="400"
    height="300"
    format="webp"
    quality="80"
  />

  <!-- With advanced custom PichaFlow modifiers (crop, preset, chroma keying) -->
  <NuxtImg
    provider="pichaflow"
    src="/assets/banner.png"
    width="1200"
    height="400"
    :modifiers="{
      crop: 'center',
      preset: 'high-contrast',
      ck: '#00ff00:50:10'
    }"
  />
</template>

Edit this pageorReport an issue

Svelte

Integrate PichaFlow into your Svelte and SvelteKit applications with ease.