@th-batman/3d-viewer-vue

@3d-viewer/vue

Official Vue 3 component wrapper for @3d-viewer/core. Renders 3D jewelry customizers in Nuxt 3, Vite, and standard Vue 3 applications.

Installation

pnpm add @3d-viewer/vue @3d-viewer/core three
# or with npm
npm install @3d-viewer/vue @3d-viewer/core three

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { Viewer } from '@3d-viewer/vue'

const modelUrl = ref('https://cdn.example.com/models/solitaire-ring.glb')
const activeMetal = ref('yellow-gold-18k')
const activeStone = ref('diamond-colorless')

function onLoaded(info: any) {
  console.log('Model loaded! Parts:', info.parts)
}
</script>

<template>
  <div style="width: 100%; height: 500px;">
    <Viewer
      :source="modelUrl"
      :metal-color="activeMetal"
      :stone-color="activeStone"
      :auto-rotate="true"
      @loaded="onLoaded"
    />
  </div>
</template>

License

MIT