//twitch-assetsbyHugoRCD

twitch-assets

My personal Twitch stream assets, built entirely with Nuxt! A showcase of dynamic overlays and tools powered by Vue & Nuxt.

Vue

View on GitHub Website

My Nuxt-Powered Twitch Assets

Ever thought about building your Twitch stream assets with Nuxt? Turns out, it's not only possible, it's awesome!

This repository contains all the dynamic overlays, alerts, and tools I use for my personal Twitch stream, all built with Nuxt and Vue.

Watch My Stream · See Them In Action

✨ Why Nuxt for Twitch Assets?

You might not think of Nuxt when planning your stream visuals, but it offers some incredible advantages:

undefinedFull Creative Control: Leverage the power of Vue components and modern web technologies to create truly unique and interactive assets.
undefinedDynamic Content: Easily integrate real-time data, APIs (like the Twitch API I’m already using!), or even server-side logic with Nitro.
undefinedReactivity: Vue’s reactivity makes for smooth and responsive overlays that can react to stream events.
undefinedFamiliar Workflow: If you’re a web developer, you’re already in your comfort zone!
undefinedOpen Source & Customizable: This repo serves as a live example. Fork it, learn from it, and adapt it for your own stream!
undefinedPowered by @nuxt_hub & Cloudflare Workers: Deployed on the edge for optimal performance and enabling real-time features like WebSockets.

🚀 Current State & Future Vision

This project is actively under development. Here’s a glimpse of what’s here and what’s planned:

undefinedImplemented:undefined

Integration with the Twitch API (for basic data, more to come!).
Deployment on @nuxt_hub using Cloudflare Workers.

undefinedRoadmap / To-Do (The exciting stuff I’m building!):undefined

🖼️ Customizable Overlays: Starting Soon, Be Right Back, Stream Ending screens.
💬 Interactive Elements: Real-time chat display, follower/subscriber/raid alerts (leveraging WebSockets!).
📊 Dynamic Information Display: Current project, music playing, social media handles, sponsor logos.
🎨 Themeable Design: Easily switch looks or create your own themes.
🔧 Easy Configuration Interface: (Potentially a simple UI to manage asset settings).
🌐 Optimized Browser Sources: Ensuring smooth performance in OBS, Streamlabs, etc.

The goal is to showcase a comprehensive suite of Nuxt-powered stream assets!

🛠️ Getting Started (Basic Nuxt Setup)

This project is a standard Nuxt application.

Clone the repo:

git clone https://github.com/HugoRCD/twitch-assets.git

Navigate to the project directory:
```
cd twitch-assets
```
Install dependencies (using PNPM):
```
pnpm install
```
Configure your Twitch API credentials and other settings in .env (create one from .env.example if provided) for the chat you will need to create a special token here (https://twitchtokengenerator.com).
Run the Nuxt development server:
```
pnpm dev
```
Add the relevant Nuxt routes (e.g., http://localhost:3000/starting-soon) as Browser Sources in your streaming software.

💡 Get Inspired!

Feel free to browse the code as it develops, see how things are structured, and get inspired to build your own Nuxt-powered stream assets. You might be surprised by what’s possible!

While this project hosts my personal assets, the patterns and techniques can be adapted for any stream.

🤝 Contributing & Feedback

This is primarily a showcase of my personal setup and a learning journey in building these assets. However, if you have cool ideas, find bugs, or want to share how you’ve adapted this, feel free to open an issue or discussion!

And if you find this inspiring, a star ⭐ on the repo is always appreciated!

📝 License

Distributed under the Apache-2.0 License. See LICENSE for more information.

Happy Streaming! Built with Nuxt 💚 & Deployed on @nuxt_hub

Find me

[beta]v0.14.0