Tresjs/docs/content/1.getting-started/2.installation.md

---

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)

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

::code-group

npx create-tres my-tres-project

yarn create tres my-tres-project

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

npm install @tresjs/core three

yarn add @tresjs/core three

pnpm add @tresjs/core three

::

Install TypeScript types (Optional)

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

::code-group

npm install @types/three -D

yarn add @types/three -D

pnpm add @types/three -D

::

Configure Vite

Add the TresJS template compiler options to your 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

npm install @tresjs/cientos @tresjs/post-processing

yarn add @tresjs/cientos @tresjs/post-processing

pnpm add @tresjs/cientos @tresjs/post-processing

::

::prose-note These packages will be automatically imported by the Nuxt module:

• Cientos: A collection of useful helpers and components
• Post-processing: Post-processing effects for enhanced visuals ::

Nuxt project

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

npm install three @tresjs/nuxt

yarn add three @tresjs/nuxt

pnpm add three @tresjs/nuxt

::

Configure the module

Add @tresjs/nuxt to the modules section of your 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 ::