vercel integration docs

app/components/IntegrationsList.vue

@@ -18,6 +18,12 @@ const integrations = [
 		to: '/guides/integrations/zapier',
 		logo: '/docs/img/zapier.png',
 	},
+	{
+		title: 'Vercel',
+		description: 'Connect Directus with Vercel to trigger deployments and monitor build status.',
+		to: '/guides/integrations/vercel',
+		logo: '/docs/img/vercel.webp',
+	},
 ];
 </script>
 

content/guides/11.integrations/4.vercel/.navigation.yml

@@ -0,0 +1,2 @@
+title: Vercel
+headline: Vercel

content/guides/11.integrations/4.vercel/0.index.md

@@ -0,0 +1,69 @@
+---
+id: vercel-integration
+title: Integration
+description: Connect Directus with Vercel to trigger deployments, monitor build status, and manage your frontend projects directly from your Directus instance.
+technologies:
+  - vercel
+---
+
+Connect your Directus instance with Vercel to centrally manage deployments, monitor build status, and control multiple frontend projects — all without leaving Directus.
+
+
+::callout{icon="heroicons-outline:rocket-launch"}
+**Quick Start**
+1. **Enable Deployment module**: Enable the Deployment module from your Directus project settings
+2. **Connect your Vercel account**: Navigate to the Deployment module and add your Vercel API token
+3. **Add projects**: Connect one or more Vercel projects to your Directus instance
+4. **Start deploying**: Trigger builds and monitor deployment status from Directus
+::
+
+## Getting Started
+
+### Connect Your Vercel Account
+
+1. In Directus, navigate to **Settings**
+2. From the **Modules** section, enable the **Deployment** module
+3. Navigate to the Deployment module now shown in the **primary navigation**  
+4. Select **Configure Vercel** to begin the integration
+   - **Personal Access Token**: Your Vercel API [access token](https://vercel.com/kb/guide/how-do-i-use-a-vercel-api-access-token)
+   - **Team ID (optional)**: Add your [Team ID](https://vercel.com/docs/accounts#find-your-team-id) if you want to deploy team projects rather than personal projects
+5. Click **Save** to establish the connection and begin adding projects
+
+![Vercel configuration token](/img/vercel-configuration-1.png)
+
+### Configure Projects
+
+1. From the **Vercel Configuration** screen, select **which Vercel projects** you want to manage from Directus
+2. Click **Save** to add the projects to the integration
+3. You can return to the Vercel integration settings at any time to add or remove projects
+
+::callout{icon="material-symbols:warning" color="warning"}
+**Removing Projects**
+<br>
+Removing a project from the Vercel integration will also permanently delete all deployment history for that project from Directus. This action cannot be undone.
+::
+
+![Vercel configuration projects](/img/vercel-configuration-2.png)
+
+### View Your Projects
+
+Once configured, your connected Vercel projects will be listed in the Deployment module. From here you can:
+- View all connected projects at a glance
+- Access deployment controls for each project
+- Monitor deployment status and history
+
+::callout{icon="material-symbols:info-outline"}
+**Permissions**
+<br>
+**Admin Access Required (For Now)**
+<br>
+Currently, only admin users can trigger deployments and manage Vercel projects. Role-based permissions will be available in an upcoming release, allowing you to grant deployment access to specific users and roles.
+::
+
+![Vercel configuration projects](/img/vercel-configuration-3.png)
+
+## Documentation
+
+**[Working with Deployments →](/guides/integrations/vercel/deployments)**
+
+Trigger deployments, monitor build status, and manage your frontend projects directly from your Directus instance.

content/guides/11.integrations/4.vercel/deployments.md

@@ -0,0 +1,103 @@
+---
+id: vercel-deployments
+title: Deployments
+description: Complete guide for triggering deployments, monitoring build status, and viewing logs for your Vercel projects from Directus.
+technologies:
+  - vercel
+---
+
+Once you've connected your Vercel account and configured your projects, you can manage all deployment activities directly from Directus. 
+
+You should trigger deployments after publishing content changes that affect your frontend.
+
+**[← Back to Vercel Integration](/guides/integrations/vercel)**
+
+## Triggering Deployments
+
+Trigger new deployments for any connected Vercel project:
+
+1. Navigate to the **Deployment** module
+2. Click on the **Vercel** provider
+3. Select the project you want to deploy
+4. Click the **Deploy** button in the top right
+5. Vercel will begin building and deploying your project
+
+Each deployment is tracked in Directus with the associated deployment metadata.
+
+![Vercel integration overview](/img/vercel-integration-1.png)
+
+## Monitoring Deployment Status
+
+::callout{icon="material-symbols:info-outline"}
+**Only deployments triggered from Directus appear in this interface**. Deployments made directly in Vercel will not be shown.
+::
+
+Track the status of your deployments in the deployment list screen. The list shows:
+
+- **Deployment ID**: Vercel identifier for each build
+- **Status**: Current deployment state
+  - `BUILDING`: The deployment is currently being built
+  - `READY`: The project is successfully built, deployed, and live
+  - `CANCELED`: The deployment was canceled before completion
+  - `ERROR`: The deployment failed during the build or runtime phase
+- **Target**: Environment (production, preview, etc.)
+- **Started**: When the deployment began
+- **Duration**: How long the build took
+- **Author**: Who triggered the deployment
+
+## Viewing Build Logs
+
+Access detailed build logs for any deployment:
+
+1. Click on any deployment from the project list
+2. View the complete build output, including:
+   - Build steps and timing
+   - Static/SSG/dynamic rendering information
+   - Build cache creation and upload
+   - Error messages (if applicable)
+3. Use the **search** function to find specific log entries
+4. Filter by **log level** (All, Stdout, Stderr) to narrow results
+
+Build logs help you troubleshoot deployment issues and understand your build process.
+
+![Vercel integration build logs](/img/vercel-integration-2.png)
+
+## Exporting Logs
+
+Download deployment logs for documentation or troubleshooting:
+
+1. Open the deployment details view
+2. Click the **Download** icon in the top right
+3. Logs are exported as a text file with associated timestamps
+
+![Vercel integration export logs](/img/vercel-integration-3.png)
+
+
+## Visiting Deployed Sites
+
+Quickly access your live deployments:
+
+1. From the deployment details view, click the **Visit** button
+2. Your deployed site opens in a new tab
+
+![Vercel integration export logs](/img/vercel-integration-4.png)
+
+## Best Practices
+
+**Deployment Workflow**
+- Trigger deployments after publishing content changes that affect your frontend
+- Monitor the first few deployments after setup to ensure builds complete successfully
+- Keep build logs for failed deployments to troubleshoot issues
+
+**Performance Tips**
+- Build times shown in the deployment list help you track build performance over time
+- Vercel's build cache can help improve subsequent deployment speeds
+
+**Troubleshooting**
+- If a deployment fails, check the build logs for specific error messages
+- Verify your Vercel project configuration and build settings
+- Ensure your Personal Access Token has the necessary permissions
+
+## Next Steps
+
+- **[← Back to Integration](/guides/integrations/vercel)** Return to the integration overview