---
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.
---

## Vue project

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

Install the core TresJS package and 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 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 Vue compiler for TresJS components
- ✨ **DX Magic** that comes with Nuxt
::