mrnasil / nuxt-rive

Rive Module for Nuxt Framework

Nuxt-Rive

Integrate Rive into your Nuxt application.

This library allows full control over Rive files with a high-level API for hooking up many simple interactions and animations, as well as a low-level API that allows you to drive your own render loop to create multiple artboards, animations, and state machines all in one canvas.

✨ Release Notes ▶️ Online playground 📖 Documentation

Features

• 📦 Extendable by Nuxt modules
• 🚀 Supports Nuxt 3 / Rive

Rive Overview

Rive is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. Designers and developers use our collaborative editor to create motion graphics that respond to different states and user inputs. Our lightweight open-source runtime libraries allow them to load their animations into apps, games, and websites.

🏡 Homepage

📘 General help docs

🛠 Learning Rive

Quick Setup

1. Add nuxt-rive dependency to your project

# Using pnpm
pnpm add -D nuxt-rive

# Using yarn
yarn add --dev nuxt-rive

# Using npm
npm install --save-dev nuxt-rive

2. Add nuxt-rive to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-rive'
  ]
})

That's it! You can now use Nuxt-Rive in your Nuxt app ✨

Contributing

1. Install dependencies with pnpm.
2. Run pnpm dev:prepare to generate stubbed dist directory.
3. Make your changes.
4. Run pnpm lint to verify that there is no issues (consider adding tests).
5. Submit a PR.

License

This repository is licensed under the MIT License. Feel free to use the code and modify it according to your needs.