How to Integrate Lovable with Vimeo

Navigate to developer.vimeo.com in your browser. Click 'Create an app' and fill in the app name (e.g., 'My Lovable Portfolio'), description, and your app's URL. For the redirect URI, enter your deployed Lovable app URL — for example, https://your-app.lovable.app/auth/vimeo/callback. Click 'Create app'. Once created, you will see your app's dashboard with the Client Identifier and Client Secret. Scroll down to the 'Personal Access Tokens' section. Click 'Generate a personal access token'. Select the scopes your app needs: 'public' for reading public video data, 'private' for accessing private videos, 'video_files' for getting download links, and 'create' for uploading new videos. Click 'Generate' and copy the token immediately — it is only shown once. For apps where end users log in with their own Vimeo accounts to manage their own videos, you will need to implement the full OAuth2 authorization code flow. But for the most common Lovable use case — a developer building a portfolio or client platform using their own Vimeo account — the personal access token is simpler and sufficient. The token does not expire unless you revoke it manually. Note your API rate limits: Vimeo Basic accounts are limited to 250 API requests per hour. Vimeo Pro and above have higher limits. For production apps with many users, cache API responses in Supabase to stay well within limits.

Open your Lovable project and click the '+' icon at the top of the editor next to the Preview label to open the Cloud panel. Click the Secrets tab, then 'Add new secret'. Add the following secrets: - Name: VIMEO_ACCESS_TOKEN — Value: your personal access token from Step 1 - Name: VIMEO_CLIENT_ID — Value: your Client Identifier - Name: VIMEO_CLIENT_SECRET — Value: your Client Secret These three secrets give your Edge Function full ability to authenticate with the Vimeo API and, if needed, generate new tokens using the OAuth2 flow. The VIMEO_ACCESS_TOKEN is the primary credential used for API calls. The CLIENT_ID and CLIENT_SECRET are stored for use in any token refresh or OAuth2 authorization code flows you implement later. Vimeo access tokens are long-lived (they do not expire on a schedule) but can be revoked at any time from the Vimeo developer portal. Lovable's security system blocks approximately 1,200 hardcoded API keys per day, but the correct approach is to always use the Secrets panel — never paste tokens into Lovable's chat or into source code. Verify the secrets appear in the panel with masked values before proceeding. The exact secret names used here must match the Deno.env.get() calls in the Edge Function exactly — a typo in either place causes a runtime error that is easy to miss until you test the function.

Create an Edge Function that proxies requests to Vimeo's REST API. The function accepts a Vimeo API path (like /me/videos or /videos/123456) and optional query parameters from the frontend, forwards the request to https://api.vimeo.com with your OAuth token, and returns the JSON response. In Lovable's chat, paste the prompt below to generate and deploy the function. After Lovable creates it, navigate to Cloud → Edge Functions to confirm it appears. The function URL will be https://[your-project-ref].supabase.co/functions/v1/vimeo-api. The Edge Function in the code block below handles both GET requests (for fetching video lists, showcase details, and analytics) and POST requests (for creating new videos or updating metadata). It reads the API path from the request URL's query string — the frontend calls /vimeo-api?path=/me/videos, and the function appends that path to the Vimeo base URL.

1// supabase/functions/vimeo-api/index.ts
2const VIMEO_BASE_URL = 'https://api.vimeo.com';
3
4Deno.serve(async (req) => {
5  if (req.method === 'OPTIONS') {
6    return new Response(null, {
7      headers: {
8        'Access-Control-Allow-Origin': '*',
9        'Access-Control-Allow-Methods': 'GET, POST, PATCH, DELETE, OPTIONS',
10        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
11      },
12    });
13  }
14
15  const accessToken = Deno.env.get('VIMEO_ACCESS_TOKEN');
16  if (!accessToken) {
17    return new Response(JSON.stringify({ error: 'Vimeo access token not configured' }), {
18      status: 500,
19      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
20    });
21  }
22
23  const url = new URL(req.url);
24  const apiPath = url.searchParams.get('path') || '/me/videos';
25  const queryString = url.searchParams.get('query') || '';
26  const vimeoUrl = `${VIMEO_BASE_URL}${apiPath}${queryString ? '?' + queryString : ''}`;
27
28  const requestInit: RequestInit = {
29    method: req.method,
30    headers: {
31      'Authorization': `bearer ${accessToken}`,
32      'Content-Type': 'application/json',
33      'Accept': 'application/vnd.vimeo.*+json;version=3.4',
34    },
35  };
36
37  if (req.method === 'POST' || req.method === 'PATCH') {
38    requestInit.body = await req.text();
39  }
40
41  const vimeoResponse = await fetch(vimeoUrl, requestInit);
42  const data = await vimeoResponse.json();
43
44  return new Response(JSON.stringify(data), {
45    status: vimeoResponse.status,
46    headers: {
47      'Content-Type': 'application/json',
48      'Access-Control-Allow-Origin': '*',
49    },
50  });
51});

Video embedding in React does not require any server-side calls — the Vimeo Player SDK loads directly in the browser and communicates with Vimeo's CDN. You can embed a video by ID, by URL, or by fetching an oEmbed URL from Vimeo's public oEmbed endpoint. Ask Lovable to install the @vimeo/player npm package and create a reusable VideoPlayer component. This component accepts a Vimeo video ID or URL as a prop, initializes the Vimeo Player in a div ref, and exposes player events (play, pause, ended, timeupdate) via callbacks. The Player SDK is particularly powerful for course platforms because it lets you track exactly how much of each video a user has watched. Listen to the 'timeupdate' event to record progress, and the 'ended' event to mark a lesson as complete. Store these events in Supabase so users can resume where they left off across devices. For domain-restricted videos (Vimeo's 'Only on my domain' privacy setting), the player will automatically block playback on unauthorized domains. Set your deployed app domain in the Vimeo video settings under Privacy → Embed → Specific domains. Test on your deployed URL rather than the Lovable preview, as the preview runs on a different domain that will not be on your allowlist.

1// src/components/VimeoPlayer.tsx
2import { useEffect, useRef } from 'react';
3import Player from '@vimeo/player';
4
5interface VimeoPlayerProps {
6  videoId: string;
7  onEnded?: () => void;
8  onProgress?: (data: { seconds: number; percent: number }) => void;
9  className?: string;
10}
11
12export function VimeoPlayer({ videoId, onEnded, onProgress, className }: VimeoPlayerProps) {
13  const containerRef = useRef<HTMLDivElement>(null);
14  const playerRef = useRef<Player | null>(null);
15
16  useEffect(() => {
17    if (!containerRef.current) return;
18
19    const player = new Player(containerRef.current, {
20      id: parseInt(videoId, 10),
21      responsive: true,
22      dnt: false,
23    });
24
25    playerRef.current = player;
26
27    if (onEnded) {
28      player.on('ended', onEnded);
29    }
30
31    if (onProgress) {
32      player.on('timeupdate', (data) => {
33        onProgress({ seconds: data.seconds, percent: data.percent });
34      });
35    }
36
37    return () => {
38      player.destroy();
39    };
40  }, [videoId]);
41
42  return (
43    <div
44      ref={containerRef}
45      className={`aspect-video rounded-lg overflow-hidden shadow-md ${className || ''}`}
46    />
47  );
48}

For uploading video files to Vimeo, the standard approach of posting directly to an API endpoint does not work well for large files — it times out and fails without any progress reporting. Vimeo supports the tus upload protocol, which enables resumable uploads that automatically recover from network interruptions. For a 500 MB video file, this is the difference between a reliable upload and a frustrating experience. The upload flow has two steps: first, create an upload slot on Vimeo via the API (which returns an upload URL), then upload the file directly from the browser to that URL using the tus client. The first step (creating the upload slot) requires your OAuth token, so it goes through the Edge Function. The second step (the actual file transfer) goes directly from the browser to Vimeo's upload CDN using the upload URL returned in step one — no token required at this stage. Ask Lovable to install the tus-js-client npm package and create an upload component. The component should show a file picker, a progress bar, and handle errors gracefully. After the upload completes, poll the Vimeo API (via your Edge Function) for the video's transcode status until it becomes available, then store the video ID in Supabase. For complex enterprise upload workflows with chunked uploads, retry logic, and multi-user queuing, RapidDev's team can help design the full architecture including Supabase queuing tables and Edge Function orchestration.