Three.js with Nuxt.js
Bring WebGL 3D scenes into the Vue & Nuxt ecosystem
Integration Guide
Overview
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.
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>✓Pros
- •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
✗Cons
- •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)
Frequently Asked Questions
How do I prevent Three.js SSR errors in Nuxt?
Wrap your Three.js component in <ClientOnly> or name it with a .client.vue suffix to ensure it only renders in the browser.
Is there a React Three Fiber equivalent for Nuxt/Vue?
Yes — TresJS (tresjs.org) is a Vue-native declarative wrapper for Three.js, similar to how R3F works for React.
Best Use Cases
- →Vue-based marketing sites with 3D sections
- →Data visualizations with Three.js + Nuxt
- →Interactive 3D product showcases