> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibehub.co.in/llms.txt
> Use this file to discover all available pages before exploring further.

# Connecting Vercel

> Set up Vercel deployment for your VibeHub projects

## Overview

Vercel is the platform behind Next.js, optimized for frontend frameworks and full-stack applications. Connect your Vercel account to deploy directly from VibeHub.

## Prerequisites

Before connecting:

* A [Vercel account](https://vercel.com) (free tier works)
* Owner access to your VibeHub project

## Connecting Your Vercel Account

<Steps>
  <Step title="Open VibeHub Settings">
    Click your profile icon and go to **Settings**
  </Step>

  <Step title="Find Connected Platforms">
    Scroll to the **Connected Platforms** section
  </Step>

  <Step title="Click Connect for Vercel">
    Click the **Connect** button next to Vercel
  </Step>

  <Step title="Authorize in Vercel">
    You'll be redirected to Vercel. Log in and authorize VibeHub to access your account.
  </Step>

  <Step title="Return to VibeHub">
    After authorization, you'll be redirected back. Vercel is now connected!
  </Step>
</Steps>

<Tip>
  You only need to connect Vercel once. After that, you can use it for any project.
</Tip>

## Configuring a Project for Vercel

After connecting your account, configure each project:

<Steps>
  <Step title="Open Project Settings">
    Go to your project and click the **Settings** tab
  </Step>

  <Step title="Find Deployment Section">
    Scroll to the **Deployment** section
  </Step>

  <Step title="Select Vercel">
    Choose Vercel as your deployment platform
  </Step>

  <Step title="Choose a Project">
    Select an existing Vercel project or create a new one
  </Step>

  <Step title="Save Configuration">
    Click **Save** to store your deployment settings
  </Step>
</Steps>

## Creating a New Vercel Project

If you don't have an existing project:

1. In the project selection, click **Create New Project**
2. Enter a name for your project
3. Click **Create**
4. The new project is automatically selected

Your site will be available at `your-project.vercel.app`.

## Deploying to Vercel

Once configured, deploying is simple:

1. Go to your project dashboard
2. Click the **Deploy** button
3. Watch the deployment progress
4. Click the URL to view your live site

## Framework Detection

Vercel automatically detects common frameworks:

| Framework   | Auto-Detected |
| ----------- | ------------- |
| Next.js     | Yes           |
| React (CRA) | Yes           |
| Vue.js      | Yes           |
| Nuxt        | Yes           |
| Svelte      | Yes           |
| Static HTML | Yes           |

<Note>
  Vercel's build system automatically configures settings for detected frameworks. For custom setups, configure build settings in the Vercel dashboard.
</Note>

## Deployment Settings

| Setting              | Description                              |
| -------------------- | ---------------------------------------- |
| **Project**          | Which Vercel project to deploy to        |
| **Build Command**    | Override the auto-detected build command |
| **Output Directory** | Override the auto-detected output folder |

## Viewing Deployment Status

After deploying, you'll see:

* **Status** - Building, Deploying, Ready, or Error
* **URL** - Link to your deployed site
* **Deploy Time** - When the deployment completed

## Vercel Features Available

When deploying via VibeHub, you get access to:

* **Preview URLs** - Unique URLs for each deployment
* **Edge Network** - Global CDN for fast delivery
* **Serverless Functions** - API routes work automatically
* **Environment Variables** - Configure in Vercel dashboard

## Troubleshooting

### Authorization Failed

If the OAuth flow fails:

1. Make sure you're logged into Vercel
2. Clear your browser cookies
3. Try connecting again

### Deployment Failed

If a deployment fails:

1. Check the Vercel dashboard for build logs
2. Verify your framework is supported
3. Check for missing dependencies
4. Review environment variables

### Project Not Appearing

If your Vercel projects don't show up:

1. Verify Vercel is connected in Settings
2. Check that you have projects in your Vercel account
3. Ensure you authorized the correct Vercel team/account
4. Try disconnecting and reconnecting

## Disconnecting Vercel

To disconnect your Vercel account:

1. Go to VibeHub **Settings**
2. Find **Connected Platforms**
3. Click **Disconnect** next to Vercel

<Warning>
  Disconnecting won't delete your Vercel projects or deployments, but you won't be able to deploy from VibeHub until you reconnect.
</Warning>

## Next Steps

<CardGroup cols={2}>
  <Card title="Deploy Your Project" icon="rocket" href="/deployment/deploying-projects">
    Learn the deployment workflow
  </Card>

  <Card title="Connect Netlify" icon="n" href="/deployment/connecting-netlify">
    Set up an alternative platform
  </Card>
</CardGroup>