Setting up OpenVolt in a Vite project with OpenVue and Tailwind.
OpenVolt requires Tailwind CSS v4+ for theming. The prerequisite steps are covered by the Install Tailwind CSS with Vite guide. If you have Vite and Tailwind configured successfully, follow the next steps.
After successfully installing Tailwind, proceed with the installation of the tailwindcss-primeui plugin. This plugin extends Tailwind with new utility classes such as text-primary, bg-surface-500, and adds new variants with the p- prefix including p-selected.
In addition tailwind-merge utility is required for efficient handling of external class merging.
npm i tailwindcss-primeui
npm i tailwind-merge
In the CSS file that contains the tailwindcss import, add the tailwindcss-primeui import as well.
@import "tailwindcss";
@import "tailwindcss-primeui";
OpenVue is available for download on npm registry.
# Using npm
npm install openvue
# Using yarn
yarn add openvue
# Using pnpm
pnpm add openvue
Configure OpenVue to enable the unstyled mode that disables the default design token based theming globally.
import { createApp } from 'vue';
import OpenVue from 'openvue/config';
const app = createApp(App);
app.use(OpenVue, {
unstyled: true
});
The @ alias is recommended to refer to a source folder in your application where OpenVolt components are located as a subfolder. Without this alias, tedious relative paths like ../../ may be required.
import { defineConfig } from 'vite';
// https://vite.dev/config/
export default defineConfig({
//...,
resolve: {
alias: [
{ find: "@", replacement: path.resolve(__dirname, "./src") }
]
}
});
Final step is defining the default values for the CSS variables utilized by the tailwindcss-primeui, this can be done in a global CSS file in your Vite application e.g. src/assets/base.css.
With a future update of the primeui tailwind plugin, this step will be done implicitly.
/* Primary and Surface Palettes */
:root {
--p-primary-50: #ecfdf5;
--p-primary-100: #d1fae5;
--p-primary-200: #a7f3d0;
--p-primary-300: #6ee7b7;
--p-primary-400: #34d399;
--p-primary-500: #10b981;
--p-primary-600: #059669;
--p-primary-700: #047857;
--p-primary-800: #065f46;
--p-primary-900: #064e3b;
--p-primary-950: #022c22;
--p-surface-0: #ffffff;
--p-surface-50: #fafafa;
--p-surface-100: #f4f4f5;
--p-surface-200: #e4e4e7;
--p-surface-300: #d4d4d8;
--p-surface-400: #a1a1aa;
--p-surface-500: #71717a;
--p-surface-600: #52525b;
--p-surface-700: #3f3f46;
--p-surface-800: #27272a;
--p-surface-900: #18181b;
--p-surface-950: #09090b;
--p-content-border-radius: 6px;
}
/* Light */
:root {
--p-primary-color: var(--p-primary-500);
--p-primary-contrast-color: var(--p-surface-0);
--p-primary-hover-color: var(--p-primary-600);
--p-primary-active-color: var(--p-primary-700);
--p-content-border-color: var(--p-surface-200);
--p-content-hover-background: var(--p-surface-100);
--p-content-hover-color: var(--p-surface-800);
--p-highlight-background: var(--p-primary-50);
--p-highlight-color: var(--p-primary-700);
--p-highlight-focus-background: var(--p-primary-100);
--p-highlight-focus-color: var(--p-primary-800);
--p-text-color: var(--p-surface-700);
--p-text-hover-color: var(--p-surface-800);
--p-text-muted-color: var(--p-surface-500);
--p-text-hover-muted-color: var(--p-surface-600);
}
/*
* Dark Mode
* Defaults to system, change the dark variant selector to match the CSS variable configuration.
* For example;
* @custom-variant dark (&:where(.app-dark, .app-dark *));
* should match to;
* :root[class="app-dark"]
*/
@media (prefers-color-scheme: dark) {
:root {
--p-primary-color: var(--p-primary-400);
--p-primary-contrast-color: var(--p-surface-900);
--p-primary-hover-color: var(--p-primary-300);
--p-primary-active-color: var(--p-primary-200);
--p-content-border-color: var(--p-surface-700);
--p-content-hover-background: var(--p-surface-800);
--p-content-hover-color: var(--p-surface-0);
--p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
--p-highlight-color: rgba(255, 255, 255, 0.87);
--p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
--p-highlight-focus-color: rgba(255, 255, 255, 0.87);
--p-text-color: var(--p-surface-0);
--p-text-hover-color: var(--p-surface-0);
--p-text-muted-color: var(--p-surface-400);
--p-text-hover-muted-color: var(--p-surface-300);
}
}
Download the OpenVolt components to your application codebase on demand with the npx openvolt-vue command. Refer to the individual documentation pages of the components to access the download command per component.
npx openvolt-vue add Button
npx openvolt-vue add DataTable
npx openvolt-vue add Dialog
npx openvolt-vue add DatePicker
Register the OpenVolt components locally or globally. Visit the component registration to learn more.
<template>
<div>
<h1>Your Application</h1>
<Button label="Hello World" />
</div>
</template>
<script setup lang="ts">
import Button from '@/volt/Button.vue'; // local registration
</script>
Review the volt-vite project as an example.