Skip to main content
A Vue wrapper component for the Spline 3D tool, providing events and auto-resizing.

​
Installation

npm install @splinetool/runtime

​
Usage

<script setup lang="ts">
import { Spline } from '@/components/visualization'

function handleLoad() {
  console.log('Spline scene loaded')
}

function handleMouseDown(event: any) {
  console.log('Mouse down:', event)
}
</script>

<template>
  <Spline 
    scene="https://prod.spline.design/your-scene-id/scene.splinecode"
    :render-on-demand="true"
    :on-load="handleLoad"
    @spline-mouse-down="handleMouseDown"
  />
</template>

​
Props

Prop NameTypeDefaultDescription
scenestring—The URL or path to the Spline scene file. Required.
onLoadFunctionundefinedCallback that fires when the Spline scene loads successfully.
renderOnDemandbooleantrueEnables or disables Spline’s render-on-demand optimization.
styleobject{}Custom CSS style applied to the container of the canvas.

​
Events

Event NamePayloadDescription
errorErrorEmits if there’s an error while loading the Spline scene.
spline-mouse-downanyEmits when a mouseDown event is detected in the Spline scene.
spline-mouse-upanyEmits when a mouseUp event is detected in the Spline scene.
spline-mouse-hoveranyEmits when the mouseHover event is triggered.
spline-key-downanyEmits on keyDown within the Spline scene.
spline-key-upanyEmits on keyUp within the Spline scene.
spline-startanyEmits when the Spline scene starts.
spline-look-atanyEmits when a lookAt event occurs.
spline-followanyEmits when a follow event occurs.
spline-scrollanyEmits on scroll interactions.

​
Credits

  • Utilizes Spline’s runtime behind the scenes
  • Inspired by various 3D web experiences using Spline

Build docs developers (and LLMs) love

Get started for freeTalk to us