@fluxgpu/vue

Vue composables and components for FluxGPU.

Installation

bash

pnpm add @fluxgpu/vue

Dependencies are re-exported, but you can also install directly:

pnpm add @fluxgpu/engine @fluxgpu/host-browser @fluxgpu/contracts





Composables



$3



Initialize GPU adapter and executor.

vue





$3



Run render callback every frame.

ts

import { useGPU, useGPUFrame } from '@fluxgpu/vue';

import type { ICommandEncoder } from '@fluxgpu/contracts';



const canvasRef = ref(null);

const { executor } = useGPU(canvasRef);



const { start, stop, isRunning } = useGPUFrame(

  executor,

  (encoder: ICommandEncoder, deltaTime: number) => {

    // Render logic

  }

);





$3



Low-level animation frame composable.

ts

import { useAnimationFrame } from '@fluxgpu/vue';



const { start, stop, isRunning } = useAnimationFrame((deltaTime, time) => {

  // Called every frame

});





$3



Track normalized mouse position (-1 to 1).

ts

import { useMouse } from '@fluxgpu/vue';



const canvasRef = ref(null);

const mousePos = useMouse(canvasRef);

// mousePos.value.x, mousePos.value.y





Components



$3



Self-contained GPU canvas component.

vue





$3



| Prop | Type | Default | Description |

|------|------|---------|-------------|

|

width | number | 800

 | Canvas width |

|

height | number | 600

 | Canvas height |

|

devicePixelRatio | boolean | true

 | Use device pixel ratio |

|

autoStart | boolean | true

 | Auto-start render loop |



| Event | Payload | Description |

|-------|---------|-------------|

|

ready | AdapterExecutor

 | Emitted when GPU is ready |

|

error | Error

 | Emitted on error |

|

render | { encoder, deltaTime, executor }

 | Emitted each frame |



$3



Display GPU statistics overlay.

vue





Full Example

vue





Re-exports



For convenience, this package re-exports commonly used types and classes:

ts

import {

  // Composables

  useGPU,

  useGPUFrame,

  useAnimationFrame,

  useMouse,

  

  // Components

  GPUCanvas,

  GPUStats,

  

  // Re-exported from @fluxgpu/engine

  AdapterExecutor,

  

  // Re-exported from @fluxgpu/host-browser

  BrowserGPUAdapter,

  

  // Re-exported types from @fluxgpu/contracts

  type IGPUAdapter,

  type ICommandEncoder,

  type IBuffer,

  type ITexture,

} from '@fluxgpu/vue';