Installation

Vectis UI est distribué sous la forme d'un unique paquet npm. Son intégration dans un projet Vue 3 se résume toujours à deux étapes : installer le paquet et importer la feuille de styles. Les guides ci-dessous vous montrent comment appliquer ces deux étapes selon votre configuration.

Avec Vite

Vectis UI s'intègre dans n'importe quelle application Vue 3, qu'elle soit générée avec create-vue ou un autre projet Vite. Vue étant une peer dependency, elle n'est pas directement incluse dans notre paquet. Cela évite les conflits en s'assurant qu'il n'y a toujours qu'une seule instance de Vue dans votre projet final.

bash

pnpm add vectis-ui vue

Importez ensuite la feuille de styles globale une seule fois, au niveau du point d'entrée de votre application (ex. main.ts). Le fichier styles.css inclut le reset CSS, les design tokens et les styles de base communs (5,27 ko gzippé). Les styles propres à chaque composant sont quant à eux automatiquement chargés lors de leur import.

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

Avec Nuxt 3 ou 4

Nuxt incluant déjà Vue, vous n'avez qu'à ajouter le paquet Vectis UI à votre projet.

bash

pnpm add vectis-ui

Déclarez la feuille de styles directement dans nuxt.config.ts plutôt que de l'importer dans un fichier JavaScript. Nuxt pourra ainsi l'injecter dans le <head> de la page lors du rendu serveur (SSR), évitant un chargement asynchrone et tout flash visuel (FOUC).

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

Aucune configuration supplémentaire n'est requise. Distribué nativement au format ESM, le paquet ne nécessite pas d'option build.transpile. Tous les composants sont totalement compatibles SSR : ils n'accèdent aux objets du navigateur (window, document) qu'au sein de onMounted ou des gestionnaires d'événements. De plus, ils utilisent le composable useId() de Vue pour garantir la cohérence des identifiants entre le serveur et le client.

CSS des composants

Le CSS de chaque composant est directement lié à celui-ci via un import statique. Les outils comme Vite, Nitro ou Webpack le transforment automatiquement en une feuille de styles prioritaire, garantissant l'affichage correct des styles même pour les routes chargées à la demande (lazy loading).