Spline

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

Preview

Code

API

Prop Name	Type	Default	Description
`scene`	`string`	—	The URL or path to the Spline scene file. Required.
`onLoad`	`Function`	`undefined`	Callback that fires when the Spline scene loads successfully.
`renderOnDemand`	`boolean`	`true`	Enables or disables Spline's render-on-demand optimization.
`style`	`object`	`{}`	Custom CSS style applied to the container of the canvas.

Emits

Event Name	Payload	Description
`error`	`Error`	Emits if there's an error while loading the Spline scene.
`spline-mouse-down`	`any`	Emits when a mouseDown event is detected in the Spline scene.
`spline-mouse-up`	`any`	Emits when a mouseUp event is detected in the Spline scene.
`spline-mouse-hover`	`any`	Emits when the mouseHover event is triggered.
`spline-key-down`	`any`	Emits on keyDown within the Spline scene.
`spline-key-up`	`any`	Emits on keyUp within the Spline scene.
`spline-start`	`any`	Emits when the Spline scene starts.
`spline-look-at`	`any`	Emits when a lookAt event occurs.
`spline-follow`	`any`	Emits when a follow event occurs.
`spline-scroll`	`any`	Emits on scroll interactions.

Note: This component uses Spline & requires @splinetool/runtime npm package as a dependency.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/spline.json"

npm

pnpm

bun

yarn

npm install @splinetool/runtime

You can copy and paste the following code to create this component:

Spline.vue

ParentSize.vue

Responsive Canvas: Uses a ParentSize wrapper to adjust to the parent container size.
Event Bindings: Exposes Spline’s mouse, keyboard, and scrolling events via Vue emits.
Render-On-Demand: Optionally only re-renders when necessary, optimizing performance.
Easy Integration: Load a Spline 3D scene by simply passing the scene prop.
Cleanup & Disposal: Manages resource disposal on unmount to avoid memory leaks.

On This Page