Installation

Vectis UI is distributed as a single npm package. Its integration into a Vue 3 project always comes down to two steps: installing the package and importing the stylesheet. The guides below show you how to apply these two steps depending on your setup.

With Vite

Vectis UI integrates into any Vue 3 application, whether generated with create-vue or another Vite project. Since Vue is a peer dependency, it is not directly included in our package. This avoids conflicts by ensuring there is always only a single instance of Vue in your final project.

bash

pnpm add vectis-ui vue

Next, import the global stylesheet once at your application's entry point (e.g., main.ts). The styles.css file includes the CSS reset, design tokens, and common base styles (5.27 kB gzipped). Component-specific styles are automatically loaded when they are imported.

// main.ts
import 'vectis-ui/styles.css'

With Nuxt 3 or 4

Since Nuxt already includes Vue, you only need to add the Vectis UI package to your project.

bash

pnpm add vectis-ui

Declare the stylesheet directly in nuxt.config.ts rather than importing it in a JavaScript file. Nuxt can then inject it into the page's <head> during server-side rendering (SSR), avoiding asynchronous loading and any visual flash (FOUC).

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['vectis-ui/styles.css'],
})

No additional configuration is required. Distributed natively in ESM format, the package does not require any build.transpile option. All components are fully SSR-compatible: they only access browser objects (window, document) within onMounted or event handlers. Additionally, they use Vue's useId() composable to ensure identifier consistency between the server and the client.

Component CSS

Each component's CSS is directly linked to it via a static import. Tools like Vite, Nitro, or Webpack automatically transform it into a priority stylesheet, ensuring correct style rendering even for on-demand loaded routes (lazy loading).