@orion/vue

Vue 3 composables for the Orion Design System.

Installation

npm install @orion/vue @orion/core
# or
pnpm add @orion/vue @orion/core
# or
yarn add @orion/vue @orion/core

Quick Start

<script setup>
import { useTheme } from '@orion/vue';
import '@orion/core/theme.css';

const { theme, brand, setTheme, setBrand, toggleTheme } = useTheme();
</script>

<template>
  <div>
    <button @click="toggleTheme">
      {{ theme === 'light' ? '🌙' : '☀️' }}
    </button>

    <select :value="brand" @change="setBrand($event.target.value)">
      <option value="orion">Orion</option>
      <option value="uvm">UVM</option>
      <option value="unitec">Unitec</option>
      <option value="laureate">Laureate</option>
    </select>
  </div>
</template>

Composables

useTheme

Composable for managing theme and brand state.

Returns

| Property | Type | Description | |----------|------|-------------| | theme | Ref<Theme> | Current theme ('light' \| 'dark') | | brand | Ref<Brand> | Current brand | | setTheme | (theme: Theme) => void | Set theme | | setBrand | (brand: Brand) => void | Set brand | | toggleTheme | () => void | Toggle between light/dark | | isDark | ComputedRef<boolean> | True if dark theme | | isLight | ComputedRef<boolean> | True if light theme |

Options

<script setup>
const { theme, brand } = useTheme({
  defaultTheme: 'light',      // Default theme
  defaultBrand: 'orion',       // Default brand
  storageEnabled: true,        // Use localStorage
  storageKey: 'orion-theme',   // localStorage key for theme
  brandStorageKey: 'orion-brand' // localStorage key for brand
});
</script>

Examples

Theme Toggle

<script setup>
import { useTheme } from '@orion/vue';

const { theme, toggleTheme } = useTheme();
</script>

<template>
  <button @click="toggleTheme">
    {{ theme === 'light' ? '🌙' : '☀️' }}
  </button>
</template>

Brand Selector

<script setup>
import { useTheme } from '@orion/vue';

const { brand, setBrand } = useTheme();
</script>

<template>
  <select :value="brand" @change="setBrand($event.target.value)">
    <option value="orion">Orion</option>
    <option value="uvm">UVM</option>
    <option value="unitec">Unitec</option>
    <option value="laureate">Laureate</option>
  </select>
</template>

Conditional Rendering

<script setup>
import { useTheme } from '@orion/vue';

const { isDark, isLight } = useTheme();
</script>

<template>
  <div>
    <p v-if="isDark">Dark mode is enabled</p>
    <p v-if="isLight">Light mode is enabled</p>
  </div>
</template>

TypeScript

Full TypeScript support with type-safe imports:

<script setup lang="ts">
import { useTheme } from '@orion/vue';
import type { Theme, Brand } from '@orion/vue';

const { theme, brand } = useTheme();

// Type-safe values
const currentTheme: Theme = theme.value; // ✅
const currentBrand: Brand = brand.value; // ✅
</script>

Framework Integration

Vite + Vue 3

// main.ts
import { createApp } from 'vue';
import '@orion/core/theme.css';
import App from './App.vue';

createApp(App).mount('#app');

<!-- App.vue -->
<script setup>
import { useTheme } from '@orion/vue';

const { theme, toggleTheme } = useTheme();
</script>

<template>
  <button @click="toggleTheme">
    Toggle theme
  </button>
</template>

Nuxt 3

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@orion/core/theme.css']
});

<!-- app.vue -->
<script setup>
import { useTheme } from '@orion/vue';

const { theme, toggleTheme } = useTheme();
</script>

<template>
  <button @click="toggleTheme">
    Toggle theme
  </button>
</template>

License

MIT