@3lens/vue-bridge

Vue.js integration for 3Lens devtools. Provides a Vue plugin, composables, and TresJS integration for seamless debugging of Three.js applications built with Vue.

Installation

npm install @3lens/vue-bridge @3lens/core
# or
pnpm add @3lens/vue-bridge @3lens/core
# or
yarn add @3lens/vue-bridge @3lens/core
# or
bun add @3lens/vue-bridge @3lens/core

Quick Start

Using the Plugin

// main.ts
import { createApp } from 'vue';
import { ThreeLensPlugin } from '@3lens/vue-bridge';
import App from './App.vue';

const app = createApp(App);

app.use(ThreeLensPlugin, {
  appName: 'My Vue Three.js App',
  showOverlay: true,
  toggleShortcut: 'ctrl+shift+d',
});

app.mount('#app');

Using Composables

<script setup>
import { useThreeLens, useDevtoolEntity } from '@3lens/vue-bridge';
import { ref, onMounted } from 'vue';
import * as THREE from 'three';

// Access devtools context
const { fps, drawCalls, isReady } = useThreeLens();

// Register entities
const meshRef = ref<THREE.Mesh | null>(null);
useDevtoolEntity(meshRef, { name: 'Player', module: 'game' });

onMounted(() => {
  meshRef.value = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshStandardMaterial()
  );
});
</script>

<template>
  <div class="stats">
    <span>FPS: {{ fps }}</span>
    <span>Draw Calls: {{ drawCalls }}</span>
  </div>
</template>

With TresJS

<script setup>
import { TresCanvas } from '@tresjs/core';
import { ThreeLensPlugin, useTresProbe } from '@3lens/vue-bridge';

const { isConnected } = useTresProbe();
</script>

<template>
  <TresCanvas>
    <TresProbeConnector />
    <TresMesh>
      <TresBoxGeometry />
      <TresMeshStandardMaterial color="orange" />
    </TresMesh>
  </TresCanvas>
</template>

API Overview

Plugin & Factory

Export	Description
ThreeLensPlugin	Vue plugin for app-wide integration
createThreeLens	Factory for manual context creation

Core Composables

Composable	Description
useThreeLens	Access full devtools context
useProbe	Access the probe instance
useSelectedObject	Manage object selection

Entity Registration

Composable	Description
useDevtoolEntity	Register single objects
useDevtoolEntityGroup	Register object groups

Metrics Composables

Composable	Description
useMetric	Custom metric extraction
useFPS	FPS tracking
useDrawCalls	Draw call tracking
useTriangles	Triangle count
useGPUMemory	GPU memory estimate

TresJS Integration

Export	Description
useTresProbe	TresJS probe connection
createTresConnector	TresJS connector factory

Types

Type	Description
ThreeLensKey	Injection key for provide/inject
ThreeLensPluginConfig	Plugin configuration
ThreeLensContext	Full context interface
EntityOptions	Entity registration options

Features

• ✅ Vue Plugin - App-wide integration with global properties
• ✅ Composition API - Full composables support
• ✅ Reactive Metrics - Computed refs for all performance data
• ✅ Entity Registration - Name and categorize Three.js objects
• ✅ TresJS Integration - First-class TresJS support
• ✅ Auto-cleanup - Automatic cleanup on component unmount
• ✅ TypeScript - Full type safety
• ✅ SSR Safe - Works with Nuxt and SSR environments

Related

• Vue/TresJS Guide - Comprehensive integration guide
• @3lens/core - Core devtools package
• @3lens/overlay - Visual overlay UI