Vue 3

@themvora/vue

Vue 3Composables7 exports

Vue 3 provider, composables and scopes over the shared runtime.

Verified with Themvora 2.0.0·Updated 2026-09-17

Prerequisites

Package Manager

npm, pnpm, yarn, or bun

Dependencies

@themvora/core (peer dependency)

Use Case

Vue 3 projects with theme support

Installation

View on npm ↗Source ↗

Install the integration — @themvora/core is pulled in automatically as a dependency.

bash

pnpm add @themvora/vue

Quick Start

Complete copy-paste usage for this package.

main.ts

TS / JS

import { createApp } from "vue";
import { ThemeProvider } from "@themvora/vue";

const app = createApp(App);
app.use(ThemeProvider, {
  defaultTheme: "light",
  transition: { enabled: true },
});
app.mount("#app");

More Examples

Additional patterns for Vue 3.

App.vue

vue

<script setup lang="ts">
import { useTheme } from "@themvora/vue";

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

<template>
  <button @click="toggleTheme">
    {{ theme.name }} · {{ mode }}
  </button>
</template>

API Reference

Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/vue.

Provider

Export	Description
`ThemeProvider`	Component with all runtime options; auto-registered via app.use (`.install`).
`provideThemeRuntime / useThemeRuntime`	Provide / inject API.

Composables

Export	Description
`useTheme`	`{ theme, mode, family, setMode, setFamily, toggleTheme }` as refs.
`useThemeHistory / useThemeBatch`	History and atomic batching.
`useThemeSnapshot / useThemeRestore`	Serialize / restore state.
`useThemeLifecycle / useThemePacks`	Events and runtime theme packs.