Install the TrifleHub plugin using npm or yarn:
# Using npm
npm install @trifle/trifle-hub
# Using yarn
yarn add @trifle/trifle-hubThis prevents your bundler from including peer dependencies in your build, reducing bundle size and avoiding version conflicts.
Import and register the TrifleHub plugin in your Vue application:
import { createApp } from 'vue'
import App from './App.vue'
import { TrifleHubVuePlugin } from '@trifle/trifle-hub'
const app = createApp(App)
// Configure and install the TrifleHub plugin
app.use(TrifleHubVuePlugin, {
// Required: ReOWN AppKit configuration
reownConfig: {
appId: 'your-app-id'
// Other ReOWN AppKit configuration options
},
connectors: [],
// Optional: Backend URL (defaults to 'https://bot-staging.trifle.life')
backendUrl: 'https://bot-staging.trifle.life',
// Optional: Set the default page to show when the hub is opened for the first time
defaultPage: 'games' // or any valid page key (e.g., 'welcome', 'account', etc.)
// Optional: For development use, you can hook into an existing Pinia instance
devHookPiniaInstance: existingPiniaInstance
})
app.mount('#app')About defaultPage:
- The
defaultPageoption allows you to specify which page should be shown the first time a user opens the hub (if no page is set in the route or sessionStorage). - If not specified, it defaults to
'welcome'. - Valid values are any of the page keys defined in your hub (e.g.,
'games','leaderboard','account', etc.).
Add the TrifleHub component to your app layout:
<template>
<div id="app">
<!-- Your app content -->
<TrifleHub position="bottom-left" />
</div>
</template>
<script setup>
// The component is registered globally
</script>CSS is automatically injected when the plugin is registered — no separate stylesheet import is required.
Since v1.1.0, all compiled styles ship inside @layer trifle-hub. This keeps trifle-hub's styles from polluting the global cascade and lets you control where they sit relative to your own CSS.
trifle-hub ships its own element reset (preflight) inside @layer trifle-hub.base. If your app has no preflight of its own, trifle-hub provides the baseline for buttons, inputs, etc.
For trifle-hub's utility classes (e.g. _bg-metallic-linear, _shadow-panel) to correctly override element resets on tags like <button>, trifle-hub must be declared after base in the layer order. This ensures trifle-hub utility classes beat preflight resets, while your own app utilities still win over trifle-hub when they conflict.
trifle-hub injects its CSS via JavaScript at runtime. Because CSS layer order is locked by the first appearance of each layer name, any @layer declaration in your app's CSS file may arrive too late if trifle-hub's JS runs first (which depends on import order in main.js).
The safest approach for any Vite app is to declare the layer order as a <style> tag in index.html. It is processed by the browser before any JavaScript runs, so trifle-hub's injection always lands in the correct position.
<!-- index.html <head> — before any <script> tags -->
<style>@layer theme, base, trifle-hub, components, utilities;</style>Include theme if you use Tailwind v4 (it has an extra @layer properties, theme, ... that v3 does not).
In index.html:
<style>@layer properties, theme, base, trifle-hub, components, utilities;</style>Your style.css needs no extra layer declaration:
@import "tailwindcss";In index.html:
<style>@layer base, trifle-hub, components, utilities;</style>Tailwind v3 outputs unlayered CSS by default, which unconditionally beats any @layer rule. To opt in to the layer system, wrap each directive in an explicit @layer block in your CSS:
@layer base {
@tailwind base;
}
@layer components {
@tailwind components;
}
@layer utilities {
@tailwind utilities;
}Any styles written outside a @layer block remain unlayered and beat everything above.
In index.html:
<style>@layer trifle-hub;</style>If your app has @tailwind base commented out (relying on trifle-hub's built-in reset), your unlayered @tailwind components/utilities output naturally beats @layer trifle-hub without needing any wrapping:
/* @tailwind base; */ ← leave commented out
@tailwind components;
@tailwind utilities;The compiled stylesheet is available at dist/trifle-hub.css if you prefer to manage it explicitly (e.g., for SSR, critical CSS extraction, or strict layer ordering). The style field in the package manifest points to this file. If importing it directly, note that the JS bundle also auto-injects the CSS — disable one or the other to avoid loading styles twice.
The TrifleHub plugin provides several resources via Vue's provide/inject system:
| Injection Key | Type | Description |
|---|---|---|
'TrifleHub/wagmiConfig' |
Object | Wagmi configuration for wallet interactions |
'TrifleHub/appKit' |
Object | ReOWN AppKit instance |
'TrifleHub/store' |
Object | Authentication store (Pinia) |
'trifleHubInternalPinia' |
Object | Internal Pinia instance |
'TrifleHub/defaultPage' |
String | The default page key for the hub |
These are provided by the TrifleHub component when it's mounted:
| Injection Key | Type | Description |
|---|---|---|
'hub' |
Object | Hub controller with the following properties: |
hubOpen |
Ref | Reactive state for hub visibility |
openHub(page?) |
Function | Open the hub, optionally to a specific page |
closeHub() |
Function | Close the hub |
'account' |
Object | Account information with the following properties: |
address |
ComputedRef<string|null> | Current wallet address |
chainId |
ComputedRef<number|null> | Current chain ID |
isConnected |
ComputedRef | Whether wallet is connected |
isConnecting |
ComputedRef | Whether wallet is connecting |
'accountModal' |
Object | Wallet interaction methods: |
disconnect() |
Function | Disconnect the wallet |
openAccountModal() |
Function | Open the wallet connection modal |
enforceConnection() |
Function | Ensure wallet is connected |
signDiscordId(message) |
Function | Sign a message for Discord auth |
TrifleHub provides a simple navigation system through the injected hub object. You can use this to open specific pages or close the hub.
The following pages are available for navigation:
welcome- Welcome page (not shown in menu)games- Games pageleaderboard- Leaderboard pageearn- Earn pageaccount- Account pagetheme- Theme settings (not shown in menu)
You can navigate between pages using the hub object:
// In a Vue component
import { inject } from 'vue'
export default {
setup() {
// Get the hub controller
const hub = inject('hub')
// Function to open a specific page
const openAccountPage = () => {
hub.openHub('account')
}
// Function to close the hub
const closeHub = () => {
hub.closeHub()
}
return { openAccountPage, closeHub }
}
}The authentication store (inject('TrifleHub/store')) provides several methods for managing user authentication:
| Method | Description |
|---|---|
connectDiscord() |
Initiate Discord authentication |
connectWallet() |
Connect to a wallet |
authenticateWithWallet(address) |
Authenticate with a connected wallet |
disconnect() |
Disconnect all authentication methods |
updateUsername(newUsername) |
Update the user's username |
fetchUserStatus() |
Get the latest user status from the server |
Here's a complete example of a component that interacts with TrifleHub:
<template>
<div>
<button @click="openAccountPage">Open Account</button>
<button @click="openLeaderboard">Open Leaderboard</button>
<button @click="closeHub">Close Hub</button>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const hub = inject('hub')
const openAccountPage = () => {
hub.openHub('account')
}
const openLeaderboard = () => {
hub.openHub('leaderboard')
}
const closeHub = () => {
hub.closeHub()
}
return {
openAccountPage,
openLeaderboard,
closeHub
}
}
}
</script>