1import { createApp } from "vue";
2import { ThemeProvider } from "@theme-kit/vue";
3
4const app = createApp(App);
5app.use(ThemeProvider, {
6  themes,
7  defaultTheme: "light",
8  transition: { enabled: true },
9});
10app.mount("#app");

More Examples

Additional patterns for Vue 3.

App.vue

vue

1<script setup lang="ts">
2import { useTheme } from "@theme-kit/vue";
3
4const { theme, mode, setMode, toggleTheme } = useTheme();
5</script>
6
7<template>
8  <button @click="toggleTheme">
9    {{ theme.name }} · {{ mode }}
10  </button>
11</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.

Components

Export	Description
`ThemeScope`	Scoped theming component.