TwitchExt-Vue

A Vue abstraction for the Twitch Extension JavaScript Helper.

Overview

TwitchExt-Vue simplifies integration with the Twitch Extension Helper in your Vue applications.
It provides reactive Twitch extension data without requiring manual setup.

Installation

Install via npm or yarn:

npm install twitchext-vue
# OR
yarn add twitchext-vue

Dependencies

• Vue 3

Usage

Composition API

Use the useTwitchExt() function to access the Twitch extension helper in a reactive way:

<script setup>
import { useTwitchExt } from "twitchext-vue";

const ext = useTwitchExt();
</script>

<template>
  <div v-if="ext.initialized">
    {{ ext.viewer.opaqueId }}
  </div>
  <div v-else>
    Loading...
  </div>
</template>

Options API

With the Options API, TwitchExt-Vue adds a $ext field to your Vue instance, allowing you to access the Twitch extension helper reactively.

Register the Plugin

import Vue from "vue";
import App from "./App";
import TwitchExtPlugin from "twitchext-vue";

Vue.use(TwitchExtPlugin);

new Vue({
  el: "#app",
  render: (h) => h(App),
});

Accessing Data in the Options API

You can access Twitch extension data as computed properties:

computed: {
  opaqueId() {
    return this.$ext.viewer.opaqueId;
  }
}

Data Structure

TwitchExt-Vue follows the same structure as the Twitch Extension Helper, making it easy to integrate.

General Data

Access Twitch extension data in both the Composition API and Options API.

Composition API Example

<script setup>
import { computed } from "vue";
import { useTwitchExt } from "twitchext-vue";

const ext = useTwitchExt();
const opaqueId = computed(() => (ext.initialized ? ext.viewer.opaqueId : ""));
</script>

Options API Example

computed: {
  opaqueId() {
    return this.$ext.viewer.opaqueId;
  }
}

Custom Data Fields

Bits

• bits.hasOngoingBitTransaction: boolean → true if a Bits transaction is in progress.

Channel

• channel.initialized: boolean → true if the channel info is available.
• channel.id: string → Returns the Twitch channel ID.

Configuration Service

• configuration.initialized: boolean → true if configuration data is available.

Position

• position.initialized: boolean → true if position info is available.

Viewer

• viewer.initialized: boolean → true if viewer data is available.

Context

TwitchExt-Vue stores the same context structure as the onContext method.

• context.initialized: boolean → true if the context is set.

Query Parameters

For query parameters, see the Twitch Query Params documentation.

• Use this.$ext.queryParams (Options API) or ext.queryParams (Composition API) to access them.

Other Frameworks

Vue 3 / Vite Starter

To quickly set up a Twitch Extension with Vue 3 and Vite, use my starter template:
🔗 TwitchExt-Vue-Starter

React

If you prefer React, you can use my React package:
🔗 TwitchExt-React

Resources

• 📚 Twitch Extension Helper Documentation