---
title: "Academy App"
canonical_url: "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit"
locale: en
meta:
"og:title": "Academy App"
---
[Go to home](https://academy.laioutr.com/en)
- [Apps](https://academy.laioutr.com/en/bereiche/apps)
- [Hosting, payment and tools](https://academy.laioutr.com/en/leitfaeden/hosting-payment-and-tools)
- [Vercel: deploy the storefront from Cockpit to Vercel](https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit)
# Vercel: deploy the storefront from Cockpit to Vercel
With the Vercel connection, Cockpit deploys the storefront directly into an existing Vercel project of the company. Project name, API token and team ID are stored under Hosting, Vercel; build and delivery run on Vercel.
## Before you start
- Plan
- Laioutr Commerce or Sites with self-managed hosting; company Vercel account
- Role
- Project role with access to the hosting settings
- Duration
- 10 min
### Prerequisites
- Vercel team and its team ID
- Vercel project with the Nuxt framework preset
- Vercel API token with deploy rights for the team
- Optional: Redis URL for a shared cache
Last reviewed on October 15, 2026
Deploys the Nuxt application generated by Cockpit into an existing company Vercel project. Vercel handles build and delivery; caching runs on Vercel or optionally on Redis.
[Developer documentation](https://docs.laioutr.com/hosting/hyperscaler/vercel-adapter)
## How it works
1. Find the team IDWhere: Vercel, Team Settings · Role: Developer · Duration: 2 min
2. Create a project with the Nuxt presetWhere: Vercel dashboard · Role: Developer · Duration: 5 min
3. Create an API token with deploy rightsWhere: Vercel, Tokens · Role: Developer · Duration: 3 min
4. Enter Project Name, Token, Team ID and optionally Redis URLWhere: Cockpit, Hosting, Vercel · Role: Developer · Duration: 5 min
5. Start a deploymentWhere: Cockpit, Deployments · Role: Developer · Duration: 2 min
6. Check build status and live URLWhere: Vercel dashboard · Role: Developer · Duration: 5 min
## Configuration
| Field | Purpose | Where to find it | Required | Per environment |
| --- | --- | --- | --- | --- |
| `Project Name` | Exact name (slug) of the Vercel project to deploy to. The project must already exist in the team. | Vercel dashboard, project overview | Yes | Yes |
| `Token` | Vercel API token with deploy rights for the team. Cockpit uses it only for deployments and reading project data. | Vercel, account or team settings, Tokens | Yes | Yes |
| `Team ID` | ID of the Vercel team or account that owns the project. | Vercel, Team Settings, General | Yes | Yes |
| `Redis URL` | Connection URL to Redis. If set, the application uses Redis instead of the Vercel runtime cache. | The company's own Redis service | No | Yes |
## Common errors
- The deployment fails immediately.
- **Cause:** Project Name does not match the slug, or the project belongs to a different team than the one in Team ID.
- **Fix:** Check slug and team ID in the Vercel dashboard and correct them in Hosting, Vercel.
- Vercel rejects access.
- **Cause:** The token has expired or has no deploy rights for the team.
- **Fix:** Create a new token with deploy rights and enter it in Cockpit.
- Cockpit reports success, but the live site is unchanged.
- **Cause:** The build is still running on Vercel or has failed there.
- **Fix:** Check build status and log in the Vercel dashboard.
- The build stops because of a wrong framework.
- **Cause:** The Vercel project is not set to Nuxt.
- **Fix:** Select the Nuxt framework preset in the Vercel project and redeploy.
The **Vercel** connection makes Vercel the hosting provider of a storefront. It is intended for teams that already run their own Vercel account. On deployment, Cockpit generates the complete Nuxt application with configuration, dependencies and app files and hands it to the Vercel project. Vercel rebuilds the application without build cache, so dependencies stay current, and delivers it.
Cockpit waits only briefly until Vercel has accepted the deployment and then reports success. The build continues on Vercel; status, build log and live URL are in the Vercel dashboard. Cancel, promote and rollback are also done in Vercel in this mode.
For caching, the application uses the Vercel runtime cache by default. With a Redis URL, Redis is used instead, for example for a shared cache across several instances. In addition, the Vercel Analytics and Vercel Speed Insights apps record visitor numbers and real-user loading times in the Vercel project.
## Step by step
1. 1 ### Step 1: Find the team ID
In Vercel, copy the team ID under **Team Settings**, **General**. Without a team, the personal account applies.
2. 2 ### Step 2: Create the Vercel project
Create a new project with the Nuxt **Framework Preset**, without a Git repository. Note the project name (slug).
3. 3 ### Step 3: Create an API token
Under **Tokens**, create a token with deploy rights for the team, for example named "Laioutr Cockpit".
4. 4 ### Step 4: Enter hosting in Cockpit
Open **Hosting**, **Vercel** in the project, enter **Project Name**, **Token** and **Team ID**, optionally **Redis URL**, and save.
5. 5 ### Step 5: Start a deployment
Start a deployment with **Deploy** under **Deployments**. Cockpit reports success as soon as Vercel has accepted the deployment.
6. 6 ### Step 6: Check the build in Vercel
Check the build status and live URL of the new deployment in the Vercel dashboard.
## Check the result
A new deployment of the project with the status "Ready" appears in the Vercel dashboard. The live URL shows the storefront with the content last published from Studio.
## Frequently asked questions
Why does Cockpit show no build log?
With a connection to a company Vercel account, Cockpit receives no status updates from Vercel. Build log and status are in the Vercel dashboard.
How is a deployment rolled back?
In this mode, in the Vercel dashboard. Rollback within seconds directly in Cockpit is available with Laioutr Cloud.
Does the Vercel project need a Git repository?
No. Cockpit hands the generated files directly to Vercel. The project only has to exist and be set to Nuxt.
When is a Redis URL worthwhile?
When several instances should share one cache, or when the team wants to control the cache setup itself. Otherwise the Vercel runtime cache is sufficient.
## Related
- [Start and check a deployment](https://academy.laioutr.com/en/artikel/start-and-check-a-deployment)5 min
A deployment rebuilds the storefront of an environment and puts changes to apps, versions and configuration live. It is started in Cockpit under Deployments with Deploy; the status and build log show whether it worked.
- [Understanding the main, dev and stage environments](https://academy.laioutr.com/en/artikel/understanding-main-dev-and-stage-environments)5 min
Every project starts with the main environment, which is the live storefront. Further environments such as stage or dev run beside it as separate copies with their own address, pages, apps and deployments until their work is promoted to main.
- [Hosting and edge delivery](https://academy.laioutr.com/en/artikel/hosting-and-edge-delivery)4 min
Laioutr Cloud is the built-in hosting for storefronts made with Laioutr and delivers them through a global edge network with more than 100 locations. Alternatively, a storefront runs through hyperscaler adapters, native hosting partners or on a self-managed server.
- [Compare and roll back deployments](https://academy.laioutr.com/en/artikel/compare-and-roll-back-deployments)5 min
Every deployment has its own address, so two versions can be compared side by side. A rollback puts an already built earlier production deployment live again within seconds, without a new build.
## [Hosting, payment and tools](https://academy.laioutr.com/en/leitfaeden/hosting-payment-and-tools)
Search this guide
1. [Vercel: deploy the storefront from Cockpit to Vercel](https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit)10 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#webpage",
"name": "Academy App",
"url": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Apps",
"item": "https://academy.laioutr.com/en/bereiche/apps",
"position": 2
},
{
"@type": "ListItem",
"name": "Hosting, payment and tools",
"item": "https://academy.laioutr.com/en/leitfaeden/hosting-payment-and-tools",
"position": 3
},
{
"@type": "ListItem",
"name": "Vercel: deploy the storefront from Cockpit to Vercel",
"item": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Why does Cockpit show no build log?",
"acceptedAnswer": {
"@type": "Answer",
"text": "With a connection to a company Vercel account, Cockpit receives no status updates from Vercel. Build log and status are in the Vercel dashboard.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "How is a deployment rolled back?",
"acceptedAnswer": {
"@type": "Answer",
"text": "In this mode, in the Vercel dashboard. Rollback within seconds directly in Cockpit is available with Laioutr Cloud.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Does the Vercel project need a Git repository?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Cockpit hands the generated files directly to Vercel. The project only has to exist and be set to Nuxt.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/vercel-deploy-the-storefront-from-cockpit#/schema/question/4",
"@type": "Question",
"inLanguage": "en",
"name": "When is a Redis URL worthwhile?",
"acceptedAnswer": {
"@type": "Answer",
"text": "When several instances should share one cache, or when the team wants to control the cache setup itself. Otherwise the Vercel runtime cache is sufficient.
"
}
}
]
}
```