Vue Templates Logo Vue Templates
Twitch Extension Vue Laravel Mix Boilerplate screenshot

Twitch Extension Vue Laravel Mix Boilerplate

Author Avatar Theme by Colbydude
Updated: 16 Apr 2024
11 Stars

Twitch Extension Boilerplate setup to use VueJS and Laravel Mix.

Github

Categories

Scss

Overview:

The Twitch Extensions VueJS & Laravel Mix Boilerplate is a boilerplate setup that allows developers to quickly create a frontend for Twitch Extensions using Vue and Laravel Mix, and a backend with Hapi. It is based on the format of the official Twitch Hello World Sample and provides all the necessary components to get started building an Extension quickly.

Features:

  • Quick setup for creating Twitch Extension frontend using Vue and Laravel Mix
  • Backend support with Hapi for handling Extension functionality
  • Simple scenario of changing the color of a circle on the frontend
  • Communication with Extension Backend Service (EBS) to update circle color
  • Integration with Twitch PubSub for real-time updates to all clients listening to the PubSub topic
  • Lightweight EBS providing HTTPS Server, JWT validation, and Twitch PubSub functionality

Installation:

To run the frontend, use the command npm run frontend.

To run the EBS, use the command npm run backend -c <client id> -s <secret> -o <owner id>, replacing <client id>, <secret>, and <owner id> with your specific IDs.

Make sure to obtain your client ID and secret from your Extension Dashboard. You can find more details in the Developer Rig documentation.

To get the owner ID, you can either execute a CURL command against the Twitch /users endpoint using your extension client ID or fetch your Twitch ID using the developer rig and selecting “Configuration Service” and getting the ID listed under “Channel ID or Name”.

Summary:

The Twitch Extensions VueJS & Laravel Mix Boilerplate is a convenient and quick way to create the frontend of Twitch Extensions using Vue and Laravel Mix. It provides a simple scenario for changing the color of a circle and includes a backend with Hapi for handling Extension functionality. The boilerplate also integrates with Twitch PubSub for real-time updates. Installation is straightforward using npm commands and obtaining the necessary IDs from the Extension Dashboard and Twitch API.