Deploying on Vercel
Overview
The SCAYLE Storefront Application can be efficiently built, deployed, and run on Vercel. This guide provides step-by-step instructions for leveraging Vercel's platform to host your Storefront Application, covering everything from initial setup and project creation to deployment and configuration management for optimal performance.
The following document outlines how to build, deploy and run your SCAYLE Storefront Application on Vercel.
Prerequisites
To deploy to Vercel, you will first need to create a Vercel account. To do so, head over to Vercel Signup.
Installing Vercel CLI
After creating your account, you will need to install the Vercel CLI on your local machine:
To learn more about the Vercel CLI, head over to the Vercel Docs.
Login on Your Local Machine
Before running any other command, you need to log in to Vercel on your local machine using the CLI:
This command will guide you through the authentication process.
Create a Vercel Project
To create or link to a Vercel project, run the following command from your Storefront Application's root directory:
This will guide you through the full setup process. The Vercel CLI will automatically detect that this is a Nuxt project and set appropriate project settings.
If you're working with a pre-existing Vercel project, this step remains the same.
When the CLI asks you Link to existing project?
, just answer Yes
and pick one of your existing projects.
Building the Application
The application should be built using the vercel
preset from Nitro. This can be set in your nuxt.config.ts
under nitro.preset
or by using a NITRO_PRESET
environment variable.
For example, to build for Vercel:
This will create a pre-built Vercel-optimized application in the .vercel
directory within your project.
Deploying the Application
To deploy the application, use the Vercel deploy command:
This command deploys the pre-built application. To deploy directly to production, rather than promoting an existing build, add the --prod
flag:
Configuration
Functions
When deploying a project to Vercel, your code will run as a serverless function. You can configure aspects such as where your serverless function runs (Function Region) and its allocated size.
For the best performance, you should select a Function Region which is closest to the majority of your users.
.jpeg)
Vercel Functions
To learn more about Vercel functions, head over to the Vercel Functions Docs.
Environment Variables
You can configure the environment variables for your application's runtime settings directly through the Vercel user interface.
To manage your environment configuration:
- Head over to Vercel and navigate to your project dashboard.
- In the toolbar, you should see a tab called Settings.
- When you are in the project Settings, select the Environment Variables entry in the left navigation.

Vercel Environment Configuration
For a quick start, you can upload your local .env
file as a starting point. After changing your environment variables, you should re-deploy your project to ensure it picks up your changes. To learn more about Vercel's environment variables, head to the Vercel Docs.
There might be a few adjustments needed for your application's configuration, most notably for storage. For this, we recommend using Vercel KV.
Using Vercel KV
Vercel KV is a serverless Redis storage that can be used as the backing storage for sessions and cache for your Storefront Application.
Application Configuration
First, configure your application to use vercelKV
as your storage driver. This happens automatically when you build for the vercel
Nitro preset. If you need to further customize it, you can do so through the storefront.storage
configuration in nuxt.config.ts
.
Storefront Storage Config
Create a New Vercel KV Storage
To create a new KV instance, navigate to the Storage section in your project's toolbar and choose the KV option.

Vercel Storage
Make sure to select the primary region where your serverless function is located for optimal performance.
Once the storage is created, it's automatically linked to your project, and your application will automatically pick up the necessary url
and token
environment variables.