---
title: Vue
description: This guide sets up uitheme-vue in a Vue 3 app built with Vite.
url: https://uitheme.thally.app/setup/vue
---
# Vue
This guide sets up uitheme-vue in a Vue 3 app built with Vite.
This guide sets up `uitheme-vue` in a Vue 3 app built with Vite.
> `uitheme-vue` is an alpha package (`0.1.0-alpha.0`). The API can change before a stable release.
## Requirements
- Vue `^3.5.0`.
- A Vite project that uses `@vitejs/plugin-vue`.
- Tailwind CSS v4 with `@tailwindcss/vite`, if you want the Tailwind classes from [Theme CSS](/setup/theme-css). Tailwind is optional.
## Install
```bash
pnpm add uitheme-vue@alpha
```
```bash
npm install uitheme-vue@alpha
```
```bash
yarn add uitheme-vue@alpha
```
The package does not need React. It ships an ES module build only.
## Configure
### 1. Install the plugin
Edit `src/main.ts`.
```ts
import { createApp } from 'vue';
import { createUITheme } from 'uitheme-vue';
import App from './App.vue';
import './style.css';
createApp(App)
.use(
createUITheme({
defaultTheme: 'system',
colorThemes: ['default', 'caffeine', 'mocha'],
})
)
.mount('#app');
```
The plugin creates one theme owner for the app. Every composable and component reads from that owner. A component that runs without the plugin throws an error.
All themes apply to the `` element. Use one theme owner at the app root.
### 2. Add the before-paint script
The plugin runs after Vue starts. Add a script to the document head so that the first paint uses the right theme.
Add a marker to `index.html`:
```html
My app
```
Add a small Vite plugin to `vite.config.ts`. The plugin replaces the marker with the script.
```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import tailwindcss from '@tailwindcss/vite';
import { getThemeScript } from 'uitheme-vue/bootstrap';
export default defineConfig({
plugins: [
vue(),
tailwindcss(),
{
name: 'uitheme-before-paint',
transformIndexHtml: (html) =>
html.replace(
'',
``
),
},
],
});
```
`getThemeScript(options)` returns script text. It does not return an HTML tag.
Use the same options in `getThemeScript` and in `createUITheme`. These options must match: `themes`, `colorThemes`, `defaultTheme`, `defaultColorTheme`, `storageKey`, `colorStorageKey`, `globalClassName`, and `colorThemePrefix`. If you set a custom `storage` adapter in the plugin, the script does not read it. The script then uses the defaults.
If your site uses a CSP, add the nonce to the `
```
Both controls are native `