---
title: Installation
description: Get started with TresJS.
navigation:
  icon: i-lucide-download
seo:
  description: Learn how to install and set up TresJS in your Vue project.
---

## Quick Start (Recommended) <UIcon name="i-heroicons-rocket-launch" />

The fastest way to get started with TresJS is using our interactive CLI wizard:

::code-group
```bash [npm]
npx create-tres my-tres-project
```

```bash [yarn]
yarn create tres my-tres-project
```

```bash [pnpm]
pnpm create tres my-tres-project
```
::

The CLI provides an **interactive wizard** that guides you through:

::prose-list
- 🎯 **Template selection**: Choose between Vue + Vite or Nuxt
- 📦 **Ecosystem packages**: Select from TresJS ecosystem packages (Cientos, Post-processing, Leches)
- 🔧 **TypeScript support**: Type safe development with TypeScript
- 📏 **ESLint integration**: Code quality with TresJS ESLint config
::

::prose-note
This is the **recommended approach** for new projects as it handles all the configuration automatically and lets you choose exactly what you need.
::

---

## Manual Installation

If you prefer to set up TresJS manually or add it to an existing project, follow the instructions below:

## Vue project

::steps
### Install TresJS and Three.js

Install the core TresJS package and the Three.js dependency:

::code-group
```bash [npm]
npm install @tresjs/core three
```

```bash [yarn]
yarn add @tresjs/core three
```

```bash [pnpm]
pnpm add @tresjs/core three
```
::

### Install TypeScript types (Optional)

If you're using TypeScript, install the Three.js type definitions:

::code-group
```bash [npm]
npm install @types/three -D
```

```bash [yarn]
yarn add @types/three -D
```

```bash [pnpm]
pnpm add @types/three -D
```
::

### Configure Vite

Add the TresJS template compiler options to your `vite.config.ts`:

```typescript [vite.config.ts]
import { templateCompilerOptions } from '@tresjs/core'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      // Other config
      ...templateCompilerOptions
    }),
  ],
})
```
::prose-warning
This configuration is required to make the template compiler work with the TresJS custom renderer and prevent console warnings.
::
::

### Ecosystem packages (Optional)

Install additional TresJS ecosystem packages for extended functionality:

::code-group
```bash [npm]
npm install @tresjs/cientos @tresjs/post-processing
```

```bash [yarn]
yarn add @tresjs/cientos @tresjs/post-processing
```

```bash [pnpm]
pnpm add @tresjs/cientos @tresjs/post-processing
```
::

::prose-note
These packages will be automatically imported by the [Nuxt module](/getting-started/installation#nuxt-project):
- **Cientos**: A collection of useful helpers and components
- **Post-processing**: Post-processing effects for enhanced visuals
::

## Nuxt project <UIcon name="i-simple-icons-nuxt" />

If you're using Nuxt, you can use the official TresJS Nuxt module for a seamless integration experience.

::steps
### Install the Nuxt module

Install the TresJS Nuxt module and Three.js:

::code-group
```bash [npm]
npm install three @tresjs/nuxt
```

```bash [yarn]
yarn add three @tresjs/nuxt
```

```bash [pnpm]
pnpm add three @tresjs/nuxt
```
::

### Configure the module

Add `@tresjs/nuxt` to the `modules` section of your `nuxt.config.ts`:

```typescript [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@tresjs/nuxt'],
})
```

### Start using TresJS

That's it! The module provides several benefits:

::prose-list
- 🤓 **Auto-import** components and composables from the TresJS ecosystem
- 🖥️ **Client-only rendering** for `TresCanvas` (no need for `.client` suffix or `<ClientOnly />`)
- ⚙️ **Automatic configuration** of the Vue compiler for TresJS components
- ✨ **DX Magic** that comes with Nuxt
::