Log in

Integration guide

Three.js with Nuxt.js

Bring WebGL 3D scenes into the Vue & Nuxt ecosystem

All integration guides →
npm install three[01]

Overview

Three.js in Nuxt.js

Nuxt.js is the go-to Vue framework for SSR applications. Integrating Three.js requires client-only components to avoid SSR conflicts, but once set up, you get a powerful combination of Vue's reactivity and WebGL rendering.

[Scroll to continue]

Quick start

npm install three
<!-- components/ThreeScene.client.vue -->
<template>
  <canvas ref="canvas" class="w-full h-screen" />
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import * as THREE from 'three'

const canvas = ref(null)
let renderer, scene, camera, animId

onMounted(() => {
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  renderer = new THREE.WebGLRenderer({ canvas: canvas.value })
  renderer.setSize(window.innerWidth, window.innerHeight)

  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshNormalMaterial()
  )
  scene.add(mesh)
  camera.position.z = 2

  const animate = () => {
    animId = requestAnimationFrame(animate)
    mesh.rotation.y += 0.01
    renderer.render(scene, camera)
  }
  animate()
})

onUnmounted(() => {
  cancelAnimationFrame(animId)
  renderer.dispose()
})
</script>
Where it helps[01]
  • +Vue's reactivity integrates naturally with Three.js state
  • +ClientOnly component prevents SSR conflicts
  • +Nuxt auto-imports simplify component setup
  • +Strong TypeScript support
  • +Vite-powered HMR for fast development
Where it costs you[02]
  • −Smaller Three.js + Nuxt ecosystem vs React Three Fiber
  • −TresJS (the Vue R3F equivalent) is less mature
  • −Manual lifecycle cleanup is required (dispose renderer, cancel animation)

Best fit

What this pairing is good at

Every stack has a shape it suits. These are the projects where Nuxt.js and Three.js pull in the same direction.

[03 cases]
[01]

Vue-based marketing sites with 3D sections

[02]

Data visualizations with Three.js + Nuxt

[03]

Interactive 3D product showcases

F.A.Q

Frequently asked questions

What people ask about running Three.js inside Nuxt.js.

Setup

Getting the scene on the page.

Wrap your Three.js component in <ClientOnly> or name it with a .client.vue suffix to ensure it only renders in the browser.

In production

Performance, builds and gotchas.

Yes — TresJS (tresjs.org) is a Vue-native declarative wrapper for Three.js, similar to how R3F works for React.

Official documentation
Nuxt.js docs ↗Three.js docs ↗
Browse tools by tag
#vue#website#webgl
Other integrations