Tresjs/docs/content/1.getting-started/3.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.

Vue project

::steps

Install TresJS and Three.js

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