VECTOR NIGHTS · SF Jun 9 · AMS Jun 11 · LDN Jun 18
View Events →
Docs / Getting Started / Installation

Installation

System requirements, automatic and manual installation, and how to run your development server for the first time.

System Requirements

Before you begin, make sure your machine meets the following requirements. Vector is designed to run on modern Node.js environments with minimal configuration.

Note

If you're using an older version of Node.js, some CLI commands and dev server features may not work as expected. We recommend upgrading before continuing.

Automatic Installation

We recommend starting a new project using create-vector-app, which sets up everything automatically for you. To create a project, run:

Terminal 
# using npm
npx create-vector-app@latest

# using pnpm
pnpm create vector-app@latest

On installation, you'll see the following prompts:

Prompt Default Description
projectName my-app The name of your project directory
typescript true Use TypeScript for the project
eslint true Configure ESLint out of the box
srcDir false Place files under a ./src directory

Manual Installation

To manually create a new project, install the required packages:

Terminal 
npm install vector@latest react@latest react-dom@latest

Open package.json and add the following scripts:

package.json 
{
  "scripts": {
    "dev": "vector dev",
    "build": "vector build",
    "start": "vector start",
    "lint": "vector lint"
  }
}
Warning

These scripts refer to the different stages of developing an application. Make sure you don't have conflicting script names already defined in package.json.

Create the Required Directories

Create an app/ directory, then add a layout.tsx file inside. This is the root layout and is required.

Tip

If you forget to create the root layout, Vector will automatically create this file for you when running the development server with npm run dev.

Run the Development Server

  1. Run npm run dev to start the development server
  2. Visit http://localhost:3000 to view your application
  3. Edit app/page.tsx and save to see updated results in your browser
Danger

Do not edit files inside the .vector/ directory — it is regenerated on every build and any manual changes will be lost.