Getting Started

Usage

Learn how to use Nuxt Rive in your application.

Component

The primary way to use Rive animations in your Nuxt application is through the <Rive> component.

Basic Example

<script setup lang="ts">
const riveParams = {
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  autoplay: true,
  stateMachines: ['bumpy']
}
</script>

<template>
  <div class="h-96 w-96">
    <Rive :rive-params="riveParams" />
  </div>
</template>

Props

`rive-params`

Accepts an object with various Rive parameters. Common options include:

src: The URL of the .riv file.
artboard: The name of the artboard to load.
stateMachines: An array of state machine names to calculate.
animations: An array of animation names to play.
autoplay: Whether to automatically transition to playing.
layout: Layout options for the animation (fit, alignment).

`options`

Optional configuration for the Rive instance:

useDevicePixelRatio: Adjusts for high-DPI screens (default: true).
fitCanvasToArtboardHeight: Resizes canvas to match artboard aspect ratio (default: false).
useOffscreenRenderer: Uses offscreen canvas for better performance (default: true).

`text-runs`

A dictionary of text run names and their values for dynamic text updates.

<Rive
  :rive-params="{ src: '/animations/text.riv' }"
  :text-runs="{ 'MyRun': 'Hello Nuxt!' }"
/>

Layout & Configuration

You can control how the animation fits within the canvas using the Layout property.

<script setup lang="ts">
import { Layout, Fit, Alignment } from '@rive-app/webgl'

const riveParams = {
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  layout: new Layout({
    fit: Fit.Cover,
    alignment: Alignment.Center
  }),
  autoplay: true
}
</script>

<template>
  <!-- ensure the parent has defined dimensions -->
  <div class="w-full h-screen">
    <Rive :rive-params="riveParams" />
  </div>
</template>

Events

You can listen for standard Rive events:

@play: Triggered when animation starts playing.
@pause: Triggered when animation is paused.
@stop: Triggered when animation stops.
@loop: Triggered when an animation loops.
@statechange: Triggered when a state machine changes state.
@rive-is-loaded: Triggered when the Rive instance is fully loaded and ready. Note: This emits the Rive instance itself.

Accessing Rive Instance

You can access the Rive instance via the @rive-is-loaded event (as shown in the Composable example) or by using a Template Ref.

Using Template Ref

<script setup lang="ts">
const riveComponent = ref(null)

function logInstance() {
  if (riveComponent.value?.RiveInstance) {
    console.log('Rive Instance:', riveComponent.value.RiveInstance)
  }
}
</script>

<template>
  <Rive ref="riveComponent" :rive-params="{ src: '...' }" />
</template>

Composables

`useRiveStateMachineInput`

This composable is a helper to retrieve a State Machine input (Trigger, Boolean, or Number) from a loaded Rive instance.

<script setup lang="ts">
import type { Rive } from '@rive-app/webgl';

const rive = ref<Rive | null>(null);

function onRiveLoaded(instance: Rive) {
  rive.value = instance;
}

function triggerBump() {
  // Retrieve the input from the loaded instance
  const input = useRiveStateMachineInput(rive.value, 'bumpy', 'bump');
  
  if (input) {
    input.fire();
  }
}
</script>

<template>
  <div>
    <Rive 
      :rive-params="{ src: 'https://cdn.rive.app/animations/vehicles.riv', stateMachines: ['bumpy'] }" 
      @rive-is-loaded="onRiveLoaded" 
    />
    <button @click="triggerBump">Bump</button>
  </div>
</template>

Core Concepts

Understand the core concepts of Rive in Nuxt.

Playground

Explore Nuxt Rive in an interactive playground.